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返回

回答

相關問題