0

したがって、人が入力する色（赤、青、または緑）を、thirdPromptのdocument.writeステートメントの周囲に表示される境界線の色にしたいと思います。

関数なしでBodyでこれを実行できることは知っていますが、thirdPromptが発生した後にそれを機能させる方法があるかどうか疑問に思いました。ありがとう！

<style type = "text/css">

    div.red {border-style:solid;border-width:1em; border-color:red; padding:1em;}

    div.blue {border-style:solid;border-width:1em; border-color:blue; padding:1em;}

    div.green {border-style:solid;border-width:1em; border-color:green; padding:1em;}

    div.black {border-style:solid;border-width:1em; border-color:black; padding:1em;}

</head>
</style>

<script language="javascript" type="text/javascript">

        function firstPrompt()
        {
        document.bgColor=('gray')
        var background
            {
                borderColor = window.prompt ("Please enter the border color you want: red, green, or blue.");

                if (borderColor == "red" || borderColor == "green" || borderColor == "blue")
                    {
                    enterWord = window.prompt ("Enter a word in the text field, all alphabetic characters.");
                    secondPrompt();
                    }
                else
                {
                    window.alert ("You didn't enter a valid color (red, green, blue), border color will be black!");
                    borderColor = ('black');
                    enterWord = window.prompt ("Enter a word in the text field, all alphabetic characters.");
                    secondPrompt();
                }
            }
        }



        function secondPrompt()
        {
        if (/[^0-9A-Z" "]/.test(enterWord))
            {
            enterLetter = window.prompt ("Enter a letter in the text field below.")
            findVowels();
            }
        else
        {
            window.alert ("Sorry you entered an invalid word (" + enterWord + ") please re-enter!");
            enterWord = window.prompt ("Enter a word in the text field, all alphabetic characters.");
            secondPrompt();
        }
        }



        function findVowels()
            {
                totalVowels = 0;

                for (i = 0; i < enterWord.length; i++)
                    {
                    if (enterWord.charAt(i).match(/[a-z]/) !=null)
                    {
                    if (enterWord.charAt(i).match (/[aeiou]/))
                        {

                            totalVowels++;
                        }
                    }
                    }
                thirdPrompt();
                return totalVowels;
            }



    function thirdPrompt()
        {
            if (/[^0-9A-Z" "]/.test(enterLetter) && (enterLetter.length < 2))
            {
                document.write("<div class = "+borderColor+">");

                document.write ("<h2>Word Checker</h2>");
                document.write ("<h2>" + Date() + "</h2>");
                document.write ("<br />" + "The word you entered was "+ "<strong>" + enterWord + "</strong>" + ". <br/>");
                document.write ("It contains " + enterWord.length + " character(s)." + "<br/>");
                document.write ("It contains " + totalVowels + " vowel(s)." + "<br />");
                document.write ("String '" + enterWord + "' contains the letter '" + enterLetter + "' at position ");
                document.write('</div>');

                document.bgColor = ("gray");


            }

            else
            {
                window.alert ("You entered an invalid character (" + enterLetter + ") please re-enter");
                secondPrompt();
            }

        }

</script>

<body onload = "firstPrompt();">

    <h2>
        Word Checker
    </h2>

    </body>
    </html>
4

1 に答える 1

0

これを置き換えます：

document.write("<div class = "+borderColor+">");

これとともに：

document.write("<div style='border:solid 2px "+borderColor+"; padding:1em;'>");

とはどこsolidにありborder-styleますか。あなたのニーズに適応します。2pxborder-width

フィドル

編集：

元のコードに問題が見つかりました。関数はonloadイベントで実行されるように設定され（ページが完全に読み込まdocument.writeれた後）、ページが読み込まれた後に実行されるとドキュメント全体（CSSを含む）を上書きするを実行しています。詳細については、こちらをご覧ください。

onload本文のイベントから関数を削除し、ページの読み込み中に関数を呼び出すだけで、期待どおりに機能します。

<body>
    <h2>
        Word Checker
    </h2>
    <script>
        firstPrompt();
    </script>
</body>

フィドル

于 2012-10-28T20:56:11.423 に答える