how to change the style of the bottoms with javascript?
Question
I do not know why the style of the bottoms are not changing. I tried to save the value and use it to change the color of the bottoms but its not changing. No syntax errors have appeared in the console, so i guess I am okay in that aspect.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>testing</title>
</head>
<body id="body">
<form>
<input type="bottom" class="btn" id="Cgreen" value="click here for green" onclick="changeColor()">
<input type="bottom" class="btn" id="Cblue" value="click here for blue" onclick="changeColor()">
</form>
<script>
var colorg = document.getElementById("Cgreen").value;
var colorb = document.getElementById("Cblue").value;
function changeColor() {
console.log (colorb + colorg);
if (colorb === "click here for blue") {
document.getElementById("Cblue").style = "blue";
} else if ( colorg === "click here for green") {
document.getElementById("Cgreen").style = "green";
}
}
</script>
</body>
</html>
4 answers
solution1
1 2017-05-27 01:23:41
Multiple issues here.
-
type="bottom"is not valid . Perhaps you mean typetype="button"?
You cannot set an element's
styleto a color directly.You must be more specific. Do you mean background color? Text color? Border color?
If you're looking to change the color of the background, consider something like this:
document.getElementById("Cblue").style.backgroundColor = "blue";
Your
iflogic doesn't make sense.It's saying "If the value of the blue button was "click here for blue" when the page loaded, then the function should change it to blue. " This will always be true, so no matter what you click or what you do, this is the only event that will occur.
Rather than using conditional logic, just pass the color you want into the function as an argument/parameter. Additionally, if you didn't want to change the element clicked, but instead change a different element, you could pass that as a parameter as well.
Basic example:
function changeColor(elem, color) { elem.style.backgroundColor = color; }
<input type="button" onclick="changeColor(this, 'blue');" value="Click for blue"> <input type="button" onclick="changeColor(this, 'green');" value="Click for green">
solution2
0 2017-05-27 01:10:36
style is what "holds the css", if you want to modify a property (let's say color ) then do {your stuff here to get the DOM element ...}.style.color = "blue"
Plus, you never reach the else if block because of it being equivalent to : if( !(colorb === "click here for blue") && (colorg === "click here for green") ) . As colorb is always equal to "click here for blue" you'll never enter the block. To fix this, simply end the first if statement and let the else if become a simple if statement :
if(conditionA){}else if(conditionB){} will become if(conditionA){} if(conditionB){}
solution3
0
Problem is style here is not the target css property:
document.getElementById("Cgreen").style = "green";
With plain JS: for background use
document.getElementById("Cgreen").style.backgroundColor = "green";
With jQuery: for background use
$("#Cgreen").css("background","green");
I do not know why the style of the bottoms are not changing.
On click, your code does not figures out, which html element was clicked.
function changeColor(button) { button.style.backgroundColor = button.id.substr(1); /* here substr(1) will produce Cgreen = green, Cblue = blue */ }
<input type="button" class="btn" id="Cgreen" value="click here for green" onclick="changeColor(this)" /> <input type="button" class="btn" id="Cblue" value="click here for blue" onclick="changeColor(this)" />
Try this code snippet:
solution4
0 2017-05-27 03:17:39
$('.btn').click(function(e){ changeColor($(this)); }); function changeColor(element){ var colorbutton = element.val(); if (colorbutton === "click here for blue") { $('body').css('backgroundColor','blue'); }else if (colorbutton === "click here for green"){ $('body').css('backgroundColor','green'); } }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <meta charset="utf-8"> <link rel="stylesheet" href="main.css"> <title>testing</title> </head> <body id="body"> <form> <input type="button" class="btn" id="Cgreen" value="click here for green"> <input type="button" class="btn" id="Cblue" value="click here for blue"> </form> </body> </html> javascript
I don't know will this result be suitable with your purpose ? Hope it solved your problem. I saw you use jquery library, so I rewrite by jquery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.