Question

基本上我正在尝试做的是一个带有用户输入的疯狂的lib故事。我已经到了需要向每个输入显示警报的阶段，警告（“你好”+名字+“。你选择了”+ userinput +“等）

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

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

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

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>

Answer 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。这些用于在提交表单时以name = value对的形式将信息传递给服务器。

大多数人喜欢大多数东西的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。 / em>的

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

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

应提醒“男性”。

如果这是你需要的唯一数据，那么你原本可以抓住它，并保存了一些打字：

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

希望有所帮助！

来自文本框和单选按钮的用户输入在警报中重复，显示未定义？

1 个答案: