如何将html输入绑定到我的javascript函数中？

Question

<!DOCTYPE html>
<html>


    <body>
        <form>
            Birth Year:<br>
            <input type="number" name="birthYear">
            <br>
            Current Year:<br>
            <input type="number" name="currentYear">
        </form>
        <button onclick="calculateAge()">Calculate Age</button>
        <div id="output"></div>

          <script>
          function calculateAge(ghF, xhF) {
          var ghF = "birthYear"
          var xhF = "currentYear"
          return (xhF - ghF);
          } {
           document.getElementByID("output").innerHTML = text;
          };
          </script>
   </body>

当我单击按钮时，它应该打印出“ You are x age”。 我将在哪里添加该文本？ 当我单击按钮时，此刻什么也没有发生。

Answer 1

getElementById将返回具有id的DOM元素（如所述参数）。 .value是input元素的属性，它将提供input的值，而不是返回值，您必须在进行减法后设置innerHTML/innerText 。

注意：必须为元素分配唯一的id属性才能检索DOM元素。

 function calculateAge() { var ghF = document.getElementById("birthYear").value; var xhF = document.getElementById("currentYear").value; document.getElementById("output").innerHTML = xhF - ghF; }

 <form> Birth Year: <br> <input type="number" name="birthYear" id="birthYear"> <br>Current Year: <br> <input type="number" name="currentYear" id="currentYear"> </form> <button onclick="calculateAge()">Calculate Age</button> <div id="output"></div>

Answer 2

function calculateAge() {
          var ghF = document.getElementById("birthYear").value;
          var xhF = document.getElementById("currentYear").value;
 document.getElementById("output").innerHTML="You are " +(xhF - ghF) + " age";
          }

例

Answer 3

该功能格式不良。

这将达到目的：

  function calculateAge() { var ghF = document.querySelector('[name="birthYear"]').value; var xhF = document.querySelector('[name="currentYear"]').value; document.getElementById("output").innerHTML = "You are "+(xhF - ghF)+" age"; }

 <form> Birth Year: <br> <input type="number" name="birthYear"> <br> Current Year: <br> <input type="number" name="currentYear"> </form> <button onclick="calculateAge()">Calculate Age</button> <div id="output"></div>

如何将html输入绑定到我的javascript函数中？

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-01-31 14:05:19

解决方案2
0 2016-01-31 14:05:59

解决方案3
0 2016-01-31 14:07:40

如何将html输入绑定到我的javascript函数中？

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-01-31 14:05:19

解决方案2 0 2016-01-31 14:05:59

解决方案3 0 2016-01-31 14:07:40

解决方案1
0 已采纳 2016-01-31 14:05:19

解决方案2
0 2016-01-31 14:05:59

解决方案3
0 2016-01-31 14:07:40