定义要在网页中用作输入的参数

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

在范围内，按钮不存在属性 X 和 Y。您需要获取元素输入并访问属性 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 应该是什么。

所以你需要先select输入元素，然后取它的值。如何获得select元素？您需要以某种方式识别它。例如给它一个 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>

然后加起来会变成：

<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>

还有一个重要提示。您需要将数字传递给 func1 函数，否则 + 运算符会表现得很奇怪。这里的问题是输入元素值始终是 String（在您的情况下是数字字符串），如果与字符串一起使用，+ 就像连接运算符一样。因此，您需要明确地将字符串转换为数字，例如使用 Number 函数。

Answer 3

将id添加到<input>中，并将它们的.value转换为数字：

function func1 (x,y){

     var z=(+x)+(+y);
     alert(z);

}

<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>

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>

演示 -> http://jsfiddle.net/s2z13q14/

定义要在网页中用作输入的参数

Define parameters to be used in a web page as an input

html

javascript

input

function

submit