已编辑：我遇到了按钮及其功能的问题答案

【问题标题】：EDITED: I'm having issues with a button and its function已编辑：我遇到了按钮及其功能的问题
【发布时间】：2013-08-09 20:06:42
【问题描述】：

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

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>

【问题讨论】：

首先要看的是浏览器的开发者控制台。
第一步：去掉{上面的var transport = "";
...您在页面加载后使用document.write。这通常是一个禁忌。另外，当你的元素有ids 时，为什么要通过name 获取？
离题 - 您可能需要考虑将 document.writes 替换为 dom 操作方法。 stackoverflow.com/questions/802854/…
如果您的新代码产生的结果与您发布的原始代码不同，请不要更新您的问题，因为这样做会使现有答案无效。考虑打开一个新问题来询问新问题，或通过典型的调试过程解决语法错误。

标签： javascript html function button

【解决方案1】：

您的 Story 函数中似乎有一个流氓花括号

这就是你的函数现在的样子

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

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

【讨论】：

【解决方案2】：

您缺少一个结束“}”。您的故事功能有一个“{”，在“//收集用户输入数据”之后有另一个，但只有一个结束“}”

【讨论】：