按钮元素没有响应

Button element not responding

本文关键字：响应 元素 按钮      更新时间：2023-09-26

简单的问题，由于某种原因，这段代码不起作用，它并不复杂，但每当我试图在浏览器中运行它时，它都没有响应。我有什么东西不见了吗。

<!DOCTYPE html>
<html>
<head>
<style>
body {margin: 0; border: 0; padding: 0; background-color: #F3F781;}
#container {height: 100px; padding: 0; border: 0; margin: 0;}
#box1 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #F5DA81; display: inline-block;}
#box2 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #58FA58; display: inline-block;}
#box3 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #58FAD0; display: inline-block;}
#box4 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #F5A9F2; display: inline-block;}
</style>
<script>
function write(){
     console.log("hello");
}   
</script>
</head>
<body>
<div id="container">
    <div id="box1"><p id="info">text</p>
    </div>
    <div id="box2"><p>text</p>
    </div>
    <div id="box3"><p>text</p>
        </div>
    <div id="box4"><p>text</p>
    </div>
</div>
<br>
<div>
<button onclick="write()">write</button>
</div>
</body>
</html>

我可能有点自信，但由于某种原因，按钮脚本不起作用。我看不出有什么毛病。我有什么东西不见了吗。

谢谢你的帮助，我知道我的低质量问题。我真的很纠结。

将函数名更改为"write（）"以外的名称，因为这已经是一个现有的javascript方法。

您不能将write()用作函数名，因为它可能会调用document.write()——这就是当前发生的情况——当您单击按钮时，所有内容都会消失，因为您的document.write()什么都没做！

将其更改为其他内容，如test()

body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #F3F781;
}
#container {
  height: 100px;
  padding: 0;
  border: 0;
  margin: 0;
}
#box1 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #F5DA81;
  display: inline-block;
}
#box2 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #58FA58;
  display: inline-block;
}
#box3 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #58FAD0;
  display: inline-block;
}
#box4 {
  width: 100px;
  height: 100px;
  padding: 0px;
  border: 0px;
  border-radius: 10px;
  margin: 0px;
  outline: 0px;
  background-color: #F5A9F2;
  display: inline-block;
}
<script>
  function test() {
    //console.log("hello");
    alert('hello');
  }
</script>
<div id="container">
  <div id="box1">
    <p id="info">text</p>
  </div>
  <div id="box2">
    <p>text</p>
  </div>
  <div id="box3">
    <p>text</p>
  </div>
  <div id="box4">
    <p>text</p>
  </div>
</div>
<br>
<div>
  <button onclick="test()">write</button>
</div>

ᔕᖺᘎᕊ是对的。

但您也应该考虑删除onclick属性，只是为了最佳实践。以这种方式使用的代码在全局范围内运行，并且还运行在eval()中，这可能是一个安全问题。

考虑将其范围界定为输入或按钮的id:

JS：

document.getElementById('btn').onclick = function() {
    console.log('working');
}

HTML：

<div>
    <input id="btn" value="write" type="submit"/>
</div>

http://jsfiddle.net/milesrobinson/e9myj0kw/

相关文章：