Question

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

Answer 1

以下是此帖中所有内容的 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
}

JavaScript onclick返回

1 个答案: