Question

我正在尝试刷我的JS，我想拥有它，以便用户可以输入他们的名字和姓氏以及两个数字。当他们单击按钮时，我希望文本更改为“ Hello Name ！您的总和为 number ！”

我的代码无法正常工作，有人可以告诉我我的问题在哪里吗？

<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>

Answer 1

您的按钮单击处理程序引用了名为Respond()的函数，但您要引用的实际函数称为myFunction()（反之亦然）。
您检索到的Number 1和Number 2的输入值是字符串。您需要解析Number 1和Number 2输入元素的输入值（将字符串转换为整数），以便能够使用它们进行数学计算。
您必须将innerHTML中的#output而不是#Respond设置为结果。您可以将Template Literals与String Interpolation结合使用，也可以将基本结果串联起来，以组合结果，名字，姓氏和"Hello! Your sum is !"字符串。

-

串联方法如下：

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

模板文字和字符串插值方法如下：

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

-

避免使用内联on *处理程序（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>

Answer 2

您有很多问题。

首先，您尝试进行数学运算，但使用的是字符串值。您不能这样做，否则它们将合并并使得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>

接下来，您正在寻找具有ID响应的元素，但该元素不存在。再一次，您使用了错误的ID。您需要在那里使用输出。

此行：

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

应该是：

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

接下来，您尝试获取ID为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>

因此，尽管我在这里给了您很多参考，但是您确实需要花一点时间来检查您的代码。如果您放慢脚步并阅读正在做的事情，那么您就有很多本可以解决的问题。

Answer 3

document.getElementById("num1").value;返回一个字符串。

如果要进行数学运算，则需要将其更改为数字。

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

如果有人输入非数字，这仍然会失败，因为您需要在过程中验证输入内容。

Javascript更改表单元素

3 个答案: