Question

This is what I have but I seem to be hitting a wall. I have tried and re-tried different formulas but cant seen to get it. What I am trying to do is have the user answer the questions then when they hit 'confirm' all the data entered is relayed back to them as an 'alert'. help. This is what I have:

--------------EDIT-------------

<head>
    <title>a4_part3</title>

    <script type="text/javascript">
    //<![CDATA[
        function storytime()
        { 
            //displays alert
            alert("Welcome to an Interactive Story Spot.");
        }

        function confirm()
        {   
            var spaceship = document.getElementsByName("transport")[0].value;
            var ducatti = document.getElementsByName("transport")[1].value;
            var ferrari = document.getElementsByName("transport")[2].value;
            var jet = document.getElementsByName("transport")[3].value;
            var train = document.getElementsByName("transport")[4].value;
            var transport = "";

            var name = document.getElementsByName("name")[0].value
            var title = document.getElementsByName("title")[0].value
            var noun = document.getElementsByName("noun")[0].value
            var num1 = document.getElementsByName("num1")[0].value
            var num2 = document.getElementsByName("num2")[0].value

            var miles = document.getElementsByName("measuretravel")[0].value
            var km=document.getElementsByName("measuretravel")[1].value;
            var travelmeasure = document.getElementsByName("measureravel").value


            //determine which mode of transportation was chosen
            if (document.getElementsByName("transport")[0].checked)
            {
                transport = spaceship;
            }
            else if (document.getElementsByName("transport")[1].checked)
            {
                transport = ducatti;
            }
            else if (document.getElementsByName("transport")[2].checked)
            {
                transport = ferrari;
            }
            else if (document.getElementsByName("transport")[3].checked)
            {
                transport = jet;
            }
            else if (document.getElementsByName("transport")[4].checked)
            {
                transport = train;
            }


            //determine which measure of travel was chosen
            if (document.getElementsByName("measuretravel")[0].checked)
            {
                miles = "+num1+" + "+num2+" * 1.60934
                measuretravel = miles;
            }
            else if (document.getElementsByName("measuretravel")[1].checked)
            {
                km = "+num1+" + "+num2+"
                measuretravel = km;
            }

            //display alert
            alert ("Hello, "+name+", your story values are "+title+", "+noun+", "+transport+", "num1", "num2", and "+measuretravel+" ");

        }

    //]]>
    </script>

</head>

<body>
    <form id="storyform" action="">
        <h1>Create Your Own Story</h1>


        <p style="font-weight:bold;"> Your Name
        <input type="text" name="name" id="name" value="Jane Doe">  
        </p>            

        <p style="font-weight:bold;"> Story Title
        <input type="text" name="title" id="title" value="Enter Story Title Here">  
        </p>

        <p style="font-weight:bold;">Choose A Mode Of TRANSPORTATION</p>

            <input type="radio" name="transport" id="transport" value="spaceship" checked="checked"> Spaceship
            <br>
            <input type="radio" name="transport" id="transort1" value="ducati"> Ducati
            <br>
            <input type="radio" name="transport" id="transport2" value="ferrari"> Ferrari
            <br>
            <input type="radio" name="transport" id="transport3" value="jet"> Jet
            <br>
            <input type="radio" name="transport" id="transport4" value="train"> Train

            <br>
            <br>

            Enter a NOUN <input type="text" name="noun" id="noun" value="Paris" onclick=""/>
                <br>
            Enter a NUMBER <input type="text" name="Num1" id="num1" value="1" checked="checked" onclick=""/> 
                <br>
            Enter Another NUMBER <input type="text" name="Num2" id="num2" value="2" onclick=""/> 

            <p style="font-weight:bold;">Choose a means of MEASURING TRAVEL</p>

            <input type="radio" name="measuretravel" id="measuretravel1" value="miles"> Miles
            <br>
            <input type="radio" name="measuretravel" id="measuretravel2" value="km" checked="checked"> Kilometers


                <br>
                <br>
                <br>

            <input type="reset" value="Clear Form">

            <input type="button" value="Story Time!" onclick="storytime();">

            <input type="button" value="Confirm" onclick= "confirm();">


    </form>


</body>

Was it helpful?

Solution

There are two JS issues in this code. The first:

alert ("Hello, "+name+", your story values are "+title+", "+noun+", "+tansport+", "+num1+", "+num2+", and "+measuretravel+" ");

Should be

alert ("Hello, "+name+", your story values are "+title+", "+noun+", "+transport+", "+num1+", "+num2+", and "+measuretravel+" ");

The second is your body onload="runJS(), where runJS is not a defined function, but perhaps that's code that you didn't paste into the ticket.

Anyway fixing that first issues causes the popup to show.

Be sure to look in your development console for any javascript errors if you have code that doesn't seem to want to run.

OTHER TIPS

Lots and lots of basic syntax error and basic nomenclature errors. I suggest you start using a particular nomenclature for your variables, and also use a lot of the Firebug Console / Chrome Developer Tools' Console to check your JS errors that come up! :)

Use this:

    <head>
    <title>a4_part3</title>

    <script type="text/javascript">
    //<![CDATA[
        function storytime()
        { 
            //displays alert
            alert("Welcome to an Interactive Story Spot.");
        }

        function confirm()
        {   
            var spaceship = document.getElementsByName("transport")[0].value;
            var ducatti = document.getElementsByName("transport")[1].value;
            var ferrari = document.getElementsByName("transport")[2].value;
            var jet = document.getElementsByName("transport")[3].value;
            var train = document.getElementsByName("transport")[4].value;
            var transport = "";

            var name = document.getElementsByName("name")[0].value
            var title = document.getElementsByName("title")[0].value
            var noun = document.getElementsByName("noun")[0].value
            var num1 = document.getElementsByName("num1")[0].value
            var num2 = document.getElementsByName("num2")[0].value

            var miles = document.getElementsByName("measuretravel")[0].value
            var km=document.getElementsByName("measuretravel")[1].value;
            var travelmeasure = document.getElementsByName("measureravel").value


            //determine which mode of transportation was chosen
            if (document.getElementsByName("transport")[0].checked)
            {
                transport = spaceship;
            }
            else if (document.getElementsByName("transport")[1].checked)
            {
                transport = ducatti;
            }
            else if (document.getElementsByName("transport")[2].checked)
            {
                transport = ferrari;
            }
            else if (document.getElementsByName("transport")[3].checked)
            {
                transport = jet;
            }
            else if (document.getElementsByName("transport")[4].checked)
            {
                transport = train;
            }


            //determine which measure of travel was chosen
            if (document.getElementsByName("measuretravel")[0].checked)
            {
                miles = "+num1+" + "+num2+" * 1.60934
                measuretravel = miles;
            }
            else if (document.getElementsByName("measuretravel")[1].checked)
            {
                km = "+num1+" + "+num2+"
                measuretravel = km;
            }

            //display alert
            alert ("Hello, "+name+", your story values are "+title+", "+noun+", "+transport+", "+num1+", "+num2+", and "+measuretravel+" ");

        }

    //]]>
    </script>

</head>

<body>
    <form id="storyform" action="">
        <h1>Create Your Own Story</h1>


        <p style="font-weight:bold;"> Your Name
        <input type="text" name="name" id="name" value="Jane Doe">  
        </p>            

        <p style="font-weight:bold;"> Story Title
        <input type="text" name="title" id="title" value="Enter Story Title Here">  
        </p>

        <p style="font-weight:bold;">Choose A Mode Of TRANSPORTATION</p>

            <input type="radio" name="transport" id="transport" value="spaceship" checked="checked"> Spaceship
            <br>
            <input type="radio" name="transport" id="transort1" value="ducati"> Ducati
            <br>
            <input type="radio" name="transport" id="transport2" value="ferrari"> Ferrari
            <br>
            <input type="radio" name="transport" id="transport3" value="jet"> Jet
            <br>
            <input type="radio" name="transport" id="transport4" value="train"> Train

            <br>
            <br>

            Enter a NOUN <input type="text" name="noun" id="noun" value="Paris" onclick=""/>
                <br>
            Enter a NUMBER <input type="text" name="num1" id="num1" value="1" checked="checked" onclick=""/> 
                <br>
            Enter Another NUMBER <input type="text" name="num2" id="num2" value="2" onclick=""/> 

            <p style="font-weight:bold;">Choose a means of MEASURING TRAVEL</p>

            <input type="radio" name="measuretravel" id="measuretravel1" value="miles"> Miles
            <br>
            <input type="radio" name="measuretravel" id="measuretravel2" value="km" checked="checked"> Kilometers


                <br>
                <br>
                <br>

            <input type="reset" value="Clear Form">

            <input type="button" value="Story Time!" onclick="storytime();">

            <input type="button" value="Confirm" onclick= "confirm();">


    </form>


</body>

Happy Coding

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top