Question

所以我希望这个人输入的任何颜色（红色，蓝色或绿色）成为第三个提示中的document.write语句周围显示的边框颜色。

我知道我可以在没有函数的Body中执行此操作，但我想知道在第三个提示发生后是否有任何方法可以使它工作。谢谢！

<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>

Answer 1

替换它：

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

有了这个：

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

其中solid是border-style，2px是border-width。适应您的需求。

Fiddle

编辑：

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

如果您从正文的onload事件中删除该功能，只需在页面加载期间调用它，它就会按预期工作：

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

Fiddle

需要帮助在函数中创建document.write语句边框（Javascript）

1 个答案:

编辑：