我有JavaScript值比较错误(例如3>10返回true)

I've got JavaScript value compare error (e.g. 3>10 return true)

本文关键字：返回 true JavaScript 比较 错误 例如 我有      更新时间：2023-09-26

我一直在为网页写一个函数，它应该做以下事情:

  1. 我可以设置最大值;
  2. 我可以设置的可用值不能大于最大值;
  3. 如果我不更改'available'，它将始终与'max'相同;
  4. 当我调低'max'时，当'max' <'available'， 'available'将显示为'max'(这是规则2);

我的问题是

  1. 当我设置'可用'小于10时，当我调整'max'为大于10时，'available'会突然意外地设置为'max';
  2. 当我将'available'设置为10到100之间时，出现同样的事情，当我将'max'调整为100以上时，'available'会突然意外地设置为'max';

(供您尝试的错误条件之一)-在网页:

  1. 设置'max'为7(无论小于10);
  2. 设置'available'为小于'max';
  3. 将'max'更改为大于10的值;

-> 'available'将更改为等于'max'，比较结果为'TRUE'

谁能告诉我我的代码有什么问题?谢谢。我试了3台机器。

// (not important) simply for knowing if 'user' changed the value of 'available'.
var ref =0;
function function_a(max){
//  (not important) for output reference only. *************************************
		document.getElementById('display_index').innerHTML = (max < document.getElementById('available').value);
		document.getElementById('display_index1').innerHTML = document.getElementById('available').value;
        document.getElementById('display_index2').innerHTML = max;
//  (not important) for output reference only. *************************************
// core function start: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	if (document.getElementById('available').value > max){
		document.getElementById('available').value = max;
		document.getElementById('display_available').innerHTML = max;
	}
	
	document.getElementById('display_init').innerHTML = max; 
	document.getElementById('available').max = max; 
	
	if(ref != 1 )
	{ 
		document.getElementById('available').value = max;
		document.getElementById('display_init').innerHTML = max;
	}
// core function end ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	
}
function function_b(ava){
	ref = 1; 
	document.getElementById('display_init').innerHTML = ava;
	
	if (ava > document.getElementById('max').value){
		document.getElementById('available').value = document.getElementById('max').value;
	}
}
<!-- *************** Output for reference *******************-->
Output : <b><span id="display_available">0</span> / <span id="display_init">0</span></b></p>
<p><label>Available : </label>
<input type="number" id="available" min="0" max="0" value="0" onchange="ref = 1; function_b(this.value);">
</p>
<p><label>Max Value: </label>
<input type="number" id="max" min="0" max="99999" value="0" onchange="function_a(this.value);">
</p>
<!-- *************** End of Output for reference *******************-->
<!-- *************** Main Function *******************-->
<fieldset>
<p>
Compare result: <span id="display_index"></span> 
</p>
Values before function changed :  Checking if <br>
Available: [<span id="display_index1">0</span>]  > 
Max : [<span id="display_index2">0</span>]
</fieldset>
<!-- *************** End of Main Function *******************-->

您所做的可能是字符串-> "3"answers"10"的比较。因此，您应该使用parseInt函数将它们解析为数字。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

正如@ fracry在评论中提到的;当比较值时，您将希望使用数字，而不是字符串。使用parseInt(value, radix)使字符串成为整数(第二个参数，基数，是强制parseInt将该值视为小数)

例如:

if (parseInt(document.getElementById('available').value, 10) > parseInt(max, 10)) {

完整代码:

// (not important) simply for knowing if 'user' changed the value of 'available'.
var ref =0;
function function_a(max){
//  (not important) for output reference only. *************************************
		document.getElementById('display_index').innerHTML = (parseInt(max,10) < parseInt(document.getElementById('available').value,10));
		document.getElementById('display_index1').innerHTML = document.getElementById('available').value;
        document.getElementById('display_index2').innerHTML = max;
//  (not important) for output reference only. *************************************
// core function start: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	if (parseInt(document.getElementById('available').value,10) > parseInt(max,10)){
		document.getElementById('available').value = max;
		document.getElementById('display_available').innerHTML = max;
	}
	
	document.getElementById('display_init').innerHTML = max; 
	document.getElementById('available').max = max; 
	
	if(ref != 1 )
	{ 
		document.getElementById('available').value = max;
		document.getElementById('display_init').innerHTML = max;
	}
// core function end ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	
}
function function_b(ava){
	ref = 1; 
	document.getElementById('display_init').innerHTML = ava;
	
	if (parseInt(ava,10) > parseInt(document.getElementById('max').value,10)){
		document.getElementById('available').value = document.getElementById('max').value;
	}
}
<!-- *************** Output for reference *******************-->
Output : <b><span id="display_available">0</span> / <span id="display_init">0</span></b></p>
<p><label>Available : </label>
<input type="number" id="available" min="0" max="0" value="0" onchange="ref = 1; function_b(this.value);">
</p>
<p><label>Max Value: </label>
<input type="number" id="max" min="0" max="99999" value="0" onchange="function_a(this.value);">
</p>
<!-- *************** End of Output for reference *******************-->
<!-- *************** Main Function *******************-->
<fieldset>
<p>
Compare result: <span id="display_index"></span> 
</p>
Values before function changed :  Checking if <br>
Available: [<span id="display_index1">0</span>]  > 
Max : [<span id="display_index2">0</span>]
</fieldset>
<!-- *************** End of Main Function *******************-->

如果您不想使用parseInt，请考虑使用- 

var three = '3';
var ten = '10';
if(three-ten>0)//3-10===-7
相关文章：