Calling a Function in JavaScript to Return HTML

Question

I am trying to use a function checkLength to test whether a user-entered number is 16 digits long. If it is 16 digits, I would like to continue my function main ; otherwise I want to output an error message "Please enter a 16-digit number" . My code is below:

 function main() { "use strict"; // set variable for user-entered number var userNum = document.getElementById("userNum"), // use that variable to initialize array array = [userNum.value], // convert array to string values = array.toString(); // call function "checkLength" with parameter "values" checkLength(values); // more code below that is excluded for simplification } function checkLength(x) { "use strict"; if (x.length !== 16) { return document.getElementById("output").innerHTML = "Please enter a 16-digit number."; } else { return false; } }

The problem with this code is that every-time it executes, I get the output "Please enter a 16-digit number." , even when I enter a 16 digit number.

I have tried debugging this for several hours and just can't determine where I'm going wrong. I'm not necessarily looking for a solution, but just a general direction of where I should be looking (improper scope, return statements, etc.). I greatly appreciate your assistance!

Answer 1

Here I can see that once the output is set when entering the digit which is not 16 digits long and it persists in the DOM.

I assume that main() is called on any event of the textbox or any button.

The solution is you need to reset the "output" element if the input is 16 digits long.

Please change your checkLength function as given below,

function checkLength(x) {
    "use strict";
    if (x.length !== 16) {
         return document.getElementById("output").innerHTML = "Please enter a 16-digit number.";
    }
    else {
        //Added below line of code.
        document.getElementById("output").innerHTML="";
        return false;
    }
}

=====================================

Another improvement should be- use "length" property of text.

Use length property get the length of a value of textbox as given below,

function main() {
    "use strict";
    // set variable for user-entered number
    var userNum = document.getElementById("userNum");

    //variable to hold length of input box    
     inputLength = userNum.value.length;

    // call function "checkLength" with parameter "values"
    checkLength(inputLength);

    // more code below that is excluded for simplification 
}

Answer 2

As in other answer by @Parth Lukhi you have to rest html on checkLength and also you have to put condition like if(!checkLength(values)) then it should return and not execute further.

 function main() { "use strict"; // set variable for user-entered number var userNum = document.getElementById("userNum"), // use that variable to initialize array array = [userNum.value], // convert array to string values = array.toString(); // call function "checkLength" with parameter "values" if(!checkLength(values)) return; // more code below that is excluded for simplification } function checkLength(x) { "use strict"; if (x.length !== 16) { document.getElementById("output").innerHTML = "Please enter a 16-digit number."; return true; } else { return document.getElementById("output").innerHTML = ""; return false; } }

Answer 3

 function main() { "use strict"; var a = document.getElementById("userNum").value; checkLength(a); } function checkLength(x) { "use strict"; if (x.length != 16) { return document.getElementById("output").innerHTML = "Please enter a 16-digit number."; } else { document.getElementById("output").innerHTML = " entered value is 16 digit"; } }

 <input type="text" id="userNum" value="Mickey are you ?"> <button onclick="main()">click me</button><div id="output"></div>

Hope this helps you :)

Answer 4

it is because your checkLength() return only false and no html message written

 function main() { "use strict"; // set variable for user-entered number var userNum = document.getElementById("userNum"), // use that variable to initialize array array = [userNum.value], // convert array to string values = array.toString(); // call function "checkLength" with parameter "values" checkLength(values); // more code below that is excluded for simplification } function checkLength(x) { "use strict"; var message, isValid = false; if (x.length !== 16) { message = "Please enter a 16-digit number. (" + x.length + ")"; } else { isValid = true; message = "Correct: " + x; } document.getElementById("output").innerHTML = message; return isValid; }

 <input type="number" id="userNum" oninput="main()"> <p id="output"> 0 </p>