0

因此，我希望人们输入的任何颜色（红色、蓝色或绿色）成为显示在第三个提示中的 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-style2pxborder-width

小提琴

编辑：

发现原始代码的问题，您的函数设置为在onload事件中运行（在页面完全加载后），并且您正在执行一个document.write在页面加载后执行时覆盖整个文档（包括 CSS）的函数。更多信息在这里。

如果您从主体onload事件中删除该函数并在页面加载期间简单地调用它，它将按预期工作：

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

小提琴

于 2012-10-28T20:56:11.423 回答