我是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
}

09-11 19:10
查看更多