Question

为什么我不能设置显示为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无法正常工作，我找不到错误所在，请帮助我

Answer 1

您的代码有一些问题：

innerHtml不是属性，您需要使用innerHTML
您正在尝试在js代码中的元素定位到页面上之前将它们加载（DOM-文档对象模型，尚未准备好）。为了解决这个问题，您可以在页面加载后调用代码。您可以使用window.onload=init来完成此操作，其中init是一个函数，该函数在页面加载后运行。
您在JavaScript中定位了ID demo，但是在HTML中没有ID为demo的元素，ID为dome，所以我假设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>

Answer 2

将您的脚本标签移动到页面底部，紧靠主体关闭标签的下方。

另外，您指的是元素"dome"，但是在html中，您具有元素"demo"，使它们都相同

document.getElementById("demo").innerHTML = "Paragraph changed!";

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>

</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>
    <script>
      var scr1 = 0;
      var scr2 = 0;
      document.getElementById("dome").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>
</body>

</html>

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

2 个答案: