Onclick event not being applied to every button on page - javascript

I have a for each loop in my HTML code which will display multiple buttons on the page. I have used JavaScript so that whenever a button gets clicked the text color and background should change. However, this seems to only get applied to the first button and not any which come after.
HTML:
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
JavaScript:
function status() {
if(event.target == document.getElementById("btn")) {
document.getElementById("btn").value = "Copied to clipboard";
document.getElementById("btn").disabled = true;
document.getElementById("btn").style.color = 'white';
document.getElementById("btn").style.background = 'gray';
}
}
I am fairly new with JavaScript so I am not sure if there is something I am missing in the JavaScript portion of the code or if it's the loop that is causing this to not work. I need to use a loop since I am also displaying other information which requires a loop.

Your main issue seems to be that you are using the same id on multiple elements. I suggest that you remove these ids.
Instead, I think you would benefit by using the this keyword. You can use this by passing it into your status function in the onclick event listener:
onclick="status(this)"
Now, the passed in variable clickedBtn is referencing the button which you clicked, and so you can change its properties accordingly.
Take a look at the snippet below to get a better understanding:
function status(clickedBtn) {
clickedBtn.value = "Copied to clipboard";
clickedBtn.disabled = true;
clickedBtn.style.color = 'white';
clickedBtn.style.background = 'gray';
}
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(this)">
<br />
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(this)">
<br />
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(this)">

I prefer you to use the addEventListener in javascript for security reasons. and also you are iterating the button so you need to use class for it not id coz id is unique, it will return you an error in background. so i edit your code. and this works for me.
HTML
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
<input class="big-button" type="button" value="Apply this promotion" id="btn">
Javascript
(function() {
const buttons = document.getElementsByClassName("big-button")
Array.prototype.forEach.call(buttons, function(element) {
element.addEventListener("click", function() {
this.value = "Copied to clipboard"
this.disabled = true
this.style.color = "white"
this.style.background = "gray"
})
})
})()

function status() {
event.target.value = "Copied to clipboard";
event.target.disabled = true;
event.target.style.color = 'white';
event.target.style.background = 'gray';
}
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
<input class="big-button" type="button" value="Apply this promotion" id="btn" onclick="status(event)">
The status function always checks for the same button ID: "btn". Hence it alters the style of the same button element. Modify your function to the below:
function status() {
event.target.value = "Copied to clipboard";
event.target.disabled = true;
event.target.style.color = 'white';
event.target.style.background = 'gray';
}
Now, try with the same HTML. The above function alters the style of the clicked element only.

Related

Count every button click and display it on input type number

I have a function where my button adds a table row every time you click it.
My target is, how can I display the value of my button click in my input type="number"? The value of my input type should be starting at "1", and every time when the button is clicked, increment by 1. Thank you in advance.
HTML:
<button type="button" id="clickCount" onClick="clickMe" value="click me"></button>
<input type="number" id="showMe" value="1"> // the value of my button clicks should be displayed here
Use this:
document.getElementById("clickCount").addEventListener("click", function() {
document.getElementById("showMe").value++;
})
<input type="number" id="showMe" value="1">
<button type="button" id="clickCount">Click Me</button>
<form>
<input type="text" id="clickCount" value="0"/>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
function incrementValue()
{
var value = parseInt(document.getElementById('clickCount').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('clickCount').value = value;
}
You can increase the current value of the element on each click. I will also suggest you to avoid inline event handler.
Demo:
document.getElementById('clickCount').addEventListener('click', function(){
document.getElementById('showMe').value++;
});
//similarly you can decrease
document.getElementById('decrease').addEventListener('click', function(){
document.getElementById('showMe').value--;
});
<button type="button" id="clickCount" value="click me">+</button>
<input type="number" id="showMe" value="1">
<button type="button" id="decrease" value="click me">-</button>
Use this :
Click Me
const addNumber = document.getElementById("clickCount");
const showNum = document.getElementById("showMe");
addNumber.onclick = () => {
showNum.value++;
};

Changing value of textarea using onclick function

I am new to Javascript. I can not change value of textarea when I press Goodbye button. But When I click hello it is working fine! Can you help to change the value of textarea when it is pressed the second time.
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
</script>
Your goodbye and hello input fields has the same id - that when call your myFunction the text variable will always be the value of your first input.
You have to use different ids for each input the you can handle click events separately for each button.
function handleHelloClick() {
var text = document.getElementById("text-hello").value;
setTextarea(text);
}
function handleGoodbyeClick() {
var text = document.getElementById("text-goodbye").value;
setTextarea(text);
}
function setTextarea(text) {
document.getElementById("myTextarea").value = text;
}
Comment:<br />
<textarea id="myTextarea"></textarea><br />
<input id="text-hello" type="text" value="Hello" name="text" /><br />
<button type="button" onclick="handleHelloClick()">hello</button><br />
<input id="text-goodbye" type="text" value="Goodbye" name="text" /><br />
<button type="button" onclick="handleGoodbyeClick()">Gooodbye</button>
You cannot have two elements with the same ID. This is why it does not work.
You will want something like this;
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction2()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
function myFunction2() {
var text =document.getElementById("text2").value;
document.getElementById("myTextarea").value=text;
}
</script>
You should have different id's for different inputs.
It's a bad practice to have same ID for all the elements.
<textarea id="myTextarea">
</textarea><br>
<input id="hello-input" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('hello-input')">hello</button><br>
<input id="bye-input" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('bye-input')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text =document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
You can start from learning JavaScript: https://javascript.info/
Two inputs with the same id is not a correct HTML, ids should be uniques on a page.
Try this:
<textarea id="myTextarea">
</textarea><br>
<input id="text1" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('text1')">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('text2')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text = document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
In JavaScript when you assign the same ID to two different elements and then try to fetch an element using document.getElementById() it will fetch only the first element that matches the ID name.
So, you can probably assign a different ID to the goodbye element. Also, you can have different functions to handle two different button clicks.
Please check out the example below.
console.log(document.getElementById("text"));
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello" type="text" value="Hello" name="text"><br>
<button type="button" onclick="hello()">hello</button><br>
<input id="goodbye" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="goodbye()">Gooodbye</button>
<script>
function hello() {
var text =document.getElementById("hello").value;
document.getElementById("myTextarea").value=text;
}
function goodbye() {
var text =document.getElementById("goodbye").value;
document.getElementById("myTextarea").value=text;
}
</script>
It's never a good idea to use an id twice. If you call document.getElementById("some-id") the browser will return the first element it finds. So the browser will never return the goodbye button.
function myHelloFunction() {
var text =document.getElementById("hello-button").value;
document.getElementById("myTextarea").value=text;
};
function myGoodbyeFunction() {
var text =document.getElementById("goodbye-button").value;
document.getElementById("myTextarea").value=text;
}
<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello-button" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myHelloFunction()">hello</button><br>
<input id="goodbye-button" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myGoodbyeFunction()">Gooodbye</button>

Why Checkbox is not unchecking in jquery

I need to uncheck a checkbox. It is doing everything like alert or removing div, but not unchecking the checkbox. I have used both attr and prop methods. The checkbox id is ok. Even it doesn't show any error in firebug console.
$('html').on('click', '#inScopeDiv .remButton', function () {
var currId = $(this).attr('id');
var chkBoxId = "#chk"+currId;
alert(currId);
alert('#chk'+currId);
$(chkBoxId).prop("checked", false);
$(chkBoxId).attr("checked", false);
$('#div'+ currId).remove();
$('#inScopeActionDiv' + currId).remove();
});
HTML provided ::
<c:forEach items="${data.inScope}" var="inScopeValues">
<div class="col-md-12" style="background-color: snow;">
<input class="inScope" type="checkbox" id="chk${inScopeValues.key}" name="chk + ${inScopeValues.key}" value="${inScopeValues.value}">
${inScopeValues.value}
</div>
</c:forEach>
Button & Checkbox is below ::>
<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2">
<button id="chkisc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
The button you show in the updated question has id="chkisc_1", then in your function you take that and add #chk to the beginning of it which would mean you're looking for an element with the selector "#chkchkisc_1". Meanwhile, apparently the checkbox has id="chkisc_2", although it does seem to be created in a loop so perhaps there is also a _1 (though that would mean you have more than one element with the same id, which is invalid html).
Change the button to have id="isc_1", then when your JS adds #chk it will be looking for #chkisc_1:
$('html').on('click', '#inScopeDiv .remButton', function () {
var currId = $(this).attr('id');
var chkBoxId = "#chk"+currId;
$(chkBoxId).prop("checked", false);
$('#div'+ currId).remove();
$('#inScopeActionDiv' + currId).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="inScopeDiv">
<input class="inScope" type="checkbox" id="chkisc_1" name="chkisc_1" value="In Scope 1" checked>
<button id="isc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2" checked>
<button id="isc_2" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
</div>
You should use prop() and removeAttr() to achieve this.. Hope it helps!
var cb = $("#checkbox")
$('#button1').click(function() {
cb.prop("checked", true)
})
$('#button2').click(function() {
cb.removeAttr('checked')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox" />This is a checkbox
<br />
<br />
<button id="button1">Check checkbox</button>
<br />
<br />
<button id="button2">Uncheck checkbox</button>
let checkbox = document.querySelector("input");
checkbox.addEventListener("click",function(){
console.log("Sorry ( ͡° ͜ʖ ͡°)");
this.checked = false;
});
<input type="checkbox" />

Autofill Textbox using buttons

I have a php application that I'm working on. Here's what I'm trying to do:
I have a search box (textbox) and several buttons. On clicking each button, I want it to fill the search box with a predefined string. Clicking another button will erase what's in the search box and replace its value with its pre-defined string. And a button to clear the textbox as well.
Example:
Button 1
on click -> textbox value = button1
Button 2
on click -> textbox value = button2 (old value is replaced)
Can anyone guide me with the JS code that does this? Thanks!
Apply 'button' class to every button and unique id for each button.
$(".button").click(function(){
var id = this.id;
$('#searchTextId').val($('#'+id).attr('value'));
});
$(document).ready(function(){
$(document).on('click','.click_me',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.text_search').val(search_val);
});
$(document).on('click','.clear_me',function(e){
$('.text_search').val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="click_me" data-value="text 1" value="button 1"/>
<input type="button" class="click_me" data-value="text 2" value="button 2"/>
<input type="button" class="click_me" data-value="text 3" value="button 3"/>
<input type="button" class="click_me" data-value="text 4" value="button 4"/>
<input type="button" class="clear_me" value="Clear"/>
<input type="text" class="text_search" />
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
<input type="button" name="btn1" id="btn1" value="Hello" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="World" onclick="setText(this)">
<input type="button" name="btn1" id="btn1" value="StackOverflow" onclick="setText(this)">
<input type="text" name="textBox" id="textBox" value=""/>
Tested here: http://jsfiddle.net/o5fp0uq1/

Enabling or Disabling Buttons Based on CheckBox

I had an I Agree Checkbox that when checked or unchecked it used JS to toggle the Disabled setting on a button with id="submit1". However, I added more buttons and now it needs to toggle all of these buttons rather than just the first, so the ID isn't working anymore.
Current Code for checkbox:
<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="javascript: if(document.getElementById('agree').checked==true){document.getElementByID('submit1').disabled=false;}else{document.getElementByID('submit1').disabled=true;}">
And for button:
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
So, I have added more buttons, so I need 2 things:
I need JS or jquery that will loop through and toggle EACH button when the box is checked rather that just the single button (first button with the ID).
On page load, I also need it to check and see if the box is checked and if not, loop through and disable all of those buttons.
Thanks so much for any help you can give!!
Craig
HTML:
<input type="checkbox" checked id="agree" name="agree" value="ON">
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
<button onclick="do_file_form_submit(7);" id="submit2" name="submit2" class="custombutton">Button Number 2</button>
jQuery:
$('#agree').change(function () {
if ($(this).is(":checked")) {
$('button').attr("disabled", false);
} else {
$('button').attr("disabled", true);
}
});
Here is the fiddle: http://jsfiddle.net/shahe_masoyan/UpxzB/3/
Check this out Your working page
function checkStatus() {
if ($('#agree_again').is(":checked")) {
$(".custombutton").attr('disabled', false);
}
else {
$(".custombutton").attr('disabled', true);
}
}
$("#agree_again").change(function () {
checkStatus();
});
You can call this checkStatus function on body load to check whether its checked or not on page load .
asign same classname for all button.
then use the class name for selector.
document.getElementByClassName("custombutton").disabled=false
Try this code. Hope this resolve your problem
$(function(){
//$("#agree").is(":checked")
EnableDisableButton(!$("#agree").is(":checked"))
$("#agree").click(function(){
EnableDisableButton(!$("#agree").is(":checked"));
})
function EnableDisableButton(isEnable){
$(".custombutton").attr("disabled",isEnable);
}
});
very simple
<input type="checkbox" checked="checked" id="agree" name="agree" value="ON"
class="agree_chk" />
<input type="button" class="button" id="button1" value="button1"/>
<input type="button" class="button" id="button1" value="button2"/>
<input type="button" class="button" id="button1" value="button3"/>
<input type="button" class="button" id="button1" value="button4"/>
and the javascript is
$(document).on('click','#agree',function() {
$('.button').attr({disabled:!$(this).is(':checked')})
});
js fiddle http://jsfiddle.net/5V2Y4/
try this code
<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="change()">
<input type="button" id="button1">
<input type="button" id="button2">
<input type="button" id="button3">
<script>
$(document).ready(function() {
change();
});
function change() {
var i = 1;
for (i = 1; i <= 3; i++) {
var btnid = "button" + i;
if (document.getElementById("agree").checked) {
document.getElementById(btnid).disabled = false;
} else {
document.getElementById(btnid).disabled = true;
}
}
}
</script>
you can change the limit as the number of buttons changes

Categories

Resources