HTML onfocus，onclick事件不起作用

我有什么似乎是一个常见但神秘的问题，至少对我来说。该页面的草稿可以找到here。期望的行为如下：HTML onfocus，onclick事件不起作用

通过<script type="text/javascript" src="amp.js"></script>执行计算并使用<body onload="amp()">调用。 amp.js的详细信息真的很长，所以我不会发布这些。 请假定所有变量都已正确声明并初始化，并且我的所有脚本都已被删除。接下来，零时的进度条和计数器：

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

...当用户集中于改变输入参数进行新的计算：

<input type="number" name="theta0" id="theta0" value="0.1" min="0.0" max="1.6" step="0.1" onfocus="reset()">

...与<script type="text/javascript" src="../reset.js"></script>：

/*jslint browser: true, devel: true */ 
function reset() { 
    "use strict"; 
    document.getElementById('progress').value = 0; 
    document.getElementById('percent').innerHTML = 0; 
}

准备就绪后，用户可以使用<input type="button" value="Evaluate" onclick="go = setInterval(animate, 10); amp()">执行新计算，该计算将为进度条添加动画并显示结果。的<script type="text/javascript" src="../animate.js"></script>细节：

/*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); 
    } 
}

的onfocus和onclick事件不起作用。 但是，请致电reset或animate与<body onload="">单独工作。控制台不会产生任何线索。有用的建议清单可以在here找到。虽然我没有看到连接，但我已经读过，有时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; 
}

任何见解或建议将不胜感激。

更新

有趣的是，可用here这类作品的版本。 reset没有正常工作，特别是对于用户的额外计算。另外，我需要为这些输入框添加一个onchange事件。

来源

2015-01-13 Joel DeWitt

你能发表一个片段吗？我猜想go = setInterval(animate, 10); amp()没有被JS引擎正确解析。 –

我在这里http://codepen.io/anon/pen/emvJpB制作了你的代码的codepen。焦点和悬停状态似乎工作得很好。 –

贾斯汀的codepen不适合我。 amp（）未定义的错误不断增加。我正在使用最新的Chrome。 –

这里的问题：的pBar和percent断脚本

/*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); 
    } 
}

...它工作。欲了解更多信息，请参阅this。

来源

2015-01-28 14:26:56

HTML onfocus，onclick事件不起作用

回答

相关问题