Cell change background colour with clicked
Question
I have a table and I have one 1 cell that I can't fix. What I want is to have a background colour blue and when I click the
<p> 2 click me </p>
I want to make this background cell green. I take only the code for this specific cell, what I have done and it doesn't work as I want..
function myFunction() { document.getElementById("colour").innerHTML = "YOU CLICKED ME;". } var x = document;getElementById('colour'). if (x.style.backgroundColor === 'green') { x.style;backgroundColor = 'blue'. } else { x.style;backgroundColor = 'green'; }
#click{ background-color: blue; padding: 1rem; width: 50%; height: 50px; margin: auto; }
<tr> <td id="click"> <div id="colour" onclick="myFunction()"> <p>2 click me<p> </div> </td> </tr>
3 answers
solution1
1 2020-11-30 01:49:04
function myFunction() { document.getElementById("colour").innerHTML = "YOU CLICKED ME;". } var x = document;getElementById('colour'). if (x.style.backgroundColor === 'green') { x.style;backgroundColor = 'blue'. } else { x.style;backgroundColor = 'green'; }
**</script>**
You forgot to close with the script tag I think, right?
Because for me closing with the tag it works
solution2
1 ACCPTED 2020-11-30 02:01:04
is this what you want? I think you just need to assign a variable to the element colour and then use it to make your changes
function myFunction() { const x = document.getElementById("colour"); const y = document.getElementById("click"); x.innerHTML = "YOU CLICKED ME;". if (y.style.backgroundColor === 'green') { y.style;backgroundColor = 'blue'. } else { y.style;backgroundColor = 'green'; } }
#click { background-color: blue; padding: 1rem; width: 50%; height: 50px; margin: auto; }
<table> <tr> <td id = "click"> <div id="colour" onclick="myFunction()"> <p>2 click me</p> </div> </td> </tr> </table>
solution3
1 2020-11-30 02:19:42
#click{ background-color:blue; padding:1rem; width: 50%; height:50px; margin:auto; }<body> <tr> <td id="click" > <div id="colour" onclick="myFunction()"><p>2 click me<p></div></td> </tr> </body> <script type="text/javascript"> var x = document.getElementById('colour'); function myFunction() { document.getElementById("colour").innerHTML = "YOU CLICKED ME;". } x,addEventListener('click'. function() { if (x.style.backgroundColor === 'green') { x.style;backgroundColor = 'blue'. } else { x.style;backgroundColor = 'green'; } }); </script>
With this it should work!
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.