Question

我尝试提交两个要在javascript函数中使用的参数。代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>

</head>
<body>


<script>
function func1 (x,y){

     var z=x+y
     alert(z)

    }                           

</script>
<form >
first input:<br>
<input type="text" y="Y" value=85>
<br>
second input:<br>
<input type="text" x="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>

<button type="button" onclick="func1(x,y)">Try it</button>

我得到的错误是Uncaught ReferenceError: x is not defined我应该如何将x和y定义为要放入js函数的输入？

Answer 1

在范围内，按钮不存在attritubes X和Y.您需要获取元素输入并访问attr X或Y：

*<form >
first input:<br>
<input type="text" y="Y" value=85>
<br>
second input:<br>
<input id="id-x" type="text" x="X" value=15>
<br><br>
<input id="id-y" type="submit" value="Submit">
</form>

<button type="button" onclick="func1(document.getElementById('id-x').x, document.getElementById('id-y').y)">Try it</button>*

Answer 2

错误信息很明确：如果要使用它们，必须定义变量。 Javascript引擎不知道您的x和y应该是什么。

所以你需要先选择输入元素然后再取值。如何选择元素？你需要以某种方式识别它。例如，给它一个id：

<input type="text" id="Y" value=85>
<input type="text" id="X" value=15>

我用id替换了无意义的x，y属性。然后丑陋的用法是：

<button type="button" onclick="func1(Number(document.querySelector('#X').value), Number(document.querySelector('#Y').value))">Try it</button>

当然使用起来不太方便。使用addEventListener方法绑定事件处理程序有更现代的方法。再次，给按钮一些id：

<button type="button" id="button">Try it</button>

然后它们将一起变成：

＆＃13;

<form>
    first input:<br>
    <input type="text" id="Y" value=85> <br>
    
    second input:<br>
    <input type="text" id="X" value=15>
    <br><br>
    <input type="submit" value="Submit">
</form>

<button type="button" id="button">Try it</button> 


<script>
document.querySelector('#button').addEventListener('click', function() {
    var x = Number(document.querySelector('#X').value),
        y = Numberdocument.querySelector('#Y').value);
  
    func1(x, y);
});
  
function func1 (x, y) {
     var z = x + y;
     alert(z);
}
</script>

＆＃13;

另一个重要的注意事项。您需要将数字传递给func1函数，否则+运算符会表现得很奇怪。这里的问题是输入元素值始终为String（在您的情况下为数字字符串），如果与字符串一起使用，+的作用类似于连接运算符。所以你需要明确地将cat字符串转换为数字，例如使用Number函数。

Answer 3

将id添加到<input>，然后将.value转换为数字：

＆＃13;

function func1 (x,y){

     var z=(+x)+(+y);
     alert(z);

}

＆＃13;

<form >
first input:<br>
<input type="text" id="Y" name="Y" value=85>
<br>
second input:<br>
<input type="text" id="X" name="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>

<button type="button" onclick="func1(document.getElementById('X').value,document.getElementById('Y').value)">Try it</button>

＆＃13;

Answer 4

https://jsfiddle.net/hmfcLsf2/1/

<body>
<script>
function func1 (x,y){
   var z=parseInt(x)+parseInt(y)
   alert(z)
}
</script>
<form >
first input:<br>
<input id="y_field" type="text" y="Y" value=85>
<br>
second input:<br>
 <input id="x_field" type="text" x="X" value=15>
<br><br>
</form>

<button type="button" onclick="func1(document.getElementById('x_field').value,document.getElementBy    Id('y_field').value)">Try it</button>

使用getElementById。请参阅上面的jsfiddle。

Answer 5

如果您不想更改标记中的任何内容，只需使用document.querySelector提取值：

function callFunc() {
    func1(parseInt(document.querySelector('[y="Y"]').value), 
          parseInt(document.querySelector('[x="X"]').value));
}

改为呼叫callFunc()：

<button type="button" onclick="callFunc();">Try it</button>

演示 - ＆gt;的 http://jsfiddle.net/s2z13q14/

将要在网页中使用的参数定义为输入

5 个答案: