点击各种按钮时如何改变各种div的innerHTML？答案

【问题标题】：How to change the innerHTML of various divs when clicking on various buttons?点击各种按钮时如何改变各种div的innerHTML？
【发布时间】：2020-07-25 14:52:59
【问题描述】：

在我的网页中，我有各种按钮（在 .addbutton 类中）。单击其中的第一个时，会出现一个带有下拉列表的<div>，用户可以从中选择两个选项（#p1，`#p2）中的任何一个，这取决于单击的按钮。

当单击每个选项时，我希望它出现在与单击的初始 .addbutton 对应的 <div> 中。（例如，如果单击第一个 .addbutton (#bradd) 我希望在第一个 div 中选择选项 (#bdiv)）我设法做到这一点，以便它们始终出现在 #bdiv 中，无论如何@ 987654331@ 被点击了，但我不知道如何让每个出现在相应的中。 JS设置2个选项的innerHTML

    document.getElementById("bradd").onclick = function() {
      document.getElementById("p1").innerHTML = "Cereal"
      document.getElementById("p2").innerHTML = "Juice"
    }

    document.getElementById("mmadd").onclick = function() {
      document.getElementById("p1").innerHTML = "2x small fruit"
      document.getElementById("p2").innerHTML = "Big fruit"
    }

JS改变第一个div的innerHTML（#bdiv）

      document.getElementById("p1").onclick = function() {
        var newItem = document.createElement("div")
        newItem.innerHTML = document.getElementById("p1").innerHTML document.getElementById("bdiv").appendChild(newItem)
      }
      document.getElementById("p2").onclick = function() {
        var newItem = document.createElement("div")
        newItem.innerHTML = document.getElementById("p2").innerHTML
        document.getElementById("bdiv").appendChild(newItem)
      }

我的 HTML：


    <h1>Meal Plan Customizer</h1>
    <div id="list">
      <input type="checkbox">
      <p>Breakfast:</p>
      <button class="addbutton" id="bradd">+</button>
      <div id="bdiv"></div>
      <br>
      <input type="checkbox">
      <p>Mid-Morning:</p>
      <button class="addbutton" id="mmadd">+</button>
      <div id="mdiv"></div>
      <br>
      <input type="checkbox">

          <div id="dropdownList">
            <p id="p1">Option1</p><br><br>
            <p id="p2">Option2</p><br><br>
          </div>

        </div>
      </div>

【问题讨论】：

留下如此混乱的一百行代码来解释你的问题真的很重要吗？请保持简洁明了，因为这里经常重复并在此推荐stackoverflow.com/help/minimal-reproducible-example
您的示例中也存在语法错误。正如@MisterJojo 所说，请创建一个 minimal reproducible 示例，其中包含重现问题所需的最少代码（包括相关的 CSS）。这样我们就能更清楚地看到问题，并可能提供帮助。
KISS 提问的时候按照这个方法

标签： javascript html button onclick innerhtml

【解决方案1】：

您的代码应该可以工作。请检查： https://jsfiddle.net/oliverdev/3wsfgov1/

如果您的代码不起作用，那是因为在加载 HTML 之前加载了 Javascript 代码。您可以像这样修改 Javascript 代码：

window.onload = function(e){ 
  document.getElementById("bradd").onclick = function() {
    document.getElementById("p1").innerHTML = "Cereal"
    document.getElementById("p2").innerHTML = "Juice"
  }

  document.getElementById("mmadd").onclick = function() {
    document.getElementById("p1").innerHTML = "2x small fruit"
    document.getElementById("p2").innerHTML = "Big fruit"
  }
}

它会为你工作

【讨论】：

【解决方案2】：

您使这变得比必要的复杂和重复得多。

通过将数据存储在结构化对象中并为内容元素使用类，您可以为所有这些创建通用事件侦听器

以下内容并不完整，但会让您了解如何处理此类问题

var data = {
  bradd: {
    p1: "Cereal",
    p2: "Juice"
  },
  mmadd: {
    p1: "2x small fruit",
    p2: "Big fruit"
  }
}

var selectedButton = null;


var opts = document.querySelectorAll('#dropdownList p');

for (let p of opts) {
  p.addEventListener('click', updateContent)
}
// generic event handler for all the options
function updateContent() {
  const content = selectedButton.closest('.item').querySelector('.content')
  content.innerHTML = this.innerHTML
  togglePopup()
}

document.querySelector('#xbutton').addEventListener('click', togglePopup)


// generic event handler for all buttons
function addButtonClicked() {
  selectedButton = this;// store selected for use when option selected
  var wantedData = data[selectedButton.id];
  for (let p of opts) {
    p.innerHTML = wantedData[p.id]
  }
  togglePopup();
}
for (let btn of document.getElementsByClassName("addbutton")) {
  btn.addEventListener("click", addButtonClicked)
}

function togglePopup() {
  var popStyle = document.getElementById("addPopUp").style;
  popStyle.display = popStyle.display === "block" ? 'none' : 'block'
}

#addPopUp {
  display: none
}

<h1>Meal Plan Customizer</h1>
<div id="list">
  <div class="item">
    <p>Breakfast:</p>
    <button class="addbutton" id="bradd">+</button>
    <div class="content"></div>
  </div>
  <div class="item">
    <p>Mid-Morning:</p>
    <button class="addbutton" id="mmadd">+</button>
    <div class="content"></div>
  </div>
</div>

<div id="addPopUp">
  <h3 id="h3">Select what you would like to add:</h3>
  <span id="xbutton"><strong>&times;</strong></span>

  <div class="dropdown">
    <div id="dropdownList">
      <p id="p1">Option1</p>
      <p id="p2">Option2</p>
      <!-- <p id="p3">Option3</p><br><br>
      <p id="p4">Option4</p>-->
    </div>
  </div>
</div>

【讨论】：