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

1

Я пытаюсь освежить свой JS и хочу, чтобы пользователь мог ввести свои имя и фамилию и два числа. Когда они нажимают кнопку, я хочу, чтобы текст сменился на "Здравствуйте, имя! Ваша сумма - число!"

Мой код не работает, кто-нибудь сможет сказать мне, где моя проблема?

<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="Respond()">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;
        var n= document.getElementById("sum").value;

        var n= c + d;

        document.getElementById("Respond").innerHTML="Respond";

    }



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


</script>
</body>
</html>
Показать ещё 1 комментарий
Теги:
forms

3 ответа

0

У вас немало вопросов.

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

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



Далее вы вызываете функцию response, но эта функция не существует. То, что существует, это myFunction, поэтому у вас есть несколько вариантов.

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

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 + "!";



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

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

        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>

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

0
  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}'

-

  1. Избегайте использования встроенных обработчиков * (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>
  • 0
    БЛАГОДАРЮ ВАС!!!! Это было очень полезно.
  • 0
    @ newgirl456 Рад, что смог помочь :) Пометьте это как правильный ответ и поставьте оценку, если это помогло вам решить вашу проблему. Ура !!
-1

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

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню