Fatal编程技术网

JavaScript onclick返回

javascript html

JavaScript onclick返回,javascript,html,onclick,return,onsubmit,Javascript,Html,Onclick,Return,Onsubmit,我对JavaScript还不熟悉，而且我还在想办法 我已经在网上搜索过了，但是我不确定我应该用什么关键词。我正在使用html和JS创建一些随机数的程序 因此，在我的javascript中（标记内） 我有点像： var x; function initRandom() { // I run this function at loading time (i.e: <body onload="initRandom();">) x = Math.random(); } functio

我对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"
}

varx；
函数initRandom（）{//我在加载时运行此函数（即：）
x=数学随机（）；
}
函数checkGuessedNumber（）{//这只是检查用户猜测的数字是否==到x，如果正确，则在div中显示“正确”，否则显示“不正确”
}
所以我遇到的主要问题是

  • html元素在提交后重置。例如，文本字段变为空白，我在div中显示的内容变为空白。它只显示一小段时间，然后被重置
  • 在那之后，生成的数字变成了一个不同的数字，我想每次单击submit时html页面都会再次加载。我不希望这种情况发生
我所困惑的是onClick（）属性的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
放在
上，或者在这之前有一个
返回值

首先，不要使用内联js（html中的js函数，如onclick）。阅读其中一些结果：

为了完整起见，我将解释它是如何工作的：

这将禁用按钮的
submit
特性


<input type="submit" onclick="return false;">


稍后我将更新此内容，解释最佳实践，而不是使用内联js

“按钮”的最佳元素是
，因此我建议这样做


<button id="my-btn">Click Me!</button>


如果将事件侦听器分配给具有默认行为的元素，则可以防止以下默认行为：


//the "event" object is automatically passed to the event handler
function foo(event) {
  event.preventDefault();
  //do what you want here
}



如果您不打算接收数据并将其存储到数据库或将其传输到电子邮件，请不要使用onsubmit。我只会在表单外使用一个常规按钮，甚至是一个div。顺便说一下，函数checkGuessedNumber不会返回任何内容，只会在div中打印一些内容，指示您是否猜到了随机数。谢谢@AlienArrays的提示。所以，我应该只使用button onclick=“checkGuessedNumbers（）；”还是button onclick=“return checkGuessedNumbers（）；”我只会在那里不做提交。。。然后创建一个input type=button，当用户点击该按钮时，do onclick=“checkguessdnumber（）是的，我明白了，但是当我使用yup时，有什么区别呢？我理解内联js是一种不好的做法，但对于一个简短的程序，我认为这就足够了。你说的“禁用提交性质”是什么意思“？@krato单击该按钮时，该按钮希望提交表单，这将导致页面刷新。如果
onclick
返回false，则不会返回。如果我只执行单击我，会有什么区别！与使用mybtn.addEventListener（'click'，foo）@krato相比，在行为上没有区别。不同之处在于，内联js在其他情况下是一个邪恶的烂摊子，有着意外的行为，它违反了关注点分离的原则，等等。请参阅我的更新答案。我欣赏您分享的最佳实践，但我更关心的是，当我执行onclick=“return foo（）”与onclick=“foo（）”时的区别。一旦我完成了我的小步骤，我会确保它能提供最佳实践。

<button id="my-btn">Click Me!</button>



//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
}