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>

在JavaScript中调用函数以返回HTML

4 个答案: