Javascript изменение элементов формы

document.getElementById("num1").value; возвращает строку.

Вам нужно изменить его на число, если вы хотите заниматься математикой.

parseFloat(document.getElementById("num1").value);

Если кто-то наберет не число, это все равно не удастся, потому что вам нужно проверить свои вводимые данные как часть процесса.

1. Ваш обработчик нажатия кнопки ссылается на функцию с именем Respond(), но фактическая функция, на которую вы хотите ссылаться, называется myFunction() (или наоборот).

2. Полученные вами входные значения Number 1 и Number 2 являются строками. Вам необходимо проанализировать входные значения входных элементов Number 1 и Number 2 (преобразовать строки в целые числа), чтобы иметь возможность выполнять с ними математические вычисления.

3. Вы должны установить innerHTML для #output, а не #Respond для результата. Вы можете использовать Шаблонные литералы с Строчная интерполяция или базовую конкатенацию, чтобы объединить ваш результат, имя, фамилию и строку "Hello! Your sum is !".

-

Подход конкатенация будет выглядеть так:

"a " + someVariableName + " is a fruit that has vitamin " + someOtherVariable

Подходы литералы шаблонов и строковая интерполяция будут выглядеть так:

`a ${someVariableName} is a fruit that has vitamin ${someOtherVariable}`

-

4. Избегайте использования встроенных обработчиков * (onclick, oninput и т. д.) И вместо этого используйте прослушиватель событий в самом JavaScript.

Проверьте и запустите следующий Фрагмент кода, где я проанализировал значения и использовал интерполяцию строк для вывода предложения с результатом при нажатии кнопки:

/* JavaScript */

function myFunction(){

  var a = document.getElementById("first").value;
  var b = document.getElementById("last").value;
  var c = document.getElementById("num1").value;
  var d = document.getElementById("num2").value;

  var n= parseInt(c) + parseInt(d);

  document.getElementById("output").innerHTML = `Hello ${a} ${b}! Your sum is ${n}!`;

}

document.querySelector("button").addEventListener("click", myFunction);       

<!-- HTML -->

First Name: <input id = "first">
Last Name: <input id = "last">
<p></p>
Number 1: <input id = "num1">
Number 2: <input id = "num2">
<p></p>
<button>Respond</button>

<div id = "output"></div>

У вас довольно много проблем.

Во-первых, вы пытаетесь заниматься математикой, но используете строковые значения. Вы не можете этого сделать, иначе они собираются объединить и сделать 3 + 1 = 31 вместо 4. Вы можете исправить это, проанализировав float, теперь я бы порекомендовал подтвердить, что это числа, чтобы вы не делали недействительным. парсинг.

if (isNaN(c) || isNaN(d) {
     alert('Invalid Input');
}else{
    var n= parseFloat(c) + parseFloat(d);
    document.getElementById("Respond").innerHTML = "Hello! Your sum is " + n;
}

Затем вы вызываете функцию ответа, но этой функции не существует. Что действительно существует, так это myFunction, поэтому у вас есть несколько вариантов.

Либо обновите эту строку в своем JS, чтобы использовать ответ в качестве имени функции:

function myFunction(){

должно быть:

function Respond(){

Или обновите кнопку HTML, чтобы использовать правильное имя функции:

 <button onClick = "Respond()">Respond</button>

Должно быть:

 <button onClick = "myFunction()">Respond</button>

Затем вы ищете элемент с идентификатором ответа, но этот элемент не существует. Вы снова используете неправильный идентификатор. Здесь вам нужно использовать вывод.

Эта строка:

    document.getElementById("Respond").innerHTML = "Hello! Your sum is !";

Должно быть:

    document.getElementById("output").innerHTML = "Hello! Your sum is " + n + "!";

Затем вы пытаетесь получить значение чего-либо с идентификатором sum, но его вообще не существует.

Просто удалите эту строку:

        var n= document.getElementById("sum").value;

Наконец, почему ваше средство обновления значений находится вне вызова функции? Это средство обновления должно быть внутри функции с тем, что на самом деле получает значения. Если вы этого не сделаете, вы никогда не сможете обновить строку.

<html>
<head>
<meta charset = "UTF-8">
<title>JS Review</title>

<style>
    body{background: #8ADFB6; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
    #container{background: white; padding: 30px; width: 760px; margin: 0 auto;}
    #output{
        padding: 10px; margin: 10px;
    }
</style>
</head>

<body>

<div id = "container">

    <h1>Using Form Elements with Javascript</h1>


    <p>We can utilize user input to create feedback</p>
    First Name: <input id = "first">
    Last Name: <input id = "last">
    <p></p>
    Number 1: <input id = "num1">
    Number 2: <input id = "num2">
    <p></p>
    <button onClick = "myFunction()">Respond</button>

    <div id = "output"></div>
</div>

<script>
    function myFunction(){

        var a = document.getElementById("first").value;
        var b = document.getElementById("last").value;
        var c = document.getElementById("num1").value;
        var d = document.getElementById("num2").value;
        if (isNaN(c) || isNaN(d)) {
          alert('Invalid Input');
        }else{
          var n= parseFloat(c) + parseFloat(d);
          document.getElementById("output").innerHTML = "Hello! Your sum is " + n;

        }

    }


</script>
</body>
</html>

Итак, хотя я дал вам довольно много информации, вам действительно нужно уделить минуту, чтобы просмотреть свой код. У вас было немало проблем, которые можно было бы решить, если бы вы просто притормозили и прочитали, что делаете.