我有JavaScript值比较错误（例如3＆gt; 10返回true）

Question

我一直在为网页编写一个功能，应该执行以下操作：

1. 我可以设置最大值;
2. 我可以设置不得大于最大值的可用值;
3. 如果我永远不会更改＆＃39;可用＆＃39;，它将始终与＆＃39; max＆＃39;;
相同
4. 当我调低＆＃39; max＆＃39;时，＆＃39; max＆＃39; ＆LT; ＆＃39;可用＆＃39;，＆＃39;可用＆＃39;会因为“最大”而下降（这是规则2）;

我的问题是

1. 当我设置＆＃39;可用＆＃39;少于10，当我调整最多＆＃39; max＆＃39;至 10以上，＆＃39;可用＆＃39;将突然设置为“最大”。出乎意料;
2. 当我设置＆＃39;可用时，会出现同样的事情。 10到100之间，当我调整“最大”时超过100，＆＃39;可用＆＃39;将突然设置为“最大”。意外地也是;

（您尝试的错误条件之一）   - 在网页上：

1. 设置＆＃39; max＆＃39;到7（不论少于10）;
2. 设置＆＃39;可用＆＃39;至少不超过＆＃39; max＆＃39;;
3. 更改＆＃39; max＆＃39;大于10的任何东西;

- ＆GT; ＆＃39;可用＆＃39;将改为等于＆＃39; max＆＃39;并比较结果是＆＃39; TRUE＆＃39;

任何人都可以告诉我我的代码有什么问题。谢谢。 我试过3台机器。

＆＃13;
＆＃13;
// (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;
	}
}
＆＃13;
<!-- *************** 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 *******************-->
＆＃13;
＆＃13;
＆＃13;

Answer 1

你所做的是比较字符串 - ＆gt; ＆＃34; 3＆＃34;和＆＃34; 10＆＃34;。所以你应该使用parseInt函数将它们解析为数字。

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

Answer 2

正如@Frédéric在评论中提到的那样;比较值时，您需要使用数字，而不是字符串。使用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 *******************-->

Answer 3

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

var three = '3';
var ten = '10';
if(three-ten>0)//3-10===-7