javascript - .innerHTML 不会在 div 内打印任何内容

Question

我是 html 和 javascript 的初学者。我试图在按下按钮时使用 .innerHTML 从 javascript 输出一些文本，但它不会打印任何内容。我通过 id 链接 div(如果可能的话，我想避免循环)。这是代码；

<section class="box special features">
<div class="features-row">
<section>
        <h3 ="h31">&nbsp;</h3>  
        <p id="p1">&nbsp;</p>
        <p id="p2">&nbsp;</p>
</section>
<section id="s2">
    <h3 id="h32">&nbsp;</h3>
    <p id="p3">&nbsp;</p>
    <p id="p4">&nbsp;</p>
</section>
</div>
</section>
<button onclick= "myFunction()" id="button" name="button">ok</button>
<script type="text/javascript">
   function myFunction () {
   h31.innerHTML = ("some text 1");
   p1.innerHTML = ("some text 2");
   p2.innerHTML = ("some text 3");
   h32.innerHTML = ("some text 4");
   p3.innerHTML = ("some text 5");
   p4.innerHTML = ("some text 4");
   }
</script>

谢谢。

Answer 1

<h3 ="h31">&nbsp;</h3>  

您在这里错过了 id 属性的属性名称。

因此，h31.innerHTML = ("some text 1"); 错误并且函数中止。

<section class="box special features">
<div class="features-row">
<section>
        <h3 id="h31">&nbsp;</h3>  
        <p id="p1">&nbsp;</p>
        <p id="p2">&nbsp;</p>
</section>
<section id="s2">
    <h3 id="h32">&nbsp;</h3>
    <p id="p3">&nbsp;</p>
    <p id="p4">&nbsp;</p>
</section>
</div>
</section>
<button onclick= "myFunction()" id="button" name="button">ok</button>
<script type="text/javascript">
   function myFunction () {
   h31.innerHTML = ("some text 1");
   p1.innerHTML = ("some text 2");
   p2.innerHTML = ("some text 3");
   h32.innerHTML = ("some text 4");
   p3.innerHTML = ("some text 5");
   p4.innerHTML = ("some text 4");
   }
</script>

如果您使用validator，则会拾取此信息。 .

请注意，使用 getElementById 被认为是最佳实践。或其他 DOM 方法，而不是依赖于浏览器的不明显行为，将带有 id 的任何元素填充到全局 JS 变量中。