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

User input from text box and radio buttons reiterated in an alert, showing undefined?

本文关键字：未定义 显示 输入 文本 单选按钮 用户      更新时间：2023-09-26

基本上，我试图做的是一个带有用户输入的疯狂lib故事。我已经到了需要在每个输入中显示警报的阶段，警报（"你好"+名称+"。您选择了"+用户输入+"等）

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

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

这一步的目的是将代码添加到新函数中，以便它创建我们的故事。在函数中添加JavaScript语句，以收集每个表单元素的所有信息。在一个警报功能中显示用户信息。例如："你好[名字]，你的故事值是[标题]，[蔬菜]，[形容词]，[数字#1]，[数量#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>

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

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

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

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

试着把它翻过来。

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

希望能有所帮助！

相关文章：