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

Question

I'm working on an assignment and need to validate multiple inputs. I have created multiple functions and am having trouble calling each one. The first one is the only one that will call. The other two will just hang and do nothing.

If I do a single function call for oninput at the form tag it works. Just that it automatically calls the function and all validations. This causes all the prompts to come out at the same time which I don't want. This is why the oninput call is being done at the input tag.

HTML:

    <div id="nameValidate"></div>
    <label for="name">Name:</label>
    <input type="text" id="nameID" 
        oninput="nameValidation()"/> <br />

    <div id="emailValidate"></div>
    <label for="email">Email:</label>
    <input type="text" id="emailID" 
        oninput="emailValidation()"/> <br />

    <div id="phoneValidate"></div>
    <label for="phone">Phone Number:</label>
    <input type="number" id="phoneID" 
        oninput="phoneValidation()"/>

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

Answer 1

Firstly , your elseif has brackets but the condition is empty. Check your console, it should be showing a syntax error because:

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

is not valid syntax. Turn it into an else .

Secondly , the function:

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

does not exist on document , however, getElementById does.

Finally , ensure that you use the console to help you debug your code.

Answer 2

Let's back up a minute and break some very bad habits that someone who doesn't know any better is teaching you.

Do not set up events using inline HTML event attributes (ie. onclick ). This is a 25+ year old technique that persists today because people just copy/paste it and it seems to work in many cases. However, there are a number of very good reasons not to use this ancient technique that just will not die. Separate your JavaScript from your HTML and use modern, standards-based approaches to event handling with .addEventListener() .

You've also mis-capitalized .getElementById() when you were getting the phone data and this would cause an error in your code that would prevent it from continuing. Always work with your developer tools (F12) open and the Console tab showing as this is where error messages will appear.

Next, only query the DOM once for elements that you'll need over and over. This means remove all the document.getElementById() lines from inside the functions and move them so they just get executed only once.

And, don't make references to properties of DOM elements, make the references to the element itself. This way, you scan the document just once to get the element reference, but then you can get any property you like when you need it without having to scan the document for the same element again.

Next, don't use .innerText as it is non-standard. Use .textContent instead.

And, don't use self-terminating tag syntax (ie. <br /> , <input /> ). Here's why.

So, here's what your code should look like:

 // Get references to the elements you'll be working with just once 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"); // Set up your event handlers in JavaScript, not HTML userName.addEventListener("input", nameValidation); email.addEventListener("input", emailValidation); phone.addEventListener("input", phoneValidation); function nameValidation() { if (this.value.length < 3) { nameValidate.textContent = "Please enter your full name."; } else { nameValidate.textContent = ""; } } function emailValidation() { // Check the last 4 characters of the input if ((this.value.substr(this.value.length - 4) !== ".com") && email.value.length < 5) { emailValidate.textContent = "Please enter your full email address."; } else { emailValidate.textContent = ""; } } function phoneValidation() { if (phone.value == "" || phone.value.length < 10) { phoneValidate.textContent = "please enter your full phone number."; } else { phoneValidate.textContent = ""; } } 

 <div id="nameValidate"></div> <label for="name">Name:</label> <input type="text" id="nameID"> <br> <div id="emailValidate"></div> <label for="email">Email:</label> <input type="text" id="emailID"> <br> <div id="phoneValidate"></div> <label for="phone">Phone Number:</label> <input type="number" id="phoneID"> 

Finally, as a professional technology trainer for over 25+ years, I would strongly advise you to inform whoever is teaching you these outdated techniques that they are doing you and anyone else they are teaching a disservice. Modern web development is hard-enough without having to unlearn bad habits brought on by those who don't know any better.