2013-03-22 68 views
0

我對HTML和JavaScript非常陌生,但我想知道是否有任何方法可以使文本框中的數值每次按一次按鈕一次被按下。這需要完成多個文本框,所以我想這可以用一個函數來完成。每次單擊按鈕時,編號都會上移

<html> 
<head> 
function (add) { 
function goes here 
} 
</head> 
<input type="text"> 
<input type="button" value="Add One" onclick="add()"> 
</body> 
</html> 

對不起,如果我的代碼沒有意義,因爲我不知道如何完成這一點。任何幫助非常感謝!

+1

何必要做你的出路是一個屁股,邁克爾?這是一個有效的問題。 – 2013-03-22 15:50:23

+1

他認爲他是一個大個子,因爲他所有的聲望 – Cristiano 2013-03-22 15:51:52

回答

1

試試這個。

<script type="text/javascript"> 
function add() { 
    var num = document.getElementById("mynum").value; 
    if(num == '') num = 0; 
    document.getElementById("mynum").value = parseInt(num ,10) + 1; 
    } 
</script> 
<html> 
<head> 
function (add) { 
function goes here 
} 
</head> 
<div id='txt'></div> 
<form action="" method="post"> 
<input type="text" id='mynum'> 
<input type="button" onclick="add()"> 
</form> 
</body> 
</html> 

希望會幫助你

+0

這工作完美!謝謝!! – 2013-03-22 16:35:24

1

我可以使用jQuery這一點,所以你的HTML應該是這樣的:

<input type="number" id="numbox"> 
<button type="button" id="button"> 

在JavaScript文件中添加事件處理程序:

$("#button").click(addOne); 

這意味着只要與元素按下id「按鈕」,調用addOne函數。因此,從這裏開始編寫addOne函數,該函數接受數字文本框的值,向其中添加一個,然後將文本框的值設置爲新數字。

var addOneToEach = function() { 
    $(":text").each(function(){ 
     var num = $(this).val(); 
     $(this).val(num + 1); 
    }); 
} 
+1

罰款,對不起,我試圖幫助這個傢伙 – Cristiano 2013-03-22 15:39:53

+0

不,這很好,我現在正在嘗試。出於某種原因,人們認爲我的問題是愚蠢的。我剛剛開始人!這可以在一個多個文本框中完成嗎?或者,我是否必須對我想要完成的每個人重複此代碼? – 2013-03-22 15:43:59

+1

是的,而不是使用$(「#numbox」),你可以使用$(「:text」)來獲得所有type =「text」輸入的集合。然後你可以使用.each()來遍歷這個列表,並將相同的函數應用到每個列表中。 – Cristiano 2013-03-22 15:48:41

2

這很簡單,真的。您的代碼需要具備以下要素:

  • 在JavaScript函數,只要按下按鈕
  • 一個檢索的文本框中
  • 的電流值,使新價值的一種方法方式被稱爲回到文本框

要引用頁面中的特定元素,您需要爲其指定一個id。不要忘記在代碼或HTML中給它一個默認值,這樣你就不會從空的文本框開始。例如:

<input type="text" value="0" id="textField"/> 

可以使用,然後可以在javascript文本字段的值如下:

var textField = document.getElementById("textField"); 

JavaScript變量textField現在包含文本字段的引用,我們可以只使用textField.value獲取其內容。您也可以使用相同的value變量回寫內容。您還需要使用parseInt函數將字段中的文本轉換爲數字,以便Javascript不會試圖在其末尾粘貼字符「1」。

在你的頁面的<HEAD>部分,您將添加如下內容:

<script language="Javascript> 
function handleButtonClick() { 
    var textField = document.getElementById("textField"); 
    var currentValue = parseInt(textField.value); 

    // Add one 
    currentValue = currentValue + 1; 

    // Put it back with the new +1'd value 
    textField.value = currentValue; 
} 
</script> 

要在你按下按鈕調用一個函數在Javascript中,你可以使用一個事件處理程序,這標誌着Javascript功能來運行每當瀏覽器發生動作時,都會使用特定的代碼片段。在這種情況下,由於您希望在用戶單擊按鈕時運行代碼,因此您可以使用onClick處理程序。您可以將其設置爲腳本的一部分或HTML代碼。在Javascript中做它最終更強大,但爲了簡單起見,我將在HTML代碼中完成它。

<input type="button" onClick="handleButtonClick()"/> 

就是這樣。當你點擊按鈕時,假設你已經正確連接了它。

有關getElementByIdthis page的某些基本信息,請參閱this page瞭解有關其他事件處理程序可供您使用的某些基本信息。

+0

不錯的答案,但不要忘記'#textField'的默認值和對'parseInt()的調用' – mindandmedia 2013-03-22 15:44:47

+0

感謝您捕捉到@mindandmedia。我很習慣Perl,因此我認爲Javascript會自動將數字字符串解釋爲數字。修復了代碼。 – 2013-03-22 15:53:09

相關問題