如何使用DOM和Javascript调用多个函数

我正在做作业，需要验证多个输入。我创建了多个函数，但调用每个函数都有困难。第一个是唯一一个会打电话的。另外两个会被绞死，什么也不做

如果我在表单标记处对oninput执行单个函数调用，它就会工作。只是它会自动调用函数和所有验证。这会导致所有提示同时出现，这是我不希望看到的。这就是为什么在输入标签上进行oninput调用

HTML:

姓名：


电邮：


电话号码：

Javascript

    function nameValidation() {
        var name = document.getElementById("nameID").value;

        if (name.length < 3) {
            document.getElementById("nameValidate").innerText = "Please 
                enter your full name.";
        }
        else if (name.length > 3) {
            document.getElementById("nameValidate").innerText = "";
        }
    }

    function emailValidation() {
        var email = document.getElementById("emailID").value;

        if (!email.match(".com") && email < 5) {
            document.getElementById("emailValidate").innerText = "Please 
                enter your full email address.";
        }
        else {
            document.getElementById("emailValidate").innerText = "";
        }
    }

    function phoneValidation() {
        var phone = document.getelementbyid("phoneID").value;

        if (phone == "" || phone.length < 10) {
            document.getelementbyid("phoneValidate").innertext = "please 
                enter your full phone number.";
        }
        else if () {
            document.getelementbyid("phoneValidate").innertext = "";
        }
    }

函数名验证（）{
var name=document.getElementById（“nameID”）.value；
如果（名称长度<3）{
document.getElementById（“nameValidate”）.innerText=“请
输入您的全名。“；
}
否则如果（name.length>3）{
document.getElementById（“nameValidate”）.innerText=“”；
}
}
函数验证（）{
var email=document.getElementById（“emailID”）.value；
如果（！email.match（“.com”）&&email<5）{
document.getElementById（“emailValidate”）.innerText=“请
输入您的完整电子邮件地址。“；
}
否则{
document.getElementById（“emailValidate”）.innerText=“”；
}
}
函数phoneValidation（）{
var phone=document.getelementbyid（“phoneID”）.value；
if（phone==“”| | phone.length<10）{
document.getelementbyid（“phoneValidate”）.innertext=“请
输入您的完整电话号码。“；
}
如果（）{
document.getelementbyid（“phoneValidate”）.innertext=“”；
}
}

首先，您的

elseif

有括号，但条件为空。检查控制台，它应该显示语法错误，因为：

} else if () {
    document.getelementbyid("phoneValidate").innertext = "";
}

语法无效。将其转换为

其他

其次，功能：

document.getelementbyid("phoneValidate").innertext = "";

在

文档

上不存在，但是，

getElementById

存在

---

最后，确保使用控制台帮助调试代码。

首先，您的

elseif

有括号，但条件为空。检查控制台，它应该显示语法错误，因为：

} else if () {
    document.getelementbyid("phoneValidate").innertext = "";
}

语法无效。将其转换为

其他

其次，功能：

document.getelementbyid("phoneValidate").innertext = "";

在

文档

上不存在，但是，

getElementById

存在

---

最后，请确保您使用控制台来帮助调试代码。

让我们往后退一分钟，改掉一些非常坏的习惯，这些坏习惯是一些不太懂的人教给您的

不要使用内联HTML事件属性设置事件（例如，

onclick

）。这是一项已有25年以上历史的技术，至今仍在使用，因为人们只是复制/粘贴它，而且在许多情况下似乎都有效。然而，有一些非常好的东西是不会死的。将JavaScript与HTML分开，并使用基于标准的现代方法来处理

.addEventListener（）

在获取手机数据时，您还错误地将

.getElementById（）

大写，这将导致代码中出现错误，从而阻止其继续。始终在开发人员工具（F12）打开且控制台选项卡显示的情况下工作，因为这将显示错误消息

接下来，只需在DOM中查询一次需要的元素。这意味着从函数内部删除所有

document.getElementById（）

行，并移动它们，使它们只执行一次

而且，不要引用DOM元素的属性，而是引用元素本身。通过这种方式，只需扫描文档一次即可获得元素引用，但在需要时可以获得任何属性，而无需再次扫描文档中的同一元素

接下来，不要使用

.innerText

，因为它是非标准的。改用

.textContent

并且，不要使用自终止标记语法（即

，

）

因此，您的代码应该是这样的：

//只获取一次将要使用的元素的引用
var userName=document.getElementById（“nameID”）；
var nameValidate=document.getElementById（“nameValidate”）；
var email=document.getElementById（“emailID”）；
var emailValidate=document.getElementById（“emailValidate”）；
var phone=document.getElementById（“phoneID”）；
var phoneValidate=document.getElementById（“phoneValidate”）；
//用JavaScript而不是HTML设置事件处理程序
用户名.addEventListener（“输入”，名称验证）；
email.addEventListener（“输入”，emailValidation）；
phone.addEventListener（“输入”，电话验证）；
函数名验证（）{
如果（此.value.length<3）{
nameValidate.textContent=“请输入您的全名。”；
}否则{
nameValidate.textContent=“”；
}
}
函数验证（）{
//检查输入的最后4个字符
if（（this.value.substr（this.value.length-4）！==“.com”）&email.value.length<5）{
emailValidate.textContent=“请输入您的完整电子邮件地址。”；
}否则{
emailValidate.textContent=“”；
}
}
函数phoneValidation（）{
if（phone.value==“”| | phone.value.length<10）{
phoneValidate.textContent=“请输入您的完整电话号码。”；
}否则{
phoneValidate.textContent=“”；
}
}

姓名：


电邮：


电话号码：

让我们往后退一分钟，改掉一些不太懂的人教给你的坏习惯

不要使用内联HTML事件属性设置事件（例如，

onclick

）。这是一项已有25多年历史的技术，至今仍在使用，因为