I am new to programming. Every time I run this code, nothing happens. Can you please tell me why this is?
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<script type="text/javascript">
var x = 0
document.write(x)
function button1() {
document.write(x++)
}
function button2(){
document.write(x--)
}
</script>
</body>
The problem is that you put ++ and -- after the variable, meaning that it will increment/decrement the variable after printing it. Try putting it before the variable, like below.
Also, as mentioned, you have some trouble with document.write(). Consider the following documentation from the W3Schools page:
The write() method writes HTML expressions or JavaScript code to a
document.
The write() method is mostly used for testing. If it is used after an
HTML document is fully loaded, it will delete all existing HTML.
Thus, document.write() will remove all your existing content as soon as you click on a button. If you want to write to the document, use an element's .innerHTML like this:
var x = 0;
document.getElementById('output-area').innerHTML = x;
function button1() {
document.getElementById('output-area').innerHTML = ++x;
}
function button2() {
document.getElementById('output-area').innerHTML = --x;
}
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<span id="output-area"></span>
Why don't you change your code a bit? Instead of document.write(x++) and document.write(x--) use document.write(++x) and document.write(--x).
The document.write is the problem. It only works before the browser is done loading the page completely. After that, document.write doesn't work. It just deletes all of the existing page contents.
Your first document.write is executed before you the page has loaded completely. This is why you should see the 0 next to the two buttons.
Then however, the page has loaded. Clicking on a button causes the event handler to be executed, so document.write will be called, which doesn't work at that point, because the page already has loaded completely.
document.write shouldn't be used anymore. There are many modern ways of updating the DOM. In this case, it would create a <span> element and update it's content using textContent.
Moreover, use addEventListener instead of inline event listeners:
var x = 0;
var span = document.querySelector('span'); // find the <span> element in the DOM
var increment = document.getElementById('increment'); // find the element with the ID 'increment'
var decrement = document.getElementById('decrement'); // find the element with the ID 'decrement'
increment.addEventListener('click', function () {
// this function is executed whenever the user clicks the increment button
span.textContent = x++;
});
decrement.addEventListener('click', function () {
// this function is executed whenever the user clicks the decrement button
span.textContent = x--;
});
<button id="increment">increment</button>
<button id="decrement">decrement</button>
<span>0</span>
As others have mentioned, the first x++ won't have a visible effect, because the value of x is incremented after the content of the <span> is updated. But that wasn't not your original problem.
document write will delete full html:
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
As in w3schools
try this instead
<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<div id="value"></div>
<script type="text/javascript">
var x=0
var element = document.getElementById("value");
element.innerHTML = x;
function button1(){
element.innerHTML = ++x;
}
function button2(){
element.innerHTML = --x;
}
</script>
I changed the x-- and x++ to ++x and --x so the changes are immediatly. With this change your code would have worked aswell. showing 1 or -1.
HTML code for UI
<div class="card">
<div class="card-body">
<h5 class="card-title">How many guests can stay?</h5>
<div class="row">
<ul class="guestCounter">
<li data-btn-type="increment"><span class="romoveBtn"><i class="fa fa-plus"></i></span> </li>
<li class="counterText"><input type="text" name="guestCount" id="btnGuestCount" value="1" disabled /> </li>
<li data-btn-type="decrement"><span class="romoveBtn"><i class="fa fa-minus"></i></span></li>
</ul>
</div>
Java Script:
// set event for guest counter
$(".guestCounter li").on("click", function (element) {
var operationType = $(this).attr("data-btn-type");
//console.log(operationType);
var oldValue = $(this).parent().find("input").val();
//console.log(oldValue);
let newVal;
if (operationType == "increment") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$(this).parent().find("input").val(newVal);
});
var x = 1;
document.getElementById('output-area').innerHTML = x;
function button1() {
document.getElementById('output-area').innerHTML = ++x;
}
function button2() {
if(x <= 0 ){
alert(' minimum value 0 // By Khaydarov Marufjon marvell_it academy uzb ')
return false ;
}
document.getElementById('output-area').innerHTML = --x;
}
input{
width: 70px;
background-color: transparent;
padding: 20px;
text-align: center;
}
button{
padding: 20px;
}
<input type='button' value="plus" onclick="button1()" />
<span id="output-area"></span>
<input type='button' value="minus" onclick="button2()" />
This question is very common. I have developed a solution with Bootstrap and pure JavaScript in another very similar thread here.
There is autoincrement input on keeping button pressed down.
Use ontouchstart and ontouchend instead than onmousedown and onmouseup method for mobile. To make it work for both mobile and desktop browser without headache use onpointerdown, onpointerup, onpointerleave
https://stackoverflow.com/a/70957862/13795525
function imposeMinMax(el) {
if (el.value != '') {
if (parseInt(el.value) < parseInt(el.min)) {
el.value = el.min;
}
if (parseInt(el.value) > parseInt(el.max)) {
el.value = el.max;
}
}
}
var index = 0;
var interval;
var timeout;
var stopFlag=false;
function clearAll(){
clearTimeout(timeout);
clearInterval(interval);
}
function modIn(el) {
var inId = el.id;
if (inId.charAt(0) == 'p') {
var targetId = inId.charAt(2);
var maxValue = Number(document.getElementById(targetId).max);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue < maxValue){
stopFlag=false;
document.getElementById(targetId).value++;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index+1 >= maxValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value++;
}
index++;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
if (inId.charAt(0) == 'm') {
var targetId = inId.charAt(2);
var minValue = Number(document.getElementById(targetId).min);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue > minValue){
stopFlag=false;
document.getElementById(targetId).value--;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index-1 <= minValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value--;
}
index--;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button example</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<button type='button' class='btn btn-danger btn-sm ' id='mbA' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='A' onchange='imposeMinMax(this)' value='200' max='350' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbA' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button>
<button type='button' class='btn btn-danger btn-sm signBut' id='mbB' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='B' onchange='imposeMinMax(this)' value='250' max='450' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbB' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button>
<button type='button' class='btn btn-danger btn-sm signBut' id='mbC' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>-</button>
<input type='number' id='C' onchange='imposeMinMax(this)' value='3' max='10' min='1' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbC' onmousedown='modIn(this)' onmouseup='clearAll()' onmouseleave='clearAll()'>+</button>
</body>
</html>
Related
display = document.getElementById('outputDiv');
display.innerHTML = 'Your Number Is: ';
function clear() {
document.getElementById("outputDiv").innerHTML = "";
}
<input type="button" value="Calculate" onclick="calculator()">
<input type="reset" value="Clear" onclick="clear()">
<div id="outputDiv"></div>
On the reset button clicked, I would like to erase display.innerHTML='Your Number Is: ' + total;
Do not use clear as your function name, because due to the inline event listeners' scope, it confuses with the deprecated Document.clear().
Try some other name:
<input type="reset" value="Clear" onclick = "clearValue()">
<div id="outputDiv"></div>
<script>
var display = document.getElementById('outputDiv');
var total = 500;
display.innerHTML='Your Number Is: ' + total;
function clearValue() {
display.innerHTML = "";
}
</script>
More: Is “clear” a reserved word in Javascript?
I am working on this snippet. How can I increment the index continuously when the #adder in clicked and pressed?
var index = 0;
$("#adder").on("click", function(){
++index;
$("#res").html(index);
});
$("#adder").on("keydown", function(){
++index;
$("#res").html(index);
});
$("#adder").on("keypress", function(){
++index;
$("#res").html(index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default" id="adder">+</button>
<div id="res"> </div>
Here is an example by using mousedown and mouseup event handler and use setInterval to do continuously adding index.
Edited
Recovered the click event handler that makes the index increase immediately after clicking.
Edited
Add a limit condition
var index = 0;
var interval;
var timeout;
// $("#adder").on("click", function(){
// increase();
// });
$("#adder").on("mousedown", function(){
increase();
timeout = setTimeout(function(){
interval = setInterval(function(){
increase();
}, 100);
}, 500);
});
$("#adder").on("mouseup", function(){
clearTimeout(timeout);
clearInterval(interval);
});
function increase(){
$("#res").html(++index);
checkLimit();
}
function checkLimit(){
// here to check stop increasment
if(index >= 50 ){
// stop interval
clearInterval(interval);
// remove event handler
$("#adder").off('click').off('mousedown').off('mouseup');
return;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default" id="adder">+</button>
<div id="res"> </div>
I have started from your code to make one working with pure JavaScript and Bootstrap where you can add as many buttons and input fields as you like and get the max, min values from input fields. To sum up I have improved my code with autoincrement input values when button is pressed.
I have further improved the code using onpointerdown, onpointerup, onpointerleave methods instead than onmousedown and onmouseup. In this way it will work on mobile devices as well.
function imposeMinMax(el) {
if (el.value != '') {
if (parseInt(el.value) < parseInt(el.min)) {
el.value = el.min;
}
if (parseInt(el.value) > parseInt(el.max)) {
el.value = el.max;
}
}
}
var index = 0;
var interval;
var timeout;
var stopFlag=false;
function clearAll(){
clearTimeout(timeout);
clearInterval(interval);
}
function modIn(el) {
var inId = el.id;
if (inId.charAt(0) == 'p') {
var targetId = inId.charAt(2);
var maxValue = Number(document.getElementById(targetId).max);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue < maxValue){
stopFlag=false;
document.getElementById(targetId).value++;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index+1 >= maxValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value++;
}
index++;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
if (inId.charAt(0) == 'm') {
var targetId = inId.charAt(2);
var minValue = Number(document.getElementById(targetId).min);
var actValue = Number(document.getElementById(targetId).value);
index = actValue;
if(actValue > minValue){
stopFlag=false;
document.getElementById(targetId).value--;
}else{
stopFlag=true;
}
timeout = setTimeout(function(){
interval = setInterval(function(){
if(index-1 <= minValue){
index=0;
stopFlag=true;
}
if(stopFlag==false){
document.getElementById(targetId).value--;
}
index--;
}, 100);
}, 500);
imposeMinMax(document.getElementById(targetId));
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button example</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<button type='button' class='btn btn-danger btn-sm ' id='mbA' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>-</button>
<input type='number' id='A' onchange='imposeMinMax(this)' value='200' max='350' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbA' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>+</button>
<button type='button' class='btn btn-danger btn-sm signBut' id='mbB' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>-</button>
<input type='number' id='B' onchange='imposeMinMax(this)' value='250' max='450' min='150' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbB' onpointerdown='modIn(this)' onpointerup='clearAll()' onpointerleave='clearAll()'>+</button>
<button type='button' class='btn btn-danger btn-sm signBut' id='mbC' onmousedown='modIn(this)' onmouseup='clearAll()' onpointerleave='clearAll()'>-</button>
<input type='number' id='C' onchange='imposeMinMax(this)' value='3' max='10' min='1' step='1' style='width: 50px;'>
<button type='button' class='btn btn-danger btn-sm ' id='pbC' onmousedown='modIn(this)' onmouseup='clearAll()' onpointerleave='clearAll()'>+</button>
</body>
</html>
I'm trying to create a site settings page with some checkboxes. If the checkbox is 'ON' a HTML element has a certain value, else it would be something else. But for some reason every checkbox keeps returning the value "on" in JavaScript. Please help.
My HTML:
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
My JavaScript:
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').value;
if (valueOfCheckBox == 'on') {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
your check boxes are checked by default. remove checked=checked from check box input
<input type='checkbox' id='theBOX'>
and yes you have to change the Javascript function to check whether check box has been checked or not
you can get the valueOfCheckBox to be true if the check box is checked otherwise it will be false
var valueOfCheckBox = document.getElementById('theBOX').checked;
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').checked;
if (valueOfCheckBox) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
You should remove the 'checked' attribute from your input tag
<input type='checkbox' id='theBOX' >
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').value;
if (valueOfCheckBox == 'on') {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
You have multiple issues :
1 - You forgot the parentheses on the js function call :
<button onclick='theFunction()'>Apply Changes</button>
2 - When you set your js var with the value, or we dont need it. Just put this :
var valueOfCheckBox = document.getElementById('theBOX');
3 - Then to know wether it is check or not, use the js .checked property as following :
if (valueOfCheckBox.checked == true) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
Finally, your code should look like this :
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked='checked'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
<script type="text/javascript">
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');
if (valueOfCheckBox.checked == true) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML += 'OFF';
}
}
</script>
You can use .checked property. This property returns true if the checkbox is checked by default, otherwise it returns false.
If you want by default checked on input box, just add checked attribute in input tag.
<input type="checkbox" id="theBOX" checked>
Hope this may help you.
<head>
<script>
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX').checked;
if (valueOfCheckBox) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML = 'OFF';
}
}
</script>
</head>
<body>
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX'>
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
</body>
</html>
This will work.
function theFunction() {
var valueOfCheckBox = document.getElementById('theBOX');
if (valueOfCheckBox.checked) {
document.getElementById('TXT').innerHTML = 'ON';
} else {
document.getElementById('TXT').innerHTML = 'OFF';
}
}
<p>Click this checkbox</p>
<input type='checkbox' id='theBOX' checked />
<button onclick='theFunction()'>Apply Changes</button>
<!-- Div that has to be toggled -->
<p id='TXT'></p>
I would recommend you to use<label for="checkbox">Click this checkbox</label> instead of <p>Click this checkbox</p>.
I have three buttons. I would like them to change colour when pressed, and back to no colour when pressed again.
I found this code on stackoverflow that allows me to almost do it however, it only works on one button, the other two are not affected.Also, when I pressed one of the other two buttons, the first button changes colour. I tried changing ID's on the buttons, adding another script with different getElementById() ID's but nothing works.
Do I need more than one function to achieve what I want?
The code I am using is below.
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF";
count = 1;
} else {
property.style.backgroundColor = "#E68352";
count = 0;
}
}
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
<input type="button" id="button" value = "A-D" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
</body>
Usually, when you write inline event handler you may take advantage of:
this: current element: When code is called from an in–line on-event handler, its this is set to the DOM element on which the listener is placed:
event: event element object
Therefore, change:
onclick="setColor('button', '#101010')"
with:
onclick="setColor(this, event, '#101010')"
So your code can be rewritten as:
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? 'rgb(' +
parseInt(result[1], 16) + ', ' +
parseInt(result[2], 16) + ', ' +
parseInt(result[3], 16) + ')'
: null;
}
function setColor(btnEle, evt, color) {
if (btnEle.style.backgroundColor == hexToRgb("#E68352")) {
btnEle.style.backgroundColor = "#FFFFFF"
}
else {
btnEle.style.backgroundColor = "#E68352"
}
}
<input type="button" id="button1" value = "A-D" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button2" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button3" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
You should have uniques ID
You can use classList.toggle("yourClass") instead of using a count
var buttons = document.getElementsByClassName("button");
for (let i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
buttons[i].classList.toggle('active');
})
}
.active {
background-color: #E68352 !important;
}
.button {
background-color: #FFFFFF;
}
<input type="button" id="button1" class="button" value="A-D" />
<input type="button" id="button2" class="button" value="E-H" />
<input type="button" id="button3" class="button" value="E-H" />
Set a class on the buttons, and then loop through the buttons and add an event listener to each of them:
EDIT: I see you are using an onclick handler, which I didn't notice at first; so this answer might not be as useful as I thought. You should definitely use different IDs though if you use that approach.
<button class="button" ... >
var buttons = document.getElementsByClassName('button')
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
// Do your button things.
})
}
IDs should be unique inside the document. Like this:
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<-- here ^ here ^ -->
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<-- here ^ here ^ -->
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
<-- here ^ here ^ -->
<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF"
count = 1;
} else {
property.style.backgroundColor = "#E68352"
count = 0;
}
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
</body>
</html>
IDs need to be unique but you do not need them here
Give the buttons a class and use toggle the classList
window.onload=function() {
var buts = document.querySelectorAll(".but");
for (var i=0;i<buts.length;i++) {
buts[i].onclick=function() {
this.classList.toggle("clicked");
}
}
}
.but {background-color:black}
.clicked { background-color:#E68352; }
<input type="button" value="A-D" class="but" />
<input type="button" value="E-F" class="but" />
<input type="button" value="G-H" class="but" />
dont use numbers, use this instead
http://codepen.io/animhotep/pen/qRwjeX?editors=0010
var count = 1;
function setColor(btn, color) {
if (count == 0) {
btn.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
btn.style.backgroundColor = "#E68352"
count = 0;
}
}
Roberto, as Ibrahim correctly pointed out, the problem is that you are using the same ID for all buttons. When javascript executes this code:
var property = document.getElementById(btw);
it will always return the first element with the ID specified. One solution is choosing a different ID for each button and updating the corresponding onclick code. Another solution could be the one below, in which you do not need to specify IDs at all and the function setColor could be used for any element.
<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(element, color) {
if (count == 0) {
el.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
el.style.backgroundColor = "#E68352"
count = 0;
}
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
<input type="button" value = "A-D" style= "color:black" onclick="setColor(this, '#101010')";/>
<input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
<input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
</body>
</html>
Note the use of the this variable as the first argument for setColor. In each of the buttons, the corresponding this will point to the element where it is defined.
Hope it helps.
You just need little bit of modification.
See the working code.
function setColor(btn, color) {
var elem = document.getElementById(btn);
if (elem.hasAttribute("style")) {
if (elem.getAttribute("style").indexOf("background-color:") == -1) {
elem.style.backgroundColor = color;
} else {
elem.style.backgroundColor = "";
}
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#E68352')" ;/>
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#E68352')" ;/>
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#E68352')" ;/>
</body>
</html>
I have tried searching this up many times. I have come close, but have not figured this out yet. What I am trying to do is when the user reaches a certain amount of clicks, a button pops up.
<!DOCTYPE html>
<html>
<head>
<title>++ Increment</title>
</head>
<body>
<h1>Click the Button</h1>
<input type="button" id="countButton" onclick="hi()" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<input type="button" id="countButton" onclick="store()" value="Store"/>
<input type="button" style="visibility:hidden;" value="Button" id="Sir" />
</body>
</html>
Here is the javascript:
var count = 0;
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
}
if (count >= 20) {
document.getElementById("Sir").style.visibility = "visible";
}
I think I need to assign the count variable outside the hi() function, but I don't know how to do that (or if that's possible)
From mobile so excuse my pseudo code
Is you're using jquery, you can store the value in a
$(btn).data('clicks')
Otherwise define a global variable above your hi function.
Then you need to put your logic of if(clicks > 20) inside your hi function
var count = 0;
function store(){
alert(count);
}
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
if (count >= 4) document.getElementById('Sir').style.display = 'inline-block';
}
#Sir{display:none;}
<h1>Click the Button</h1>
<input type="button" id="countButton" onclick="hi()" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<input type="button" id="countButton" onclick="store()" value="Store"/>
<input type="button" value="Button" id="Sir" />
Try this:
<!DOCTYPE html>
<html>
<head>
<title>++ Increment</title>
</head>
<body>
<h1>Click the Button</h1>
<input type="button" id="countButton" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<!-- <input type="button" id="countButton" onclick="store()" value="Store"/> -->
<input type="button" style="visibility:hidden;" value="Button" id="Sir" />
<script>
var count = 0;
var clickbutton = document.getElementById("countButton");
var showbutton = document.getElementById("Sir");
var amountstatus = document.getElementById("amount");
clickbutton.onclick = function(){
if(count < 3){
count++;
amountstatus.innerHTML = count;
}
else{
showbutton.style.visibility = "visible";
}
}
</script>
</body>
</html>
Check I put this <input type="button" id="countButton" onclick="store()" value="Store"/> in comments, that's why you must not have two id with the same name.
Hello can you please give a try to following code below:
var count = 0;
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
if (count >= 20) {
document.getElementById("Sir").style.visibility = "visible";
}
}
Only change i think to move if condition inside hi function. Hope it works
I agree with Zakk. Storing the value in a data attribute would be the best way to do this. Here's how I'd code it.
$(function() {
$( "#countButton" ).on( "click", function() {
var clicks = $( this ).data( "clicks" );
clicks++;
// Display the clicks.
$( "#amount" ).html( clicks );
$( this ).data( "clicks", clicks );
// Check to see if the sir button should be displayed.
if( clicks >= 20 ) {
$( "#Sir" ).css( "visibility", "visible" );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>++ Increment</title>
</head>
<body>
<h1>Click the Button</h1>
<input type="button" id="countButton" data-clicks="0" value="Click Me!"/>
<p class="ClickCount">Clicks: <a id="amount">0</a></p>
<input type="button" id="countButton" onclick="store()" value="Store"/>
<input type="button" style="visibility: hidden;" value="Button" id="Sir" />
</body>
</html>
Your condition is outside the function hi(), so it is checked once when the file loaded, no when hi() is call.
So you may put your condition inside hi().
var count = 0;
function hi() {
count += 1;
document.getElementById("amount").innerHTML = count;
if (count >= 20) {
document.getElementById("Sir").style.visibility = "visible";
}
}