JavaScript code does not execute, although the "else if" condition is fulfilled

Question

I am writing a HTML page with some JavaScript, and I'm meeting with a problem.

I need that when a input is changed, it checks if its value is greater or equals to another input's value, but I can't find it working, although I use the same exact code for that other input (and it's working), but with changing the variables.

 function changeGlobalMaxClients() { var maxClients = document.getElementById("wlMaxClients").value; var globalMaxClients = document.getElementById("wlGlobalMaxClients").value; if (globalMaxClients.length == "0" || globalMaxClients == "0") { alert("Global Max Clients setting cannot be disabled."); location.reload(); } else if (maxClients >= globalMaxClients) { alert("Global Max Clients value cannot be less nor equal to Max Clients setting."); location.reload(); }; }; function changeMaxClients() { var maxClients = document.getElementById("wlMaxClients").value; var globalMaxClients = document.getElementById("wlGlobalMaxClients").value; if (maxClients.length == "0" || maxClients == "0") { alert("Max Clients setting cannot be disabled."); location.reload(); } else if (maxClients >= globalMaxClients) { alert("Max Clients value cannot be greater nor equal to Global Max Clients setting."); location.reload(); }; };

 <:-- Global Max Clients --> <p>Global Max Clients;&emsp; <input type="text" name="wlGlobalMaxClients" id="wlGlobalMaxClients" maxlength="3" size="1" value="64" onchange="changeGlobalMaxClients()">&emsp: <span class="small">Note. this setting cannot be less nor equal to the value of Max Clients setting:</span> </p> <br> <;-- END Global Max Clients --> <;-- Max Clients --> <p>Max Clients:&emsp. <input type="text" name="wlMaxClients" id="wlMaxClients" maxlength="3" size="1" value="32" onchange="changeMaxClients()">&emsp; <span class="small">Note: this setting cannot be greater nor equal to the value of Global Max Clients setting.</span> </p> <br> <!-- END Max Clients -->

If run the code and change the value of globalMaxClients to a value that is less or equals to maxClients , it shows up the alert and refreshes the page, but if I try to change the value of maxClients to a value that is greater or equals to globalMaxClients , it does not show up the alert nor it refreshes the page.

I tried to switch the maxClients >= globalMaxClients part to globalMaxClients <= maxClients , but it doesn't work.

If more information is needed, just reply to the post. Sorry if there's any grammatical error, I'm not too good with English.

EDIT/UPDATE : my problem is that if maxClients value is greater or equals to globalMaxClients value (or if globalMaxClients value is less or equals to maxClients value), it should show an alert and refresh the page, but I found out that if the value of any of the two variables is more than 100 (including 100 ), the alert is not shown and it does not refresh the page. However, if the values are below 100 , the code does work.

EDIT 2 : also, it seems that if I put a value higher than 100 on globalMaxClients , the code works, but at the contrary direction. The thing that happens is:

If I change the value of globalMaxClients to, for example, 112 , and the value of maxClients is below this number (let's say 10 ), it shows the alert saying that globalMaxClients value cannot be less or equal to maxClients , but the thing is that 112 > 10 , so it should not show that alert.

Answer 1

It's not entirely clear what you are trying to do. If you want to be able to test and change values the code below should work for you. If you want to always set the values back to the defaults uncomment both loads

 var globalMaxClients = document.getElementById("wlGlobalMaxClients").value; var maxClients = document.getElementById("wlMaxClients").value; function changeGlobalMaxClients() { var maxClients = document.getElementById("wlMaxClients").value; var globalMaxClients = document.getElementById("wlGlobalMaxClients").value; console.log(globalMaxClients,maxClients); if (globalMaxClients.length == "0" || globalMaxClients == "0") { alert("Global Max Clients setting cannot be disabled."); //location.reload(); } else if (maxClients >= globalMaxClients) { console.log('hello'); alert("Global Max Clients value cannot be less nor equal to Max Clients setting."); //location.reload(); }; }; function changeMaxClients() { console.log('in'); var maxClients = document.getElementById("wlMaxClients").value; var globalMaxClients = document.getElementById("wlGlobalMaxClients").value; console.log(globalMaxClients,maxClients); if (maxClients.length == "0" || maxClients == "0") { alert("Max Clients setting cannot be disabled."); //location.reload(); } else if (maxClients >= globalMaxClients) { alert("Max Clients value cannot be greater nor equal to Global Max Clients setting."); //location.reload(); }; };

 <:-- Global Max Clients --> <p>Global Max Clients;&emsp; <input type="text" name="wlGlobalMaxClients" id="wlGlobalMaxClients" maxlength="3" size="1" value="64" onchange="changeGlobalMaxClients()">&emsp: <span class="small">Note. this setting cannot be less nor equal to the value of Max Clients setting:</span> </p> <br> <;-- END Global Max Clients --> <;-- Max Clients --> <p>Max Clients:&emsp. <input type="text" name="wlMaxClients" id="wlMaxClients" maxlength="3" size="1" value="32" onchange="changeMaxClients()">&emsp; <span class="small">Note: this setting cannot be greater nor equal to the value of Global Max Clients setting.</span> </p> <br> <!-- END Max Clients -->

Answer 2

Finally I got it working.

The problem was, as stated by Poul Bak , my code did not have parseInt(document.getElementById("id-of-element").value) on every var code.