web-dev-qa-db-ja.com

JavaScript-HTML入力タグを介してJavascript変数を設定するユーザー入力？

私の画面にテキストボックスがあり（私が入力しているようなもの）、それを入力してから送信ボタンをクリックすると、ボックスに入力したものがjavascriptに送信され、javascriptが印刷されます。私のコードこれは機能する部分です。

<html>
<body>
    <input type="text" id="userInput"=>give me input</input>
    <button onclick="test()">Submit</button>
    <script>
        function test()
        {
            var userInput = document.getElementById("userInput").value;
            document.write(userInput);
        }
    </script>
</body>
</html>

いいですね、それでいいのですが、関数の中にいるときにそのテキストボックスとボタンからの入力が必要で、関数を再起動したくないと言えますか？

ありがとう、ジェイク

javascripthtmlhtml5inputuser-input
6
user1836262

スクリプトの実行中は、ページが何もしないようブロックします。これを回避するには、次の2つの方法のいずれかを使用します。

  • var foo = Prompt("Give me input");を使用します。これにより、ユーザーがポップアップボックスに入力する文字列が表示されます（キャンセルする場合はnull）
  • コードを2つの関数に分割します。1つの関数を実行してユーザーインターフェイスを設定し、2番目の関数を、ユーザーがボタンをクリックしたときに実行されるコールバックとして提供します。
11
Dennis

これは悪いスタイルですが、似たようなことをする正当な理由があると思います。

<html>
<body>
    <input type="text" id="userInput">give me input</input>
    <button id="submitter">Submit</button>
    <div id="output"></div>
    <script>
        var didClickIt = false;
        document.getElementById("submitter").addEventListener("click",function(){
            // same as onclick, keeps the JS and HTML separate
            didClickIt = true;
        });

        setInterval(function(){
            // this is the closest you get to an infinite loop in JavaScript
            if( didClickIt ) {
                didClickIt = false;
                // document.write causes silly problems, do this instead (or better yet, use a library like jQuery to do this stuff for you)
                var o=document.getElementById("output"),v=document.getElementById("userInput").value;
                if(o.textContent!==undefined){
                    o.textContent=v;
                }else{
                    o.innerText=v;
                }
            }
        },500);
    </script>
</body>
</html>
4
Dave

これを読んだのは遅いですが、..質問の読み方は、次の2行のコードを変更するだけです。

ユーザー入力を受け入れ、関数が画面に書き戻します。

<input type="text" id="userInput"=> give me input</input>
<button onclick="test()">Submit</button>

<!-- add this line for function to write into -->
<p id="demo"></p>   

<script type="text/javascript">
function test(){
    var userInput = document.getElementById("userInput").value;
    document.getElementById("demo").innerHTML = userInput;
}
</script>
2
new2

入力タグの値をJavaScript変数に送信/追加しようとしましたが、うまくいきました。コードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function changef()
            {
            var ctext=document.getElementById("c").value;

            document.writeln(ctext);
            }

        </script>
    </head>
    <body>
        <input type="text" id="c" onchange="changef"();>

        <button type="button" onclick="changef()">click</button>
    </body> 
</html>
0
Sampat Aheer