时间戳

首页 > 解决方案 > Javascript 更改表单元素

javascript - Javascript 更改表单元素

问题描述

我正在尝试复习我的 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>

标签： javascriptforms

解决方案

  1. 您的按钮单击处理程序引用了一个被调用的函数，Respond()但您要引用的实际函数被调用myFunction()（反之亦然）。

  2. Number 1您检索到的和的输入值Number 2是字符串。您需要解析输入值Number 1和Number 2输入元素（将字符串转换为整数）才能使用它们执行数学计算。

  3. 您必须设置innerHTMLof #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. 避免使用内联 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>

推荐阅读