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事件不起作用

回答

相關問題