javascriptvalidationxhtml-transitional

document.write XHTML 1.0 Transitional validation error

I am required to display simple use of confirm() and prompt() functions using XHTML 1.0 Transitional as part of my assignment task. all code needs to be validated.

When I attempt to validate the code I receive the following error:

Line 12, Column 24: document type does not allow element "p" here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>java script demonstration</title>
    </head>
    <body>
        <script type="text/javascript">
                    var response=confirm("This box was created using Javascript - Click on OK to continue")
            if (response)
                {document.write("<p>You have just clicked on OK</p>")}
            else 
                {document.write("You have just clicked on Cancel")}     
                    var reply=prompt("Please enter your Name")
            document.write("your name is " + reply +"")
        </script>   
    </body>
</html>

Is it possible to incorporate the p element into the code whilst still passing the validator?

Solution

  • Because you're using XHTML, you'll need to wrap your JavaScript in CDATA:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>java script demonstration</title>
    </head>
    <body>
        <script type="text/javascript">
            //<![CDATA[
            var response=confirm("This box was created using Javascript - Click on OK to continue")
            if (response)
                {document.write("<p>You have just clicked on OK</p>")}
            else 
                {document.write("You have just clicked on Cancel")}     
                    var reply=prompt("Please enter your Name")
            document.write("your name is " + reply +"")
            //]]>
        </script>   
    </body>
</html>

    This is just a way of telling the compiler that what is contained within the CDATA tags is data, not markup. This is necessary if you plan on doing any inline JS.