У вас немало проблем.
Сначала вы пытаетесь сделать математику, но используете строковые значения. Вы не можете сделать это иначе, они собираются конкатировать и сделать 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>
Так что, хотя я и дал вам совсем немного здесь, чтобы посмотреть, вам действительно нужно потратить минуту на просмотр вашего кода. У вас было немало проблем, которые могли бы быть решены, если бы вы просто замедлились и прочитали, что делаете.