Question

我从模板中获取了一个非常简单的网页。在右侧，我有一个div中的链接列表，当点击它们时，我想要一个位于我的服务器上的html页面加载到内部div区域。点击链接时，没有任何反应。我也尝试将innerHtml设置为文本值，以防src部分无效，但这也没有做任何事情。我错过了什么？这看起来就像我经历过的所有例子一样。注意我只给出部分html，所以我知道身体没有关闭等等。

我有：

<body>
  <script>
    function results()
    {
      document.getElementsByClassName('mid-left-container').innerHTML="src="..\VRS_BVT\VRS_Test.html""
    }
  </script>

  <div id="main-wraper">
    <div id="top-wraper">
      <div id="banner">Automation Server</div>

    </div>
    <div id="mid-wraper">
      <div class="mid-wraper-top">
        <div class="mid-leftouter">
          <div class="mid-left-container">
            blah blah
          </div>
        </div>
        <div class="right-container">
          <div class="right-container-top">
            <h3><span class="yellow-heading">Projects</span></h3>
            <ul>
              <li><a href="#" onclick="results()">VRS BVT</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 1

getElementsByClassName()返回匹配元素的数组（实际上是NodeList）。

您正在该阵列上创建一个新的innerHTML属性，该属性无效。

相反，您需要从数组中获取实际元素并设置其innerHTML：

document.getElementsByClassName(...)[0].innerHTML = ...

此外，您的字符串文字是无效的语法您需要使用单引号或转义双引号。

此外，将src="..\VRS_BVT\VRS_Test.html"放在HTML元素的内容中不会从服务器加载任何内容您需要使用AJAX或<iframe>。

为什么我的onclick脚本没有改变我的innerhtml？

1 个答案: