EDITED: I'm having issues with a button and its function

Question

-----EDITED----- The story is not being presented properly, again, due to code error. Need fresh eyes!

function story()
{

    //collect the users input data

    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 travelmeasure = document.getElementsByName("measureravel").value


    //write new html to the page to display the story 
    document.write("<h1>"+title+"</h1>");
    document.write("<p>Once upon a time,</p>");
    document.write("<p>"+name+" was trying to make their way to "+noun+" in a "+transport+".</p>");
    document.write("<p>Unfortunately "+name+" didn't realise how far away "+houn+" really was.</p>");
    document.write("<p>The assumption was "+num1+" "+measuretravel+" when really is turned out to be "+num2+" "+measuretravel+".</p>");
    document.write("<p>Thankfully "+name+" likes to travel.</p>");
    document.write("<p>THE END</p>");

}

-----ORIGINAL-----

Before adding the "story" function and the "continue" button, this page was running smoothly. What I am trying to do is have the users input variables be applied to the story I wrote in a new HTML page. I'm assuming its probably just code error but I can't seem to see it.

<html>          
<head>
    <title>a4_part4</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 kms=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)
            {
                measuretravel = kms;
            }

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

        function story()
        {

            //collect the users input data
            {   
            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 travelmeasure = document.getElementsByName("measureravel").value


            //write new html to the page to display the story 
            document.write("<h1>"+title+"</h1>");
            document.write("<p>Once upon a time,</p>");
            document.write("<p>"+name+" was trying to make their way to "+noun+" in a "+transport+".</p>");
            document.write("<p>Unfortunately "+name+" didn't realise how far away "+houn+" really was.</p>")
            document.write("<p> The assumption was "+num1+" "+measuretravel+" when really is turned out to be "+num2+" "+measuretravel+".</p>")
            document.write("<p> Thankfully "+name+" likes to travel.<p>")
            document.write("<p>THE END</p>");

        }



    //]]>
    </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="kms" checked="checked"> Kilometers


                <br>
                <br>
                <br>

            <p>Please confirm before you continue<p>

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

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

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

            <input type="button" value="Continue" onclick="story();">


    </form>
</body>
</html>

...you're using `document.write` after the page is loaded. That's generally a no-no. Also, why fetch by `name` when your elements have `id`s? — , Aug 09 '13 at 20:12
Off topic - You might want to consider replacing the document.writes with dom manipulation methods. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Barbara Laird, Aug 09 '13 at 20:16
If your new code produces different results than the original code you posted, please do not update your question because doing so invalidates existing answers. Consider opening a new question to ask about the new issue, or work through the syntax errors via a typical debugging process. — George Cummins, Aug 09 '13 at 20:26

score 2 · Answer 1 · answered Aug 09 '13 at 20:14

it looks like there's a rogue curly brace in your Story function

This is what your function looks like right now

function story()
{
    //collect the users input data
    {   
    ...
}

It's not even registering your function because you have a syntax error. You can either remove that second { or you can add a } to close it. I would do the former.

score 1 · Answer 2 · answered Aug 09 '13 at 20:16

1

You're missing a closing "}". You have a "{" for your story function and another after "//collect the users input data", but only one closing "}"

answered Aug 09 '13 at 20:16

Gary Dean

23
6

EDITED: I'm having issues with a button and its function

2 Answers2