CODEWITHSUNDEEP
javascripthtml
froggomad
froggomad

Reputation: 1915

Script not targeting certain elements by ID, works fine on others

If one of the identified DOM elements is empty, change the background color to red, if not, change to transparent. Why does this not work on the phone or position fields?

I have another script targeting elements like document.forms["pledge"]["position"] which also works on all other fields but phone and position. What am I missing?

function checkFilled() {
    var fname = document.getElementById("fname"),
        lname = document.getElementById("lname"),
        email = document.getElementById("email"),
        country = document.getElementById("country"),
        zip = document.getElementById("zip"),
        position = document.getElementById("position"),
        phone = document.getElementById("phone");
    ;    
    if (fname.value != "") {
        fname.style.backgroundColor = "transparent";
    } else {
        fname.style.backgroundColor = "red";
    }

    if (lname.value != "") {
        lname.style.backgroundColor = "transparent";
    } else {
        lname.style.backgroundColor = "red";
    }

    if (email.value != "") {
        email.style.backgroundColor = "transparent";
    } else {
        email.style.backgroundColor = "red";
    }

    if (country.value != "") {
        country.style.backgroundColor = "transparent";
    } else {
        country.style.backgroundColor = "red";
    }

    if (zip != undefined && zip.value != "") {
        zip.style.backgroundColor = "transparent";
    } else {
        zip.style.backgroundColor = "red";
    }

    if (position.value != "") {
        position.style.backgroundColor = "transparent";
    } else {
        position.style.backgroundColor = "red";
    }

    if (phone.value != "") {
        phone.style.backgroundColor = "transparent";
    } else {
        phone.style.backgroundColor = "red";
    }
}

HTML

<form name="pledge" id="form">
    <input class="input" type="text" id="fname" name="first_name" placeholder="First Name" onchange="checkFilled()">
    <input class="input" type="text" id="lname" name="last_name" placeholder="Last Name" onchange="checkFilled()">
    <input class="input" type="text" id="position" name="user_position" placeholder="Position in Government" onchange="checkFilled()">
    <input class="input" type="text" id="country" name="user_country" placeholder="Country" onchange="checkFilled()">
    <input class="input" type="email" id="email" name="user_email" placeholder="Official Government Email" onchange="checkFilled()">
    <input class="input" type="number" id="phone" name="user_phone" placeholder="Office Phone Number" onchange="checkFilled()">
    <input class="input full-width" type="submit" value="Take The Pledge!">
</form>

https://codepen.io/froggomad/pen/maRJxr

The script was failing because it was trying to handle the zip element which doesn't exist on this form. I mistakenly tried to handle that condition by checking to see if it existed and contained a value and then changing its background color if both conditions weren't true (OOPS)

Working Code

if (zip != undefined) {
  if (zip.value != "") {
    zip.style.backgroundColor = "transparent";
  } else {
    zip.style.backgroundColor = "red";
  }
}

Upvotes: 2

Views: 38

Answers (1)

Marc Baumbach
Marc Baumbach

Reputation: 10473

Your form does not have an element with the zip id and is therefore throwing errors trying to modify the zip style property in the else statement of your zip check since it is null. Since that error causes the function to fail, the position and phone based if statements don't execute.

If you remove the if/else block checking the zip variable, both of those fields work again.

Upvotes: 2

Related Questions