javascript onclick change div не работает, пока классы или встроенные стили внутри html

Question

Я использую javascript для изменения содержимого html, просто для примера я сделал что-то вроде ниже:

<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>

это не работает, потому что я использую класс и встроенный стиль в onclick. может кто-нибудь подскажите, пожалуйста, как это исправить. заранее спасибо

Answer 1

Вы должны закомментировать кавычки внутри \"

<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

Проблема здесь: <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%);">. Вы не избежали двойных кавычек. Правильный HTML для кнопки будет следующим:

<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>