gpt4 book ai didi

javascript - HTML onfocus,onclick 事件不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 17:47:21 25 4
gpt4 key购买 nike

我遇到了一个看似常见但神秘的问题,至少对我来说是这样。可以找到该页面的草稿 here .所需的行为如下:

通过 <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);
}
}

onfocusonclick事件不起作用。 但是,调用resetanimate单独与 <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这些输入框的事件。

最佳答案

问题是:

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

pBarpercent 的使用/声明破坏了脚本。 我不知道为什么。将脚本修改为:

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 .

关于javascript - HTML onfocus,onclick 事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27925292/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com