Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

使用切换将文本传递到面板

1 个答案: