Question

我已经设置了一个用户输入框来输入一个数字（1到3），以显示我网站上的许多常见问题解答。我还想使用表单验证来通知用户他们已将输入框留空。数组使用用户输入打印得很好，但是当输入框留空时，表单验证不会发出警报。

这是HTML：

<div id="block3"><br/><br/>
        <a name="FAQs"><img id="img2" src="pic2.JPG" alt="Computer" />
        <h2>FAQs</h2></a>
            <p id="p01">
            Enter a number (up to 3):
            <input type="text" id="FAQS_list" placeholder="Enter Number Here" />, and
            <button value="Click" onclick="listFAQS()" onSubmit="return validateForm()">Click</button> to see that many Frequently Asked Questions.<br/><br/><br/></p>
        <p id="FAQS"></p>
        <script src="expExternal.js" type="text/javascript"></script>

这是Javascript

     function listFAQS() {var arrayFAQ = ["FAQ1", "FAQ2", "FAQ3"];

var n = document.getElementById('FAQS_list').value;
var x = 0;
  var text = "";
  while (x < n) {
text += arrayFAQ[x] + "<br>";
x++;}
document.getElementById('FAQS').innerHTML = text;
}
// Form Validation
function validateForm() {
var y = document.getElementById("FAQS_list").value;
if (y == "") {
    alert("Please enter a number.");
    return false;
}
}

非常感谢任何帮助！

Answer 1

首先，你必须在while循环语句之前或之后控制arrayFAQ的大小，否则你的列表中包含额外的n-3个 undefined 。

TakePhoto()

如果要向阵列arrayFAQ添加新元素并将其全部显示，

后添加一个if块

   while ( n <= arrayFAQ.length && x < n ) {
         text += arrayFAQ[x] + "<br>";
         x++;
    }

像这样

var n = document.getElementById('FAQS_list').value;

使用数组和用户输入进行表单验证

1 个答案: