在 JavaScript 中调用函数以返回 HTML

Question

我正在尝试使用函数checkLength来测试用户输入的数字是否为 16 位数字。 如果是 16 位，我想继续我的函数main ； 否则我想输出错误消息“请输入 16 位数字” 。 我的代码如下：

 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; } }

这段代码的问题是每次执行时，我都会得到输出“请输入 16 位数字”。 ，即使我输入了 16 位数字。

我已经尝试调试了几个小时，但无法确定我哪里出错了。 我不一定在寻找解决方案，而只是我应该寻找的一般方向（不正确的范围、返回语句等）。 我非常感谢您的帮助！

Answer 1

在这里我可以看到，当输入不是 16 位长的数字时设置了输出，并且它会保留在 DOM 中。

我假设 main() 在文本框或任何按钮的任何事件上被调用。

解决方案是，如果输入长度为 16 位，您需要重置“输出”元素。

请更改您的 checkLength 函数，如下所示，

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;
    }
}

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

另一个改进应该是使用文本的“长度”属性。

使用 length 属性获取文本框值的长度，如下所示，

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

正如@Parth Lukhi 的其他答案一样，您必须将 html 放在checkLength ，并且您还必须放置像if(!checkLength(values))然后它应该return而不是进一步执行。

 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>

希望这对你有帮助:)

Answer 4

这是因为您的checkLength()只返回false并且没有写入 html 消息

 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>