Angular: using single variable for multiple buttons action - javascript

I want to use single varible for multiple buttons to enable and disable, individually.
<button class="button" [disabled]="btnState" (click)="function('val1')"> button 1</button>
<button class="button" [disabled]="btnState" (click)="function('val2')"> button 2</button>
<button class="button" [disabled]="btnState" (click)="function('val3')"> button 3</button>
<button class="button" [disabled]="btnState" (click)="function('val4')"> button 4</button>
How do I enable or disable the above buttons individually based on selection? I tried only with a result of disabling all of them or enabling all of them.

You can keep track state of the buttons:
<button class="button" [disabled]="buttonStates['button1']" (click)="onToggle('button1')"> button 1</button>
<button class="button" [disabled]="buttonStates['button2']" (click)="onToggle('button2')"> button 2</button>
<button class="button" [disabled]="buttonStates['button3']" (click)="onToggle('button3')"> button 3</button>
<button class="button" [disabled]="buttonStates['button4']" (click)="onToggle('button4')"> button 4</button>
export class YourComponent {
buttonStates: any = {
button1: true,
button2: false,
button3: false,
button4: true
};
onToggle(button) {
this.buttonStates[button] = !this.buttonStates[button];
}
}

You can use an array, since it's technically a single variable
HTML
<button class="button" [disabled]="btnState[0]" (click)="foo('val1')"> button 1</button>
<button class="button" [disabled]="btnState[1]" (click)="foo('val2')"> button 2</button>
<button class="button" [disabled]="btnState[2]" (click)="foo('val3')"> button 3</button>
<button class="button" [disabled]="btnState[3]" (click)="foo('val4')"> button 4</button>
app.component.ts
btnState = [false, false, true, true];
Stackblitz
Or, you can even use an object
HTML
<button class="button" [disabled]="btnState.btn1" (click)="foo('val1')"> button 1</button>
<button class="button" [disabled]="btnState.btn2" (click)="foo('val2')"> button 2</button>
<button class="button" [disabled]="btnState.btn3" (click)="foo('val3')"> button 3</button>
<button class="button" [disabled]="btnState.btn4" (click)="foo('val4')"> button 4</button>
app.component.ts
btnState = {
btn1: true,
btn2: false,
btn3: true,
btn4: false,
};
Stackblitz

Why do you want a single variable? If you do, I would use a map for it.
<button class="button" [disabled]="btnState['val1']" (click)="btnClickFunction('val1')"> button 1</button>
<button class="button" [disabled]="btnState['val2']" (click)="btnClickFunction('val2')"> button 2</button>
<button class="button" [disabled]="btnState['val3']" (click)="btnClickFunction('val3')"> button 3</button>
<button class="button" [disabled]="btnState['val4']" (click)="btnClickFunction('val4')"> button 4</button>
and in your clickFunction:
btnClickFunction(val){
if(!this.btnState.hasOwnProperty(val)){
this.btnState[val] = false;
}
this.btnState[val] = !this.btnState[val];
}

Related

How to get value of clicked button in calculator

I have multiple buttons containing different values
<button data-action="digit" class="button" id="1">1</button>
<button data-action="digit" class="button" id="2">2</button>
<button data-action="digit" class="button" id="3">3</button>
And I want to get these buttons to display on my calculator using this in javascript:
function digit_pressed(digit) {
console.log("digit pressed: " + digit);
}
But I am unsure what to add to my function. Any help would be greatly appreciated :)
You can use querySelectorAll for select all button then use addEventListener for add click event and last step use textContent for number of digit and call function.
document.querySelectorAll('button').forEach(el =>{
el.addEventListener('click', () =>{
digit_pressed(el.textContent);
});
});
function digit_pressed(digit) {
console.log("digit pressed: " + digit);
}
<button data-action="digit" class="button" id="1">1</button>
<button data-action="digit" class="button" id="2">2</button>
<button data-action="digit" class="button" id="3">3</button>
Reference:
querySelectorAll
addEventListener
textContent

A single js function to create 9 different alerts on buttons

I am creating a button in a div so when we click it show us detailed information of the person given in API. But now I am confused about how to do this like I have 9 divs and every div has its own button, I am using onClick() on button it works well for the single button but to show information of 9 people if I use 9 different onClick() function it will create redundancy in code so how a single function can handle all this?
HTML
<button type="button" class="button" onclick="show" name="button">Details</button>
You can leverage event bubbling and addEventListener API to do that with only one event listener and only one handler.
const root = document.getElementById('root');
const handler = (e) => {
// target IS THE CLICKED BUTTON.
const {target} = e;
if (target.tagName === 'BUTTON') {
alert(`${target.name} has been pressed.`);
}
};
root.addEventListener('click', handler);
<div id='root'>
<div>
<button type="button" class="button" name="Button 1">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 2">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 3">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 4">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 5">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 6">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 7">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 8">Details</button>
</div>
<div>
<button type="button" class="button" name="Button 9">Details</button>
</div>
</div>
You could try something like this. Don't forget to defer execution when importing into your html file:
const alert = (e) => {
window.alert(e.target.innerHTML);
}
const buttons = document.getElementsByClassName("button");
for (const btn of buttons) {
btn.addEventListener("click", alert);
}
You can use querySelectorAll(). That means you select all of
the buttons. What you must pass in the braces is a CSS selector like
this: const button = document.querySelectorAll('button').
After that you must use forEach(). That is a callback function and that will apply the command/event on every single button. e.g. what you're gonna do if x button gets clicked.
Using querySelectorAll & forEach together is the most recommended for these use cases.
const button = document.querySelectorAll('.button');
button.forEach(e => {
// e here means every single button, doesn't matter which one
e.addEventListener('click', () => {
document.querySelector('h1').textContent += 1;
}
)}
)
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<button type="button" class="button" name="button">Details</button>
<h1>Result here: </h1>
if every div have its on button so you can find its id on button click
<button type="button" id="btn1" class="button" onclick="show(this)" name="button">Details</button>
here is javascript function
function show(btn){
const id = btn.getAttribute("id"); // here you will get "btn1"
if(id == "btn1"){
}
}

How could I avoid WYSIWYG buttons to follow the link

I am trying to build an editor. Once I click an any button ( bold, or italic,...) it follows the link. Here is what I have tried out.
function execCmd(command) {
document.execCommand(command, false, null);
}
function execCommandWithArg(command, arg) {
document.execCommand(command, false, arg);
}
<form>
<div id="text_section">
<button onclick="execCmd('bold');"><i class="fas fa-bold"></i></button>
<button onclick="execCmd('italic');"><i class="fas fa-italic"></i></button>
<button onclick="execCommandWithArg('createLink', prompt('Enter a RUL','http://'));"><i class="fas fa-link"></i></button>
<button onclick="execCmd('unlink');"><i class="fas fa-unlink"></i></button>
<div class="p-2" contenteditable="true" id="content_text" style="border:solid; width:200px; heigth:100px;"></div>
</div>
<div class="form-group">
<input type="button" name="submit" value="Post text" id="submit" class="btn py-3 px-4 btn-primary">
</div>
</form>
How could I use e.preventDefault(); function on it ?
This code lines seem to work as expected, but the problem is not solved in my programm.
I think e.preventDefault(); might solve the problem.
Thank you for taking the time to answer my question.
Your callback needs to return false.
Try
<button onclick="execCmd('bold'); return false;">
Or
<button onclick="return execCmd('bold');">
function execCmd(command)
{
document.execCommand(command, false, null);
return false;
}
When button element is inside a form element it acts as submit unless it's type attribute say different (etc: reset, button).
So a quick fix will be to set type="button to your editing buttons:
<button type="button" onclick="execCmd('bold');">
<i class="fas fa-bold"></i>
</button>
Enjoy code!

Issue with JS/jQuery function calling from different buttons

So I'm not sure if I'm doing something wrong, but how come I can't use the 2nd button for each call (based off the button ids)?
I tried to search for running multiple instances of function calls on google, but nothing relevant came up.
I'm planning on using this button a lot on a page I'm building, 10 or so instances.
$(function(){
$('#consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
document.getElementById("consoleLog2").addEventListener("click", function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default" id="consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default" id="consoleLog" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default" id="consoleLog2" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default" id="consoleLog2" type="button" data-href="This is another test, again.">Console Log v2.2</button>
Don't use the same id in multiple elements. Id should be a unique attribute. Use it as a class and implement the event listener for the class.
$(function(){
$('.consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
$('.consoleLog2').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default consoleLog" id="consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default consoleLog" id="consoleLog1" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default consoleLog2" id="consoleLog2" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default consoleLog2" id="consoleLog3" type="button" data-href="This is another test, again.">Console Log v2.2</button>
Try using additional classes instead of ids. Ids are meant to be used for one element.
$(function(){
$('.consoleLog').on('click', function(){
var dataVar = $(this).attr('data-href');
consoleLog(dataVar);
});
});
function consoleLog(dataVar) {
console.log(dataVar);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default consoleLog" type="button" data-href="This is a test.">Console Log</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is a test, again.">Console Log v1.2</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is another test.">Console Log v2</button>
<button class="btn btn-default consoleLog" type="button" data-href="This is another test, again.">Console Log v2.2</button>
I also don't understand why you have two consoleLog functions. Does this suit your needs?
I solved the problem by just changing the function name that we call.

How to cancel form submit for btn-primary within form-actions of Twitter Bootstrap?

<div class="form-actions">
<button class="btn btn-primary" id="btn-next">Next</button>
<button type="reset" class="btn">Reset</button>
</div>
$("#btn-next").click(function(event) {
$('#tab li.active').next().find('a[data-toggle="tab"]').click();
});
When Next is pressed, form is submitted. How can I cancel it?
demo
Make it an anchor, not a button:
<a class="btn btn-primary" id="btn-next">Next</a>
Just return false from the click handler.
$("#btn-next").click(function(event) {
$('#tab li.active').next().find('a[data-toggle="tab"]').click();
return false;
});
Demo

Categories