using javascript to change background color
Question
function schrijvenles1(){
var text = document.getElementById("schrijven-les1").value;
var imageElement = document.getElementById("goed-fout");
//het antwoord is correct
if (text === "Hoe heet je" || text === "hoe heet je" || text === "Hoe heet je?" || text === "hoe heet je?") {
imageElement.src = "goed.png";
imageElement.src = true;
}
// het antwoord is iets anders
else {
imageElement.src = "fout.png";
imageElement.src = false;
}
if(imageElement.src = true) {
document.getElementById("voortgang-button").style.backGroundcolor = '#99c262' ;
}
if(imageElement.src = false) {
document.getElementById("voortgang-button").style.backGroundcolor = "#ff6c60"
}
This is my java text, this seems a bit out of the blue, but I want to change the background color from a button, depending whether the answer is correct or if it's wrong
the css which belongs to "voortgang-button" =
button#controle-luisteren1 {
width:55px;
border: 1px solid black;
background-color: white;
border-radius: 20px;
margin-left:150px;
}
however; now is the question what am I doing wrong? I am a beginning JavaScript programmer, and dutch, so please bear with me ;).
4 answers
solution1
0 2016-12-13 09:07:20
Im not sure what you want but im pretty sure you have a mistake in the comparation, you should use '==' instead of '=' when comparing.
if(imageElement.src == true) {
document.getElementById("voortgang-button").style.backGroundcolor = '#99c262' ;
}
if(imageElement.src == false) {
document.getElementById("voortgang-button").style.backGroundcolor = "#ff6c60"
}
solution2
0 2016-12-13 09:07:22
First you're not closing the schrijvenles1() function. Add an extra } at the end.
Second, you are using backGroundcolor wrong, it should look like this:
document.getElementById("voortgang-button").style.backgroundColor
Also the comparison operator is wrong = should be == or === . You're now just saying it's true or false . You are not actually checking if it is.
if(imageElement.src === true) {
document.getElementById("voortgang-button").style.backgroundColor = '#99c262' ;
}
if(imageElement.src === false) {
document.getElementById("voortgang-button").style.backgroundColor = "#ff6c60"
}
Another thing wrong with you code is value assignment. You first add a string value to the imageElement.src and then immediately replace it with a boolean which doesn't make sense in your case.
And another thing, in your javascript code you have a button with id controle-luisteren1 and in css a button with id controle-luisteren1 which is confusing.
solution3
0 2016-12-13 09:12:48
This following way is not right
imageElement.src = "goed.png";
imageElement.src = true;
Here first you are assigning a value and then again overwriting with a new value. So src will not have the image. Instead of modifying the src attribute use data attribute
Secondly if you want to add the background color using js
yourElement.style.backgroundColor = "red";
Note the casing
Thirdly this is also not right.
if(imageElement.src = true)
Here you are just assigning true or false but there is no condition. It should be like this
if(imageElement.src === true){
//rest of code
}
solution4
0 2016-12-13 09:16:32
<html>
<head>
<script>
function schrijvenles1(){
var text = document.getElementById("schrijven-les1").value;
var imageElement = document.getElementById("goed-fout");
//het antwoord is correct
if (text === "Hoe heet je" || text === "hoe heet je" || text === "Hoe heet je?" || text === "hoe heet je?") {
imageElement.src = "goed.png";
imageElement.src = true;
}
// het antwoord is iets anders
else {
imageElement.src = "fout.png";
imageElement.src = false;
}
if(imageElement.src = true) {
document.getElementById("voortgang-button").style.backgroundColor = '#99c262' ;
}
if(imageElement.src = false) {
document.getElementById("voortgang-button").style.backgroundColor = "#ff6c60"
}
}
</script>
<style>
#controle-luisteren1 {
width:55px;
border: 1px solid black;
background-color: white;
border-radius: 20px;
margin-left:150px;
}
#voortgang-button{width:100;}
</style>
</head>
<body>
<input type="text" id="schrijven-les1" value="">
<img src="" id="goed-fout">
<button id="voortgang-button" >voortgang-button </button>
<button id="test" onclick="schrijvenles1()" value="click"> clcik</button>
</body>
</html>
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.