将HTML输入值作为JavaScript函数参数传递_Javascript_Html

将HTML输入值作为JavaScript函数参数传递

javascript html

将HTML输入值作为JavaScript函数参数传递,javascript,html,Javascript,Html,我是JavaScript新手，我正试图弄清楚如何将用户输入的值作为参数传递给JavaScript函数。这是我的密码： <body> <h1>Adding 'a' and 'b'</h1> <form> a: <input type="number" name="a" id="a"><br> b: <input type="number" name="b" id="a"><br> <b

我是JavaScript新手，我正试图弄清楚如何将用户输入的值作为参数传递给JavaScript函数。这是我的密码：

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add(a,b)">Add</button>
</form>
<script>
  function add(a,b) {
    var sum = a + b;
    alert(sum);
  }
</script>
</body>


添加“a”和“b”
答：

b:

添加
功能添加（a、b）{
var总和=a+b；
警报（总和）；
}

您可以使用

ID

获取值。但是

ID

应该是唯一的

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    a = $('#a').val();
    b = $('#b').val();
    var sum = a + b;
    alert(sum);
  }
</script>
</body>


添加“a”和“b”
答：

b:

添加
函数add（）{
a=$（'#a'）.val（）；
b=$（'#b'）.val（）；
var总和=a+b；
警报（总和）；
}

首先，元素ID应始终是唯一的。如果元素ID不是唯一的，那么总是会得到冲突的结果。想象一下，在您的例子中，使用两个具有相同ID的不同元素

<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>

<script>
  function add() {
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;

    var sum = parseInt(a) + parseInt(b);
    alert(sum);
  }
</script>


答：

b:

添加
函数add（）{
var a=document.getElementById（'a'）.value；
var b=document.getElementById（'b'）。值；
var-sum=parseInt（a）+parseInt（b）；
警报（总和）；
}

您使用jquery吗？如果：

或者使用原始javascript（DOM）

或

如果您想了解更多信息，W3Cool可以为您提供很大帮助。

1 ID应该是唯一的 2您不需要传递任何参数，因为您可以在javascript中调用它们


答：

b:

添加
函数add（）{
var a=document.getElementById（'a'）.value；
var b=document.getElementById（'b'）。值；
var总和=a+b；
警报（总和）；
}

使用此选项，它会起作用

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var m = document.getElementById("a").value;
    var n = document.getElementById("b").value;
    var sum = m + n;
    alert(sum);
  }
</script>
</body>


添加“a”和“b”
答：

b:

添加
函数add（）{
var m=document.getElementById（“a”）.value；
var n=document.getElementById（“b”）.value；
var总和=m+n；
警报（总和）；
}

一种方法是使用

document.getElementByID

，如下所示-


添加“a”和“b”
a:
b:

添加
功能添加（a、b）{
var-sum=parseInt（a，10）+parseInt（b，10）；
警报（总和）；
}


答：

b:

函数addition（）
{
var a=document.getElementById（'a'）.value；
var b=document.getElementById（'b'）。值；
var-sum=parseInt（a）+parseInt（b）；
回报金额；
}

但是没有办法将这些项目作为参数传递吗？@cdalto，我知道你是JS新手。你接受的答案是“有效”，但不是最佳实践。通常最好将所有逻辑委托给函数，而不是DOM元素中的onclick函数。想象一下如果你有3,4,5。。要添加的值。作为初学者，最好不要学习坏习惯：）。祝你学习顺利。：）好的，你的解决方案有些奏效。但是，它将其连接起来，就像a和b是字符串一样。所以求和是12，而不是3，其中a=1，b=2。

var求和=数（a）+数（b）可能重复的
document.getElementById('xx').value

xxxform.xx.value;

<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    var sum = a + b;
    alert(sum);
  }
</script>

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var m = document.getElementById("a").value;
    var n = document.getElementById("b").value;
    var sum = m + n;
    alert(sum);
  }
</script>
</body>

   <form action="" onsubmit="additon()" name="form1" id="form1">
      a: <input type="number" name="a" id="a"><br>
      b: <input type="number" name="b" id="b"><br>
      <input type="submit" value="Submit" name="submit">
   </form>
  <script>
      function additon() 
      {
           var a = document.getElementById('a').value;
           var b = document.getElementById('b').value;
           var sum = parseInt(a) + parseInt(b);
           return sum;
      }
  </script>