javascript - 通过切换将文本传递到面板

Question

当我单击面板的链接时，我希望将文本传递到面板主体。我已将 onClick 放置在每个面板标签中，包括标签。 onClick 调用 myFunction，它应该将文本发送到面板的主体。但这并没有发生。有什么建议吗？

function myFunction() {
  document.getElementId("panel-body").innerHTML = "it worked"
};

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1" onClick="myFunction">Name</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body"></div>
    </div>
  </div>
</div>

Answer 1

您必须使用 () 调用该函数:onClick="myFunction()"

您尝试使用的选择器是 .getElementById() ，但在本例中您需要更具体的元素。所以 css 选择器将是 #collapse1 > .panel-body它选择类 panel-body 的元素它们是 #collapse1 的直接子代.

querySelector()选择满足给定 css 选择器 querySelectorAll() 的第一个元素将在类似数组的结构体 NodeList 中返回所有它们.

function myFunction() {
  document.querySelector("#collapse1 > .panel-body").innerHTML = "it worked"
};

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1" onClick="myFunction()">Name</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body"></div>
    </div>
  </div>
</div>