首页 > 解决方案 > 为什么不能设置null显示的属性innerhtml

问题描述

为什么我不能设置 null 显示的属性 innerhtml?

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script>
            var scr1 = 0;
            var scr2 = 0;
document.getElementById("demo").innerHtml= "Paragraph changed!";

document.getElementById("CS").innerHtml = "Your Score :"



function srt() {
 var a = document.getElementById("none");
     a.style.boxShadow = "none"
     setTimeout(function re(){
         a.style.boxShadow = "-4px -4px grey"
     },200)
}

        </script>
    </head>
    <body>
    <h2 class="scr1" id="dome">Your Score :</h1>
    <h2 class="scr2" id="CS">Com Score :</h2>
    <br />
    <br />
    <center>
    <div class="mid"></div>
    <div class="srt" id="none">
        <h4>Start</h4>
    </div>
    </center>

    </body>
</html>

请帮我处理这段代码

内部 HTML 不起作用我找不到错误的位置,所以请帮助我

标签: javascripthtmlcss

解决方案


您的代码有一些问题:

  1. innerHtml不是属性,而是需要使用innerHTML

  2. 您正在尝试在页面加载之前在 js 代码中定位元素(DOM - 文档对象模型,尚未准备好)。为了克服这个问题,您可以在页面加载时调用您的代码。您可以使用 来执行此操作window.onload=init,其中init是一个函数,该函数在页面加载时运行。

  3. 您在您的 javascript 中定位 iddemo但您的 HTML 中没有带有 id 的元素demo,您有 iddome所以我假设dome应该说demo

解决所有这些问题将解决您的问题。

请参阅下面的工作示例:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script>
    function init() {

      var scr1 = 0;
      var scr2 = 0;
      document.getElementById("demo").innerHTML = "Paragraph changed!";

      document.getElementById("CS").innerHTML = "Your Score :";

      function srt() {
        var a = document.getElementById("none");
        a.style.boxShadow = "none";
        setTimeout(function re() {
          a.style.boxShadow = "-4px -4px grey";
        }, 200);
      }

    }
    
    window.onload = init;
  </script>
</head>

<body>
  <h2 class="scr1" id="demo">Your Score :</h1>
    <h2 class="scr2" id="CS">Com Score :</h2>
    <br />
    <br />
    <center>
      <div class="mid"></div>
      <div class="srt" id="none">
        <h4>Start</h4>
      </div>
    </center>

</body>

</html>


推荐阅读