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

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

javascript html function input

Javascript 定义要在网页中用作输入的参数,javascript,html,function,input,submit,Javascript,Html,Function,Input,Submit,我试图提交两个参数，用于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 a

我试图提交两个参数，用于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>


函数func1（x，y）{
var z=x+y
警报（z）
}                           
第一次输入：



第二次输入：




试试看

我得到的错误是

Uncaught ReferenceError:x没有定义

我应该如何定义x和y作为要放入js函数的输入？

在范围内，按钮不存在属性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>*

*
第一次输入：



第二次输入：




试试看*

在范围内，按钮不存在属性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>*

*
第一次输入：



第二次输入：




试试看*

错误信息很清楚：如果要使用变量，必须定义变量。Javascript引擎不知道在您的情况下，

和

应该是什么

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

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

当然，这不是很方便使用。有一种更现代的方法可以使用方法绑定事件处理程序。同样，给按钮一些id：

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

试试看

然后，它将成为：


第一次输入：



第二次输入：




试试看
document.querySelector（“#按钮”）.addEventListener（'click'，function（）{
var x=编号（document.querySelector（'#x'）.value），
y=Numberdocument.querySelector（'#y'）.value）；
func1（x，y）；
});
函数func1（x，y）{
var z=x+y；
警报（z）；
}

错误信息很清楚：如果要使用变量，必须定义变量。Javascript引擎不知道在您的情况下，

和

应该是什么

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

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

当然，这不是很方便使用。有一种更现代的方法可以使用方法绑定事件处理程序。同样，给按钮一些id：

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

试试看

然后，它将成为：


第一次输入：



第二次输入：




试试看
document.querySelector（“#按钮”）.addEventListener（'click'，function（）{
var x=编号（document.querySelector（'#x'）.value），
y=Numberdocument.querySelector（'#y'）.value）；
func1（x，y）；
});
函数func1（x，y）{
var z=x+y；
警报（z）；
}

将

id

添加到

s，并将其

值

转换为数字：

函数func1（x，y）{
var z=（+x）+（+y）；
警报（z）；
}


第一次输入：



第二次输入：




尝试将添加id
到
s，并将其值
转换为数字：

函数func1（x，y）{
var z=（+x）+（+y）；
警报（z）；
}

第一次输入：



第二次输入：




试试看


函数func1（x，y）{
var z=parseInt（x）+parseInt（y）
警报（z）
}
第一次输入：



第二次输入：




试试看

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


函数func1（x，y）{
var z=parseInt（x）+parseInt（y）
警报（z）
}
第一次输入：



第二次输入：




试试看

使用getElementById。请参阅上面的jsfiddle。
如果您不想更改标记中的任何内容，只需使用文档捕获值即可。querySelector
：
函数callFunc（）{
func1（parseInt（document.querySelector（'[y=“y”]'））.value），
parseInt（document.querySelector（'[x=“x”]'）.value））；
}

改为调用callFunc（）
：
试试看

演示->如果您不想更改标记中的任何内容，只需使用文档捕获值即可。querySelector
：
函数callFunc（）{
func1（parseInt（document.querySelector（'[y=“y”]'））.value），
parseInt（document.querySelector（'[x=“x”]'）.value））；
}

改为调用callFunc（）
：
试试看

演示->
非常感谢，您能告诉我如何将答案放在另一个文本框中吗？抱歉，花了太长时间。如果您仍希望将答案放在另一个文本框中，请添加另一个文本框，如，然后在函数中而不是警报（z），请使用此文档。getElementById（'x_result'）。value=z谢谢，您能告诉我如何将答案放在另一个文本框中吗？抱歉，花了太长时间。如果您仍希望将答案放在另一个文本框中，请添加另一个文本框，如，然后在函数中，而不是在alert（z）中，使用此文档。getElementById（'x_result'）。value=z