javascript - 尝试从控制台中的文本字段输入内容时，页面只是空白

我正在尝试编写一个简单的程序。我用textfeild编写文本，单击Submit，它显示在控制台中。听起来很简单，对吧？我也这样认为。不幸的是，当我单击提交时，页面只是空白。没有错误，只是空白。为什么会这样呢？即使将“提交”按钮更改为常规的通用按钮也不起作用。

这是我的代码：

function write(){
  var graffiti = document.getElementById("graffiti").value;
  console.log(graffiti);
}

<!DOCTYPE html>
<html>
  <head>
    <script src="graffiti.js"></script>
  </head>
  <body>
    <input type="text" id="graffiti"><br>
    <input type="submit" value="submit" onclick="write()">
  </body>
</html>

这是怎么回事？

最佳答案

尝试以下方式

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
      <input type="text" id="graffiti" /><br />
      <input id="myBtn" type="submit" value="submit" />

    <script>
        function write() {
          var graffiti = document.getElementById("graffiti").value;
          console.log(graffiti);
        }

        document.getElementById("myBtn").addEventListener("click", write);
      </script>
  </body>
</html>

因为此示例不起作用的理论example

它不能按我们在onclick上传递的函数的名称工作。
我认为这与document.write的glocal定义冲突。

将write（）重命名为myFunction（）。

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
        <input type="text" id="graffiti"><br>
        <input id="dasd" type="submit" value="submit" onclick="myFunction()">

    <script>
        function myFunction($event){
            var graffiti = document.getElementById("graffiti").value;
            console.log(graffiti);
        }
    </script>
  </body>
</html>

我留下一个有趣的链接

document.write
Event.preventDefault()

关于javascript - 尝试从控制台中的文本字段输入内容时，页面只是空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53422883/