Question

我想让用户按下提交按钮，以便在name="output"的输入框中显示他们的姓名和年龄？

我有3个输入框，一个用于询问姓名，另一个用于年龄，而另一个用于提供输出。我正在尝试使用函数output()来显示最后一个输入框。

我对自己出错的地方感到困惑，是否需要.value？

<!doctype html>
<html>
<head>

<style>
.formdiv{
    align: center;
}
</style>
</head>
<body>

<script language="javascript" type="text/javascript">
    function output(){
        var name = getElementByName('firstName');
        var Age= getElementByName('age');
        var out = document.write(name+Age);
        document.getElementByName('output') = out;
    }
</script>

<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" name="firstName" placeholder="John" required="required"></input> 
<br/>
<br/>
<label>Age </label>
<input type="number" name="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
        <button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output"></input>
</center>
</div>
</body>
</html>

Answer 1

这是您的代码的工作版本。

没有方法getElementByName（但是getElementsByName） - 您应该使用document.getElementById()（Read about it here）
您应该使用输入元素的value。

<!doctype html>
<html>
<head>

<style>
.formdiv{
    align: center;
}
</style>
</head>
<body>

<script language="javascript" type="text/javascript">
    function output(){
        var name = document.getElementById('firstName').value;
        var Age= document.getElementById('age').value;
        document.getElementById('output').value = name+Age;
    }
</script>

<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" id="firstName" placeholder="John" required="required"></input> 
<br/>
<br/>
<label>Age </label>
<input type="number" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
        <button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" id="output"></input>
</center>
</div>
</body>
</html>

Answer 2

getElementsByName（注意：Elements，而不是Element）会返回Element的列表，在这种情况下是<input> s。首先，您需要使用getElementsByName(...)[0]选择第一个（在您的情况下是您唯一的一个）。然后你得到一个Element。

但是你不想输出整个元素（Object，而不是String，并且转换为字符串，它可能不会是你所期望的，所以您需要选择Element的value属性。所以是的，您需要添加.value，就像您假设的那样：

function output(){
    var name = getElementsByName('firstName')[0].value;
    var Age= getElementsByName('age')[0].value;

然后，document.write直接将参数写入新文档，这会导致一个emtpy页面上没有其他内容，但该字符串。这不是你想要的，所以你不需要它。您执行想要分配一个名为out的新变量，并使用该字符串：

    var out = name+Age;

然后将新值分配给输出字段 - 您不希望用字符串替换Element（这甚至不起作用），但它的值，所以你需要再次.value：

    document.getElementsByName('output')[0].value = out;
}

这应该可以解决问题。

（除此之外，您可能希望使用name + " " + Age而不是name+Age，否则您最终会使用＆＃34; John Doe23＆＃34;而不是＆＃34; John Doe 23＆＃34;你可能想要的）

Answer 3

您的代码存在一些问题：

没有getElementByName这样的东西 - 它是getElementById
更改为上述内容，您需要将id添加到输入元素
您需要使用value

getElementById

以上内容将使您的代码正常工作，但center代码已过时，您不应该使用它
输入为自闭标签，因此您不需要</input>

<!doctype html>
<html>

<head>

  <style>
    .formdiv {
      align: center;
    }
  </style>
</head>

<body>

  <script language="javascript" type="text/javascript">
    function output() {
      var name = document.getElementById('firstName').value;
      var Age = document.getElementById('age').value;
      var out = name + Age;
      document.getElementById('output').value = out;
    }
  </script>

  <h1><strong><em><center>Payment Details</center></em></strong> </h1>
  <div class="formdiv">
    <fieldset>
      <center>
        <legend>Enter the following Info:</legend>
        <br />
        <label>Name</label>
        <input type="text" name="firstName" id="firstName" placeholder="John" required="required"></input>
        <br/>
        <br/>
        <label>Age</label>
        <input type="number" name="age" id="age" maxlength="2" required="required"></input>
    </fieldset>
    </center>
  </div>
  <div>
    <center>
      <button onClick="output()">Submit</button>
      <br/>
      <label for="output">Output</label>
      <br/>
      <input type="textbox" name="output" id="output"></input>
    </center>
  </div>
</body>

</html>

Javascript不会从输入框输出值

3 个答案: