0

I am super new to coding and having a difficult time with some of the logic. I asked another question last night and the community was really helpful (Thanks!), so I thought I'd try it again. `

I am trying to make an program that collects the user's email and first name. I want to check that there is something entered in each of the boxes on the form and, in order to ensure they entered their email address correctly, that emailAddress1 is the same as emailAddress2.

I have defined a "var errorMessage = "";" and if there is error at any point, it redefines a new errorMessage based on the mistake the user made on the form.

The problem, I think is with the second if-else statement. I thought that if the "errorMessage = "";" still, it would submit the form. However, no matter what it's executing the else statement and I'm getting an alert of an empty error message.

Why, if errorMessage = "", is it running the else statement and skipping over the if statement that uses errorMessage = "" as the condition?

"use strict";

var $ = function(id) {
    return document.getElementById(id);
};

var joinList = function() {
    var emailAddress1 = $("email_address1").value;
    var emailAddress2 = $("email_address2").value; 
    var firstName = $("first_name").value;
    var errorMessage = "";

    // validate the entries
    if (emailAddress1 == "") {
     errorMessage = "First email address entry required";
        $("email_address1").focus();
    } else if (emailAddress2 == "") {
     errorMessage = "Second email address entry required";
     $("email_address2").focus();
    } else if (emailAddress2 != emailAddress1) {
     errorMessage = "Email address entries must match";
     $("email_address2").focus();
    } else if (firstName == "") {
     errorMessage = "First name entry required";
     $("first_name").focus();
    }

    // submit the form if all entries are valid
    // otherwise, display an error message
    if (errorMessage = "") {
        $("email_form").submit(); 
    } else {
     alert(errorMessage);
    }
};

window.onload = function() {
    $("join_list").onclick = joinList;
    $("email_address1").focus();
};
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title> Join Email List</title>
    <link rel="stylesheet" href="email_list.css">
    <script src="email_list.js"></script>
</head>
<body>
    <main>
        <h1>Please join our email list</h1>
        <form id="email_form" name="email_form" action="join.html" method="get">
            <label for="email_address1">Email Address:</label>
            <input type="text" id="email_address1" name="email_address1"><br>

            <label for="email_address2">Re-enter Email Address:</label>
            <input type="text" id="email_address2" name="email_address2"><br>

            <label for="first_name">First Name</label>
            <input type="text" id="first_name" name="first_name"><br>

            <label>&nbsp;</label>
            <input type="button" id="join_list" value="Join our List">
        </form>
    </main>
</body>
</html>

**

Ashley Sullivan
  • 41
  • 1
  • 5
  • 1
    Do you know the difference between = and == and === – epascarello Sep 07 '18 at 14:34
  • 2
    Change ```if (errorMessage = "")``` to ```if (errorMessage == "")``` – MysterX Sep 07 '18 at 14:34
  • `===` is for comparison, `=` is for assignment. By using `if (errorMessage = "")` instead of `if (errorMessage === "")` you are assigning a new value to errorMessage, instead of comparing the value of errorMessage, which will always trigger the else clause. – Shilly Sep 07 '18 at 14:37
  • @shilly Thank you for your response! I feel stupid! – Ashley Sullivan Sep 07 '18 at 15:05

2 Answers2

0

So you have a typo in your code where you are not comparing, you are setting the variable equal to an empty string. And an empty string is a falsy value

So your code is basically this

errorMessage = "";
if (errorMessage) {
} else {
}

Using a tool like jshint, jslint, eslint, etc build into your IDE will help you catch these typos. So alter your code to do the correct comparison. 

if (errorMessage === "") {
epascarello
  • 204,599
  • 20
  • 195
  • 236
  • @MysterX Thank you so much for your responses! That is an error that I haven't made before and, for some reason, couldn't see no matter how many times I read through the code. I am going to look into a tool like jshint to help me catch those typos because I spent WAY too long staring at that. Thanks again. I won't do that again! – Ashley Sullivan Sep 07 '18 at 15:05
0

I'm not sure if you can extract values form inputs this way. email_address1 is element id so you must refer to it with hashtag on the beginning. Proper way in jQuery to do this $("#email_address1").val()

Difference between =, == and === is quite important.

let testVariable = 123; // only assigns value to a variable

Difference between = and == is quite obvious. Between == and === is little bit more complicated.

== operator compares only values and does not recognize data types but === recognizes them. What it means to to you?

Lets say than you have variable testNumber with assigned value 123 as a number and variable textText with assigned value "123"(notice the quotes).

If you compare them with == expression returns true but if you compare them with === expression returns false.

let testNumber = 123;
let testText = "123";

As you can see variable testText is in doublequotes which means it's datatype is String. String is just normal text. But testNumber variable has datatype Integer. Integer is just normal number. Content of these two variables does not differ but datatypes does.

testNumber == testText //true - same content, different datatype we ignore that
testNumber === testTExt // false - same content, different datatype but now we consider it

I hope I helped you at least a little bit. :)

Edit: Also i suggest you to open developer tools(F12) in chrome and check console. You can see errors in there. It helps you a lot.

Jakub
  • 143
  • 8