javascript onclick 更改 div 在类或内联 styles 内部时不起作用

Question

i am using javascript to change html content, just for an example I have done something like below:

 <div id="grid"> <div id="title"> <button onclick='document.getElementById("grid").innerHTML = "<p style="color:red">semma <b class="mate">Kite</b></p>"' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);"> <h3> Rice, Grains &amp; Flours</h3> </button> </div> </div>

this is not working because I am using a class and inline style in the onclick. can anyone please tell me how to fix this. thanks in advance

Answer 1

The problem is here: <button onclick='document.getElementById("grid").innerHTML = "<p style="color:red">semma <b class="mate">Kite</b></p>"' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);"> . You did not escape the double quotes. The correct HTML for the button would be this:

<button onclick='document.getElementById("grid").innerHTML = "<p style=\"color:red\">semma <b class=\"mate\">Kite</b></p>"' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);">

 <div id="grid"> <div id="title"> <button onclick='document.getElementById("grid").innerHTML = "<p style=\"color:red\">semma <b class=\"mate\">Kite</b></p>"' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);"> <h3> Rice, Grains &amp; Flours</h3> </button> </div> </div>

Answer 2

You should comment out the quotes inside \"

 <div id="grid"> <div id="title"> <button onclick='document.getElementById("grid").innerHTML = "<p style=\"color:red\">semma <b class=\"mate\">Kite</b></p>"' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);"> <h3> Rice, Grains &amp; Flours</h3> </button> </div> </div>