7

入力して送信ボタンをクリックすると、入力した内容がすべて 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>

それはいいことですが、既に関数に入っているときにそのテキストボックスとボタンからの入力が必要で、関数を再起動したくないとしましょう。

ありがとう、ジェイク

4

4 に答える 4

11

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

  • を使用var foo = prompt("Give me input");します。これにより、ユーザーがポップアップ ボックスに入力した文字列が得られます (または、ユーザーがnullそれをキャンセルした場合)。
  • コードを 2 つの関数に分割します。1 つの関数を実行してユーザー インターフェイスを設定し、2 つ目の関数を、ユーザーがボタンをクリックしたときに実行されるコールバックとして提供します。
于 2013-03-09T00:27:50.660 に答える
5

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

<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>
于 2013-03-09T00:26:39.957 に答える
3

これを読むのが遅くなりましたが..私があなたの質問を読んだ方法では、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>

于 2014-09-24T19:36:38.823 に答える