JavaScript onclick 返回答案

【问题标题】：JavaScript onclick returnJavaScript onclick 返回
【发布时间】：2014-02-16 06:05:42
【问题描述】：

我是 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 语句，以及它在没有 return 的情况下有何不同。请参阅以下示例：

代码1：

<form onsubmit="return checkGuessedNumber();">
 <input type="text">                // input for the number
 <input type="submit">              // click if already sure of input number above
</form>

代码2：

<form onsubmit="checkGuessedNumber();">  // notice no return here
 <input type="text">                
 <input type="submit">              
</form>

最后，如果我将checkGuessedNumber 放在<input type="submit" onclick="checkGuessedNumber();"> 上，或者在此之前有一个return。

【问题讨论】：

如果您不打算接收数据并将其存储到数据库或将其传输到电子邮件，请不要使用 onsubmit。我只会在表单之外使用常规按钮，甚至是 div。
顺便说一句，函数 checkGuessedNumber 不返回任何内容，只是在 div 中打印一些内容，表明您是否猜到了随机数。
感谢@AlienArrays 的提示。所以我应该只使用按钮 onclick="checkGuessedNumbers();"或按钮 onclick="return checkGuessedNumbers();"
我只会在此处执行
no onsubmit ... 然后创建一个输入 type=button ，然后当用户单击该按钮时执行 onclick="checkguessdnumber()
是的，我明白了，但是当我使用

标签： javascript html onclick return onsubmit

【解决方案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
}

【讨论】：

是的，我知道内联 js 是不好的做法，但对于一个简短的程序，我认为就足够了。 “禁用提交性质”是什么意思？
@krato 单击时，该按钮要提交表单，这将导致页面刷新。如果onclick 返回 false，则不会。
如果我只做而不是做 mybtn.addEventListener( ‘点击’, foo)
@krato 行为没有区别。不同的是，内联 js 在其他情况下会出现意外行为，这违反了关注点分离等原则。请参阅我的更新答案。
我很欣赏你分享的最佳实践，但我更关心 onclick="return foo()" 与 onclick="foo()" 的区别。一旦我完成了我的婴儿步骤，我会确保它采取最佳做法。