0

So I want whatever color (red, blue, or green) the person types in to become the border color that shows up around the document.write statements in the thirdPrompt.

I know I can do this in the Body without a function, but I was wondering if there is any way to get it to work after the thirdPrompt happens. Thanks!

<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>
Brad Larson
  • 168,330
  • 45
  • 388
  • 563
user1781453
  • 25
  • 3
  • 1
    Your question is somewhat unclear. In response to what do you want the color to be changed? – Asad Saeeduddin Oct 28 '12 at 20:54
  • Put the whole lot in one big div. Give the div an id. then apply the border to the div(by id) at the end of the 3rd prompt code. – case1352 Oct 28 '12 at 20:56
  • The style of your code example is very poor. For example, your style tag is closing after your head tag. – surjikal Oct 28 '12 at 21:03
  • Nick is right, `` is invalid inside a style tag. Not even removing it and quoting the class makes the original code work though, I'm investigating it still. – Fabrício Matté Oct 28 '12 at 21:07
  • Please don't wipe your question once you have an answer. We're trying to build a resource that will help many other visitors in the future. – Brad Larson Oct 30 '12 at 03:05

1 Answers1

0

Replace this:

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

With this:

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

Where solid is the border-style and 2px the border-width. Adapt to your needs.

Fiddle

Edit:

Found the problem with the original code, your function is set to run in the onload event (after the page has fully loaded) and you're executing a document.write which overwrites the whole document (including the CSS) when executed after the page is loaded. More info on that here.

If you remove the function from the body's onload event and simply call it during the page load it'll work as expected:

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

Fiddle

Community
  • 1
  • 1
Fabrício Matté
  • 65,581
  • 23
  • 120
  • 159