如何用 JavaScript 替换 html 表单中的数据答案

【问题标题】：How to replace data in html form with JavaScript如何用 JavaScript 替换 html 表单中的数据
【发布时间】：2019-06-07 22:51:38
【问题描述】：

我创建了一个包含三个字段的 HTML 表单。字段 A 用于输入文本，字段 B 和 C 用于输入数字。

我创建了一个函数来计算 B i C，并将 A、B 和 C 中的数据输出到页面上。

怎样才能让A字段必须填写，B和C字段必须是正值？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tax calculator</title>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        Field A:<input id="name" type="text">
        Field B:<input id="tBas" type="value">
        Field C:<input id="tRat" type="value">
        <button id="calc">Calculate !</button>
    </div>
    <strong>
        <div id="name"> </div>
        <div id="income"> </div>
        <div id="rate"> </div>
        <div id="result"> </div>
    </strong>
    <script src="testCalculate.js">
    </script>
</body>
</html>

JavaScript：

function calculate() {
    var name = document.getElementById('name').value;
    var base = parseFloat(document.getElementById('tBas').value);
    var rate = document.getElementById('tRat').value;

    var taxPayer = ("First and last name: ") + (name);
    var taxIncome = ("Income for taxation: ") + ((base).toFixed(2));
    var taxRate = ("Tax rate: ") + (rate) + ("%.");
    var taxToPay = ("You need to pay: ") + ((base * rate / 100).toFixed(2));

    document.getElementById('name').innerHTML = taxPayer;
    document.getElementById('income').innerHTML = taxIncome;
    document.getElementById('rate').innerHTML = taxRate;
    document.getElementById('result').innerHTML = taxToPay;
}

document.getElementById('calc').addEventListener('click', calculate);

【问题讨论】：

对于字段 B 和 C type="value" 到 type="number" min=0 ；字段 A 需要使用
"如何在 JS 中应用..." - 为什么是 JavaScript？这些输入元素应该在一个表单中，然后只使用内置的表单验证。
因为我参加了课程并且还没有通过单元考虑内置表单验证...

标签： javascript html

【解决方案1】：

要检查某个字段是否已填写，您只需将其值与"" 进行比较即可。

要检查字段是否具有正值，您可以使用parseInt 将您的值（即字符串）转换为整数，然后将其与 0 > 0 进行比较。

类似的东西应该可以解决问题！

function calculate() {    
  var name = document.getElementById('name').value;
  var base = parseFloat(document.getElementById('tBas').value);
  var rate = document.getElementById('tRat').value;
  
  if (name != "" && parseInt(base) > 0 && parseInt(rate) > 0) {
    var taxPayer = ("First and last name: ")+(name); 
    var taxIncome = ("Income for taxation: ")+((base).toFixed(2)); 
    var taxRate = ("Tax rate: ")+(rate)+("%."); 
    var taxToPay = ("You need to pay: ")+((base*rate/100).toFixed(2));

    document.getElementById('name').innerHTML = taxPayer;
    document.getElementById('income').innerHTML = taxIncome;    
    document.getElementById('rate').innerHTML = taxRate;
    document.getElementById('result').innerHTML = taxToPay;
  }
}

document.getElementById('calc').addEventListener('click', calculate);

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tax calculator</title>
        <meta charset="UTF-8">          
    </head>
    <body> 
      <div>
          Field A:<input id="name" type="text">
          Field B:<input id="tBas" type="value">
          Field C:<input id="tRat" type="value">
          <button id="calc">Calculate !</button>      
      </div>
      <strong>
      <div id="name"> </div>
      <div id="income"> </div>
      <div id="rate"> </div>
      <div id="result"> </div>    
      </strong>      
    </body>
</html>

【讨论】：

就是这样。谢谢！在您的帮助下，我添加了这个：else { alert("必须填写名字和姓氏！！！必须填写收入的正值！！！"); }

【解决方案2】：

这个技巧你不需要使用 JS 要填充输入，请将其设置为

<input id="name" type="text" required>

然后有一个正值

<input id="tBas" type="number" min=0 >

【讨论】：

【解决方案3】：

ID 应该是唯一的。您应该使用另一个 ID div#name。

例如，在您的 html 代码中：

 <div id="div_name"> </div>

然后，进入你的脚本

document.getElementById('div_name').innerHTML= taxPayer;

【讨论】：