Добавить вместе 2 ввода формы

Question

Я пытаюсь взять ввод firstName и lastName и консоль записать его. Я знаю, что могу добавить это в коробку, и эта часть работает, когда я добавляю это. Однако я никогда не могу получить значения полей, чтобы показать или добавить.

Я получаю ошибку:

Uncaught 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. Н2, внутри которого вы пытаетесь показать добавленные номера, не имеет правильной ссылки. Вам нужно сделать 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 вы ищете идентификатор answer, но ваш HTML у вас есть идентификатор result

И

3. Вам не нужно преобразовывать значения в целые числа, чтобы добавить их, как сказали другие