JavaScript onclick返回

我是JavaScript新手，我仍然在搞清楚。JavaScript onclick返回

我已经在网上搜索了这个，但是我不太确定我应该使用哪些关键词。我正在用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 on（）属性的返回语句，它是如何不同，没有返回。请参见下面的例子：

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。

来源

2014-01-25 krato

不，如果你使用AREN的onsubmit不打算收到数据并将数据存储到数据库或将数据传输到电子邮件。我只是使用表单外的常规按钮，甚至是div。 – CRABOLO

顺便说一下，函数checkGuessedNumber不返回任何东西，只是在div中打印某些东西，指示您是否猜到了随机数。 – krato

感谢提示@AlienArrays。所以我应该只使用按钮onclick =“checkGuessedNumbers（）;”或按钮onclick =“返回checkGuessedNumbers（）;” – krato

这里是一个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 
}

来源

2014-01-25 03:55:34 m59

是的我明白，内联js是不好的做法，但只是一个简短的程序，我认为这就足够了，你是什么意思的“禁用提交性质”？ – krato

@krato点击后，该按钮想要提交表单，这会导致页面刷新。如果'onclick'返回false，则不会。 – m59

如果我只是做而不是做mybtn.addEventListener（'click'，foo） – krato

JavaScript onclick返回

回答

相关问题