Question

- - - - - - - - EDITED 由于代码错误，故事再次没有正确呈现。需要新鲜的眼睛！

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>");

}

- - - - - - - - 原

在添加“故事”功能和“继续”按钮之前，此页面运行顺畅。我想要做的是让用户输入变量应用于我在新的HTML页面中编写的故事。我假设它可能只是代码错误，但我似乎无法看到它。

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

Answer 1

你的Story函数

中看起来像是一个流氓大括号

这就是你现在的功能

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

它甚至没有注册您的函数，因为您有语法错误。您可以删除第二个{，也可以添加}来关闭它。我会做前者。

Answer 2

你错过了一个结束“}”。你的故事功能有一个“{”而“//收集用户输入数据”之后有另一个，但只有一个结束“}”

编辑：我遇到按钮及其功能的问题

2 个答案: