Javascript 最大值和最小值不起作用
Javascript max and min not working
我正在尝试创建一个页面,让用户输入三个数字,并在下方打印输入的最大值和最小值。我已经使用了 Math.max/min 函数,也尝试了 if 语句,但是当我单击提交时,没有任何显示。一些见解将不胜感激,谢谢!
function max() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var z = document.getElementById("num3").value;
var maximum = Math.max(parseInt(x), parseInt(y), parseInt(z));
document.getElementById("max").innerHTML= maximum;
}
function min() {
var x = parseInt(document.getElementById("num1").value);
var y = parseInt(document.getElementById("num2").value);
var z = parseInt(document.getElementById("num3").value);
document.getElementById("min").innerHTML = Math.min(x,y,z);
}
这是我的 html
<p>Enter First Number:</p>
<input type="text" name = "number1" id="num1"><br>
<p>Enter Second Number</p>
<input type="text" name = "number2" id="num2"><br>
<p>Enter third number</p>
<input type="text" name = "number3" id="num3"><br>
<input type="submit" value="Submit" onclick="max(); min(); "><br />
<p>Max =</p><p id ="max"></p><br />
<p>Min =</p><p id ="min"></p><br />
将<input type="submit"/>
替换为<button type="submit" value="" onclick="minmax();">Submit</button>
并添加JS功能:
function minmax() {
min();
max();
}
您的问题似乎与您附加活动的方式有关。
当我使用时它工作正常:
document.querySelector( '[type="submit"]' ).addEventListener( 'click', function() {
max();
min();
}, false );
您只需要更改与按钮相关的标签,而不是:
<input type="submit" value="Submit" onclick="max(); min(); "><br />
只需输入:
<button type="submit" value="Submit" onclick="max(); min()">Click</button><br />
None 的答案告诉您为什么您的代码不起作用。
内联侦听器中的标识符首先被解析为放置它们的元素的属性。 Input elements 有一个默认的 max 属性,因此在内联侦听器中,标识符 max 将引用输入的 max 属性。因此在任何文档中:
<input onclick="console.log(max)">
显示 ''
(即空字符串)。
因此,您可以将函数的名称更改为更有意义的名称,或者更改调用函数的上下文,这样就不会在元素上解析标识符,并且 OP 代码可以正常工作。例如
<input type="submit" value="Submit" onclick="callBoth()">
和
function callBoth() {
max();
min();
}
顺便说一句,表单外的输入类型提交只是一个按钮,所以你应该使用:
<input type="button" ...>
我正在尝试创建一个页面,让用户输入三个数字,并在下方打印输入的最大值和最小值。我已经使用了 Math.max/min 函数,也尝试了 if 语句,但是当我单击提交时,没有任何显示。一些见解将不胜感激,谢谢!
function max() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var z = document.getElementById("num3").value;
var maximum = Math.max(parseInt(x), parseInt(y), parseInt(z));
document.getElementById("max").innerHTML= maximum;
}
function min() {
var x = parseInt(document.getElementById("num1").value);
var y = parseInt(document.getElementById("num2").value);
var z = parseInt(document.getElementById("num3").value);
document.getElementById("min").innerHTML = Math.min(x,y,z);
}
这是我的 html
<p>Enter First Number:</p>
<input type="text" name = "number1" id="num1"><br>
<p>Enter Second Number</p>
<input type="text" name = "number2" id="num2"><br>
<p>Enter third number</p>
<input type="text" name = "number3" id="num3"><br>
<input type="submit" value="Submit" onclick="max(); min(); "><br />
<p>Max =</p><p id ="max"></p><br />
<p>Min =</p><p id ="min"></p><br />
将<input type="submit"/>
替换为<button type="submit" value="" onclick="minmax();">Submit</button>
并添加JS功能:
function minmax() {
min();
max();
}
您的问题似乎与您附加活动的方式有关。
当我使用时它工作正常:
document.querySelector( '[type="submit"]' ).addEventListener( 'click', function() {
max();
min();
}, false );
您只需要更改与按钮相关的标签,而不是:
<input type="submit" value="Submit" onclick="max(); min(); "><br />
只需输入:
<button type="submit" value="Submit" onclick="max(); min()">Click</button><br />
None 的答案告诉您为什么您的代码不起作用。
内联侦听器中的标识符首先被解析为放置它们的元素的属性。 Input elements 有一个默认的 max 属性,因此在内联侦听器中,标识符 max 将引用输入的 max 属性。因此在任何文档中:
<input onclick="console.log(max)">
显示 ''
(即空字符串)。
因此,您可以将函数的名称更改为更有意义的名称,或者更改调用函数的上下文,这样就不会在元素上解析标识符,并且 OP 代码可以正常工作。例如
<input type="submit" value="Submit" onclick="callBoth()">
和
function callBoth() {
max();
min();
}
顺便说一句,表单外的输入类型提交只是一个按钮,所以你应该使用:
<input type="button" ...>