0

私は HTML と JavaScript に非常に慣れていませんが、ボタンを押すたびにテキストボックスの数値を 1 ずつ上げる方法があるかどうか知りたいと思っていました。これは複数のテキストボックスに対して行う必要があるため、これは関数で作成できると考えていました。

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

これを達成する方法がわからないため、コードが意味をなさない場合は申し訳ありません。どんな助けでも大歓迎です！

4

3 に答える 3

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()"/>

以上です。ボタンをクリックすると、すべて正しく配線されていると仮定します。

についての基本的な情報についてはこのページを参照してください。他のどのイベント ハンドラーを使用できるかについての基本的な情報についてはgetElementById、このページを参照してください。

于 2013-03-22T15:41:19.473 に答える
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>

希望はあなたを助ける

于 2013-03-22T15:44:59.710 に答える
1

これにはjqueryを使用するので、htmlは次のようになります。

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

JavaScript ファイルにイベント ハンドラーを追加します。

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

これは、ID「ボタン」を持つ要素が押されるたびに、addOne 関数が呼び出されることを意味します。したがって、ここから addOne 関数を記述します。この関数は、数値テキスト ボックスの値を取得し、それに 1 を加算してから、テキスト ボックスの値を新しい数値に設定します。

var addOneToEach = function() {
    $(":text").each(function(){
        var num = $(this).val();
        $(this).val(num + 1);
    });
}
于 2013-03-22T15:38:16.007 に答える