1

初心者の質問です。私は現在 JS を学んでおり、単純な html フォームからテキスト入力を取得する関数を作成しようとしています。テキスト入力を関数に渡す方法がわかりません。これは私が現在試していることです：

<html>
    <body>
        <script type = "text/javascript">
        <!--

        var myColor = document.getElementById("textbox").value;


        function findColor(){
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
        }

        //-->
        </script>

        <form>
        Colour <input type="text" name="inputform" id="textbox" value="">
        <input type="submit" value="Submit" onclick="findColor();">
        </form>
    </body>
</html>

ありがとう、助けていただければ幸いです。

4

4 に答える 4

4

この行を入れてください：

 var myColor = document.getElementById("textbox").value;

関数内findColor:

function findColor(){
    var myColor = document.getElementById("textbox").value;
    switch(myColor){ //...
于 2013-08-14T12:32:35.527 に答える
1

私はデビッドの答えに賛成です。フォームを使用しており、以下のコードに示すように、関数にイベント パラメータを渡すことで、以下のようなデフォルトの送信イベントを防止する必要があります。

function findColor(e){ // e is a event parameter passed
        e.preventDefault();
        var myColor = document.getElementById("textbox").value;
        switch(myColor){
            case "Blue":
                document.write("just like the sky!");
            break

            case "Red":
                document.write("Just like wine!");
            break
            default:
                document.write("Suit yourself then...");

            }
            return false;
}

そしてhtmlでは、

<input type="submit" value="Submit" onclick="findColor(event);">

ご覧のとおり findColor(event)、htmlでこのようなイベントを渡しています

そして提案：

ここについて読んで、document.write ここでデモを見てください。

document.createElement などのネイティブ DOM 代替がより適切な場合の document.write の使用。document.write は何年にもわたってひどく悪用されており、ページが読み込まれた後に実行されると、現在のページを実際に上書きする可能性がありますが、document.createElement はそうではありません。実際の動作例については、こちらを参照してください。これは、document.createElement などのより DOM に適したメソッドを選択するもう 1 つの理由です。

于 2013-08-14T12:37:37.607 に答える
0

ブラウザがHTMLページを読み取ると、javascriptセクションが解釈され、findColor関数が定義され、次の行が実行されます

var myColor = document.getElementById("textbox").value;

したがって、myColor はテキストボックス要素の初期値を受け取ります。ページが完全にロードされ、テキスト ボックスに値を入力するまでに、myColor の割り当ては既に完了しています。送信をクリックした後、つまり findColor 関数が呼び出されたときに割り当てが適切なタイミングで行われるようにするには、上記の 2 つのオプションがあります。 findColor 関数

この例には 2 つ目の欠陥があります。フォームの送信により、HTML ページのリロードがトリガーされます。したがって、findColor 関数の結果は表示されません。Javascript を操作するより良い方法は、関数をボタンに結び付けることです。以下の改訂版 html を参照してください。

w3school JavaScript チュートリアルhttp://www.w3schools.com/js/を見たことがあると思います。http://www.netmagazine.com/tutorials/javascript-debugging-beginnersをご覧ください。

<html>
    <body>
        <script type = "text/javascript">
        function findColor(myColor){
        output = document.getElementById('output'); 
        switch(myColor){
            case "Blue":
                output.innerHTML = "Just like the sky"; 
                break
            case "Red":
                output.innerHTML = "Just like the wine"; 
                break
            default:
                output.innerHTML ="Suit yourself then...";
            }
        }
        </script>

        <form>
        Colour <input type="text" name="inputform" id="textbox" value="">
        </form> 

        <button type="button" onclick="findColor(document.getElementById('textbox').value);"> FindColor </button>
        </form>

        <div id="output"> what I think of this color </div>
    </body>
</html>
于 2013-08-14T13:30:06.097 に答える