Я пытаюсь освежить свой 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>
У вас немало вопросов.
Во-первых, вы пытаетесь сделать математику, но используете строковые значения. Вы не можете сделать это иначе, они собираются конкатировать и сделать 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>
Итак, хотя я дал вам немало информации, вам действительно нужно потратить минуту на просмотр вашего кода. У вас было довольно много проблем, которые могли бы быть решены, если бы вы просто замедлились и прочитали, что вы делаете.
Ваш обработчик нажатия кнопки ссылается на функцию с именем Respond()
но фактическая функция, на которую вы хотите сослаться, называется myFunction()
(или наоборот).
Полученные вами значения ввода Number 1
и Number 2
являются строками. Вам необходимо проанализировать входные значения входных элементов Number 1
и Number 2
(преобразовать строки в целые числа), чтобы иметь возможность выполнять математические вычисления с ними.
Вы должны установить 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}'
-
Проверьте и запустите следующий фрагмент кода, где я проанализировал значения и использовал интерполяцию строк, чтобы вывести предложение с результатом при нажатии кнопки:
/* 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>
document.getElementById("num1").value;
возвращает строку
Вам нужно изменить его на номер, если вы хотите заняться математикой.
parseFloat(document.getElementById("num1").value);
Если кто-то введет не-число, это все равно не получится, потому что вам нужно проверить свои входные данные как часть процесса.
Respond()