Question

所以基本上就像我试图使用按钮使文本显示一样，但是我做了所有事情，我尝试几次更改id，例如myFunction（）或myButton（），但是没有任何作用。我相信id与此无关，repl.it是愚蠢的。如果可以，请帮助我，好吧

我曾尝试使用之前说过的不同ID，我尝试放置; s和no; s，甚至尝试询问超级社区，但没有人回答。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>sunny's website</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
      .button {
        color:white;
        background-color:green;
        padding:10px 10px;
        cursor: pointer;
      }
      .button:hover {
        background-color: black;
      }
      .button:active {
        cursor: help;
      }
    </style>
  </head>
  <body>
    <script src="script.js"></script>
    <h1>welcome<h1>
    <button onclick="dingwun()" class="button">click me!</button>
    <h2>click the thing to reveal!:</h2>
    <p id="vari"></p>
    <script>
        function dingwun() {
          var x = document:getElementById("vari");
          x.innerHTML = "coolio";
        }
      </script>
  </body>
</html>

Answer 1

您有错字：

document:getElementById("vari");

应该是：

document.getElementById("vari");

注意：

当字符串不包含任何HTML时不要使用.innerHTML，因为.innerHTML具有性能和安全性。而是使用.textContent。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>sunny's website</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
      .button {
        color:white;
        background-color:green;
        padding:10px 10px;
        cursor: pointer;
      }
      .button:hover {
        background-color: black;
      }
      .button:active {
        cursor: help;
      }
    </style>
  </head>
  <body>
    <script src="script.js"></script>
    <h1>welcome<h1>
    <button onclick="dingwun()" class="button">click me!</button>
    <h2>click the thing to reveal!:</h2>
    <p id="vari"></p>
    <script>
        function dingwun() {
          var x = document.getElementById("vari");
          x.textContent = "coolio";
        }
     </script>
  </body>
</html>

Answer 2

命令document:getElementById("vari")中有一个错字，在分号处应该是句号。 document.getElementById("vari")

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>sunny's website</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
      .button {
        color:white;
        background-color:green;
        padding:10px 10px;
        cursor: pointer;
      }
      .button:hover {
        background-color: black;
      }
      .button:active {
        cursor: help;
      }
    </style>
  </head>
  <body>
    <script src="script.js"></script>
    <h1>welcome<h1>
    <button onclick="dingwun()" class="button">click me!</button>
    <h2>click the thing to reveal!:</h2>
    <p id="vari"></p>
    <script>
        function dingwun() {
          var x = document.getElementById("vari");
          x.innerHTML = "coolio";
        }
      </script>
  </body>
</html>

Answer 3

您实际上在:中使用了document:getElementById("vari")，您必须像.一样使用document.getElementById("vari")。谢谢

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>sunny's website</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
      .button {
        color:white;
        background-color:green;
        padding:10px 10px;
        cursor: pointer;
      }
      .button:hover {
        background-color: black;
      }
      .button:active {
        cursor: help;
      }
    </style>
  </head>
  <body>
    <script src="script.js"></script>
    <h1>welcome<h1>
    <button onclick="dingwun()" class="button">click me!</button>
    <h2>click the thing to reveal!:</h2>
    <p id="vari"></p>
    <script>
        function dingwun() {
          var x = document.getElementById("vari");
          x.innerHTML = "coolio";
        }
      </script>
  </body>
</html>

ReferenceError：未定义dingwun

3 个答案: