-1

基本上我正在尝试做的是一个带有用户输入的疯狂的 lib 故事。我已经到了需要为每个输入显示警报的阶段，alert("hello "+name+". You've selected "+userinput+", etc)

我的警报出现了，但信息没有从文本框/单选按钮收集。它只是显示未定义。

这是我到目前为止所拥有的..

此步骤的目的是将代码添加到新函数中，以便创建我们的故事。将 JavaScript 语句添加到您的函数以收集来自每个表单元素的所有信息。在一个警报功能中显示用户的信息。例如：“你好 [name]，你的故事值是 [title], [vegetable], [adjective], [number #1], [number #2]”</p> 

function beginstory() {

alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");
                var name=(document.getElementById('username').value);
                var title = document.getElementById("storytitle").value;
                var hobby = document.getElementById("hobby").value;
                var adjective = document.getElementById("adjective").value;
                var number1 = document.getElementById("number1").value;
                var number2 = document.getElementById("number2").value;
                var trex = document.getElementById("trex").value;
                var steg = document.getElementById("steg").value;
                var diplod = document.getElementById("diplod").value;
                var crazy = document.getElementById("crazy").value;
                var charming = document.getElementById("charming").value;
                var curious = document.getElementById("curious").value;
                var he = document.getElementById("he").value;
                var she = document.getElementById("she").value;
                var ze = document.getElementById("ze").value;
                var jurassic = document.getElementById("jurassic").value;
                var colonial = document.getElementById("colonial").value;
                var twenty = document.getElementById("twenty").value;}


     <form id="story" action="">

            What is your name?                  <input type="text" name="storyelements" id="username"><br>
            What is the title of your story?    <input type="text" name="storyelements" id="storytitle"><br>
            Name a hobby:                       <input type="text" name="storyelements" id="hobby"><br>
            Name an adjective trait:            <input type="text" name="storyelements" id="adjective"><br>
            Name a number greater than one:     <input type="text" name="storyelements" id="number1"><br>
            Name another number greater than one: <input type="text" name="storyelements" id="number2"><br>

            Choose a dinosaur:                  <input type="radio" name="dinosaur" id="trex" checked="checked">Tyrannosaurus Rex
                                                <input type="radio" name="dinosaur" id="steg">Stegosaurus
                                                <input type="radio" name="dinosaur" id="diplod">Diplodocus<br>

            Choose a personality trait:         <input type="radio" name="trait" id="crazy" checked="checked">Crazy
                                                <input type="radio" name="trait" id="charming">Charming
                                                <input type="radio" name="trait" id="curious">Curious<br>

            Choose your preferred pronoun:      <input type="radio" name="pronoun" id="he" checked="checked">He
                                                <input type="radio" name="pronoun" id="she">She
                                                <input type="radio" name="pronoun" id="ze">Ze<br>

            Choose an era:                      <input type="radio" name="era" id="jurassic" checked="checked">Jurassic
                                                <input type="radio" name="era" id="colonial">Colonial
                                                <input type="radio" name="era" id="twenty">The 1920s<br>
            <!-- BUTTONS -->
                                        <input type="button" onclick="beginstory()" name="storytime" value="Start Your Story!"></button><br>
                                        <input type="reset" name="clearform" value="Clear Form">


  </form>

4

1 回答 1

1

好吧，您可以尝试在显示变量之前定义它们。

照原样，你正在尝试这个：

alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");
var name=(document.getElementById('username').value);
var title = document.getElementById("storytitle").value;
...

看看你是如何告诉它显示的，例如，“名字”......然后在下一行告诉它名字应该是什么意思？

尝试翻转它。

...
var colonial = document.getElementById("colonial").value;
var twenty = document.getElementById("twenty").value;}
alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");

通过将警报放在函数的末尾而不是开头，您已经定义了变量，然后告诉它在哪里显示它们。

应该对你更好。

** 扩展 **

好的...抓住被选中的按钮：

所有表单元素都将有一个名称或一个 ID。这些用于在提交表单时将信息以名称=值对的形式传递给服务器。

大多数人在大多数情况下都喜欢 id，但特别是在单选按钮上，您应该设置一个名称；这允许您让两个或多个按钮在相同的标识符下返回它们的值：

<label>Male<input type="radio" name="gender" value="male"></label>
<label>Female<input type="radio" name="gender" value="female"></label>

这不适用于 id，因为 id 需要是唯一的。

然后，您可以创建一个变量并使用单选按钮本身加载它：

var myButton = document.getElementByName('gender');

这将返回BOTH单选按钮，因为它们都具有相同的名称。它以数组的形式返回它们，要访问它们，您只需使用数组表示法：

var maleButton = myButton[0];  // These are stored in the order they are found in 
var femaleButton = myButton[1];// in the HTML

注意：document.getElementById('youridhere') 返回单个值而不是数组，因为 id 始终是唯一的……但我们不能在这里使用它，因为它们没有使用 id。

然后，您可以像访问任何其他对象一样访问这些对象的成员：

alert("The value of maleButton is " + maleButton.value);

应该提醒“男性”。

如果这是您从对象中需要的唯一数据，那么您本来可以获取该数据，并节省一些输入：

var myValue = document.getElementByName('gender')[0].value;

希望有帮助！

于 2013-07-26T23:41:45.550 回答