Question

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

<!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>

我可能有点dence，但由于某种原因，按钮脚本不会工作。我根本看不出任何问题。我有什么遗失的东西。

感谢您的帮助，我也知道我的低质量问题。我真的很坚持这个。

Answer 1

将您的功能名称更改为＆＃34; write（）＆＃34;以外的其他名称。因为那已经是现有的javascript方法。

Answer 2

您不能将write()用作功能名称，因为这可能会调用document.write() - 这就是当前发生的事情 - 当您点击按钮时，一切都会消失，因为您已经document.write()什么都没有！

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

ᔕᖺᘎᕊ是对的。

但你也应该考虑删除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/

按钮元素没有响应

3 个答案: