将2个表单输入加在一起

Question

我正在尝试输入firstName和lastName的输入并将其记录在控制台上。我知道我可以将其添加到框中，并且在添加时该部分可以工作。但是，我永远无法获得要显示或添加的框的值。

我遇到错误：

  

未捕获的TypeError：无法将属性'value'设置为null

基本上，这是简单的加法，但获得价值是我遇到问题的地方。

function addNames() {
  var a = parseInt(document.getElementById("firstName").value);
  var b = parseInt(document.getElementById("lastName").value);
  var answer = document.getElementById("answer");
  answer.value = a + b;
}

addNames();

body {
  background: #2b2b2b;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

h1 {
  color: #bdbdbd;
  font-weight: 300;
}

form {
  color: white;
}

h2 {
  color: #bdbdbd;
  font-weight: 200;
}

<div>
  <h1 id="title"> Fill Out Form With Your Name</h1>
  <form>
    First name:<br>
    <input type="text" name="firstname" id="firstName" value=""><br> Last name:<br>
    <input type="text" name="lastname" id="lastName" value="">
  </form>
  <button onclick="addNames()"> Click Here</button>
  <h2 id="result"></h2>
</div>

Answer 1

在其他问题中，您无需添加字符串，而是将它们串联在一起。您也不会将它们转换为整数。幸运的是，JavaScript的类型松散，您可以使用加法运算符将它们组合起来：

var a = document.getElementById("firstName").value;
var b = document.getElementById("lastName").value;
var c = a + b;

当然您可能想要在其中留一个空间

var c = a + ' ' + b;

Answer 2

1. 您只需要在单击按钮时执行addNames（）。
2. 您试图在其中显示附加数字的h2没有正确引用。您需要执行document.getElementById("result")并设置innerHTML。

function addNames() {
  var a = parseInt(document.getElementById("firstName").value);
  var b = parseInt(document.getElementById("lastName").value);
  var answer = a + b;
  document.getElementById("result").innerHTML = answer;
}

body {
  background: #2b2b2b;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

h1 {
  color: #bdbdbd;
  font-weight: 300;
}

form {
  color: white;
}

h2 {
  color: #bdbdbd;
  font-weight: 200;
}

<div>
  <h1 id="title"> Fill Out Form With Your Name</h1>
  <form>
    First name:<br>
    <input type="text" name="firstname" id="firstName" value=""><br> Last name:<br>
    <input type="text" name="lastname" id="lastName" value="">
  </form>
  <button onclick="addNames()"> Click Here</button>
  <h2 id="result"></h2>
</div>

Answer 3

您似乎有2个问题。

1. 第一个是脚本中对addNames()的函数调用。删除它，因为它会在页面加载中爆炸。
2. 第二个看起来像您的js，您正在寻找ID answer，但是您的html却具有ID result

和

1. 您不需要像其他人所说的那样将值转换为整数即可添加它们