将Element.value与number进行比较会产生意外结果

Question

它只计算/比较所有三个数字的第一个数字。我认为，它将输入值作为字符串/文本。有人能帮我吗。。

它将值视为数字，但将其视为文本。

function chkcnd() {
var fnumber = document.getElementById("fnumber").value;
var snumber = document.getElementById("snumber").value;
var tnumber = document.getElementById("tnumber").value;
if (fnumber >= snumber && fnumber >= tnumber) {
document.getElementById("result").innerHTML = "First Number is Big";
} else if (snumber >= fnumber && snumber >= tnumber) {
document.getElementById("result").innerHTML = "Second Number is Big";
} else {
document.getElementById("result").innerHTML = "Third Number is Big";
}
}
document.getElementById("btn-snd").onclick = chkcnd;
function clear() {
document.getElementById("fnumber").value = "";
document.getElementById("snumber").value = "";
document.getElementById("tnumber").value = "";
}

<table>
<tr>
<th>
<label for="fnumber">Enter First number</label>
</th>
<td>
<input type="number" name="fnumber" id="fnumber">
</td>
</tr>
<tr>
<th>
<label for="snumber">Enter First number</label>
</th>
<td>
<input type="number" name="snumber" id="snumber">
</td>
</tr>
<tr>
<th>
<label for="tnumber">Enter First number</label>
</th>
<td>
<input type="number" name="tnumber" id="tnumber">
</td>
</tr>
<tr>
<th><label for="Result">Result</label></th>
<td>
<p id="result"></p>
</td>
</tr>
<tr>
<td> <button type="button" id="btn-snd">Submil</button> </td>
<td> <button type="button" id="btn-cnd">Cancel</button> </td>
</tr>
</table>

Answer 1

这可能是因为fsnumber、snumber和tnumber作为字符串存储在html中。你只需要把这些数字转换成整数。显然，在进一步使用变量之前，添加一些逻辑来检查它是否成功转换。

var fnumber = parseInt(document.getElementById("fnumber").value);
var snumber = parseInt(document.getElementById("snumber").value);
var tnumber = parseInt(document.getElementById("tnumber").value);

Answer 2

在使用+符号进行比较之前，可以将所有值转换为数字。我已经在下面的代码片段中编辑了您的代码。现在应该可以了。

function chkcnd() {
var fnumber = document.getElementById("fnumber").value;
var snumber = document.getElementById("snumber").value;
var tnumber = document.getElementById("tnumber").value;
if (+fnumber >= +snumber && +fnumber >= +tnumber) {
document.getElementById("result").innerHTML = "First Number is Big";
} else if (+snumber >= +fnumber && +snumber >= +tnumber) {
document.getElementById("result").innerHTML = "Second Number is Big";
} else {
document.getElementById("result").innerHTML = "Third Number is Big";
}
}
document.getElementById("btn-snd").onclick = chkcnd;
function clear() {
document.getElementById("fnumber").value = "";
document.getElementById("snumber").value = "";
document.getElementById("tnumber").value = "";
}

<table>
<tr>
<th>
<label for="fnumber">Enter First number</label>
</th>
<td>
<input type="number" name="fnumber" id="fnumber">
</td>
</tr>
<tr>
<th>
<label for="snumber">Enter First number</label>
</th>
<td>
<input type="number" name="snumber" id="snumber">
</td>
</tr>
<tr>
<th>
<label for="tnumber">Enter First number</label>
</th>
<td>
<input type="number" name="tnumber" id="tnumber">
</td>
</tr>
<tr>
<th><label for="Result">Result</label></th>
<td>
<p id="result"></p>
</td>
</tr>
<tr>
<td> <button type="button" id="btn-snd">Submil</button> </td>
<td> <button type="button" id="btn-cnd">Cancel</button> </td>
</tr>
</table>

Answer 3

只需更新该部分：

var fnumber = parseFloat(document.getElementById("fnumber").value);
var snumber = parseFloat(document.getElementById("snumber").value);
var tnumber = parseFloat(document.getElementById("tnumber").value);