Javascript HTML onfocus、onclick事件不起作用

至少对我来说，我有一个看似普通但神秘的问题。可以找到这一页的草稿。所需的行为如下所示：

通过和调用执行计算。amp.js的细节非常长，所以我不会发布这些。请假设所有变量都已正确声明和初始化，并且我的所有脚本都已lint。接下来，将进度条和计数器归零：

<progress id="progress" value="100" max="100"></progress><output class="percent" id="percent">100</output><span class="prozent">%</span>

准备好后，用户可以使用执行新的计算，该计算将设置进度条的动画并显示结果。详情如下：

onfocus和onclick事件不起作用。但是，使用单独调用“重置”或“设置动画”确实有效。控制台不提供任何线索。可以找到有用建议的列表。虽然我看不出两者之间的联系，但我已经读到，有时糟糕的CSS会导致奇怪的问题。这是我的：

input {
  background-color: snow;
  border: 1px solid darkseagreen;
  box-sizing: border-box;
  color: indigo;
  font: 1em "Computer Modern", serif;
  width: 10%;
}
input[type=number] {
  border-left-style: none;
  border-right-style: none;
  padding-left: 5px;
  vertical-align: middle;
}
input[type=number]:focus {
  background-color: white;
  border: 1px solid black;
  border-left-style: none;
  border-right-style: none;
  color: black;
  outline: none;
}
input[disabled] { background-color: lightgray }

……还有

input[type=button] {
  background-color: ghostwhite;
  background-image: linear-gradient(ghostwhite, #E0FFFF);
  border: 3px solid #4CC417;
  border-radius: 7px;
  color: indigo;
  font: 1.1em "Trebuchet MS", sans-serif;
  margin-left: 10px;
  padding: 5px;
}
input[type=button]:hover { border: 3px solid orange }
input[type=button]:focus {
  background-color: aliceblue;
  background-image: linear-gradient(#D6F5F5, ghostwhite);
  border: 3px solid fuchsia;
  color: black;
  outline: none;
}

如有任何见解或建议，将不胜感激

更新

有趣的是，现有的版本很有效。重置未正确执行其工作，尤其是对于用户的其他计算。此外，我需要向这些输入框添加一个onchange事件。

问题在于：

/*jslint browser: true, devel: true */
var go = 0;
var value = 0;
var max = 100;
function animate() {
  "use strict";
  if (value >= max) {
    clearInterval(go);
    return;
  }
  var pBar,
    percent;
  pBar = document.getElementById('progress');
  percent = document.getElementById('percent');
  value += 1;
  pBar.value = value;
  percent.innerHTML = value;
  if (value === max) {
    clearInterval(go);
  }
}

pBar和percent的使用/声明会破坏脚本。我不知道为什么。将脚本修改为：

function animate() {
  if (value >= max) {
    clearInterval(go);
    return;
  }
  value += 1;
  document.getElementById('progress').value = value;
  document.getElementById('percent').innerHTML = value;
  if (value === max) {
    clearInterval(go);
  }
}

---

…而且很有效。有关更多信息，请参阅。

您能发布一个片段吗？我想go=setIntervalanimate，10；JS引擎没有正确解析amp。我在这里为你的代码做了一个代码笔。焦点和悬停状态似乎很好。贾斯汀的密码笔对我不起作用。amp未定义的错误持续出现。我用的是最新的Chrome浏览器。

input[type=button] {
  background-color: ghostwhite;
  background-image: linear-gradient(ghostwhite, #E0FFFF);
  border: 3px solid #4CC417;
  border-radius: 7px;
  color: indigo;
  font: 1.1em "Trebuchet MS", sans-serif;
  margin-left: 10px;
  padding: 5px;
}
input[type=button]:hover { border: 3px solid orange }
input[type=button]:focus {
  background-color: aliceblue;
  background-image: linear-gradient(#D6F5F5, ghostwhite);
  border: 3px solid fuchsia;
  color: black;
  outline: none;
}

/*jslint browser: true, devel: true */
var go = 0;
var value = 0;
var max = 100;
function animate() {
  "use strict";
  if (value >= max) {
    clearInterval(go);
    return;
  }
  var pBar,
    percent;
  pBar = document.getElementById('progress');
  percent = document.getElementById('percent');
  value += 1;
  pBar.value = value;
  percent.innerHTML = value;
  if (value === max) {
    clearInterval(go);
  }
}

function animate() {
  if (value >= max) {
    clearInterval(go);
    return;
  }
  value += 1;
  document.getElementById('progress').value = value;
  document.getElementById('percent').innerHTML = value;
  if (value === max) {
    clearInterval(go);
  }
}