我是JavaScript的新手,但仍在寻找解决方案。
我已经在网上搜索了此信息,但是我不确定应该使用哪些关键字。我正在使用html和JS创建一个带有随机数的程序。
因此,在我的javascript中(标记内)
我有类似的东西:
var x;
function initRandom() { // I run this function at loading time (i.e: <body onload="initRandom();">)
x = Math.random();
}
function checkGuessedNumber() { // this just checks if the number guessed by the user is == to x and displays "correct" in a div if it is correct otherwise "incorrect"
}
所以我遇到的主要问题是
提交后,html元素将重置。例如,文本字段变为空白,我在div中显示的内容变为空白。它只显示一小段时间然后重置
在那之后,生成的数字变成了一个不同的数字,我认为每当我单击提交时,html页面就会再次加载。而且我不喜欢这样。
我感到困惑的是onClick()属性上的return语句,它在没有返回的情况下又有什么不同。请参阅以下示例:
CODE1:
<form onsubmit="return checkGuessedNumber();">
<input type="text"> // input for the number
<input type="submit"> // click if already sure of input number above
</form>
CODE2:
<form onsubmit="checkGuessedNumber();"> // notice no return here
<input type="text">
<input type="submit">
</form>
最后,如果我只是将
checkGuessedNumber
放在<input type="submit" onclick="checkGuessedNumber();">
上,或者在此之前加上return
。 最佳答案
这是本文中所有内容的live demo (click)。
首先,不要使用内联js(HTML中的js函数,例如onclick)。阅读其中一些结果:Why is inline js bad?
为了完整起见,我将解释它如何工作:
这将禁用按钮的submit
性质。
<input type="submit" onclick="return false;">
现在,如果要使用函数,则仍然需要产生以上结果,因此:
<input type="submit" onclick="return foo()">
和
foo
必须返回false,因此return foo()
与return false
相同:function foo() {
//do what you need to do;
return false;
}
我将在稍后解释最佳实践的过程中对此进行更新,而不是使用内联js。
“按钮”的最佳元素是
<button>
,所以我建议这样做。<button id="my-btn">Click Me!</button>
我给了它一个ID,以便我们可以在javascript中轻松识别它。还有很多其他方法可以获取元素引用,但这是另一个主题。现在,在javascript中:
//get the element reference
var myBtn = document.getElementById('my-btn');
//this will make the button call function "foo" when it is clicked.
myBtn.addEventListener('click', foo);
function foo(event) {
//do whatever you want
}
如果将事件侦听器分配给具有默认行为的元素,则可以防止出现以下默认行为:
//the "event" object is automatically passed to the event handler
function foo(event) {
event.preventDefault();
//do what you want here
}