LaVOZs

The World’s Largest Online Community for Developers

'; javascript - Problems with using .preventDefault in my project - LavOzs.Com

Im trying to build a test run for a basic project im working on.

I want the user to use the two forms to enter their day and month of birth and return their star sign. It seemed to be working until I tried using .preventDefault. It still seems to be trying to lad another page and I cant figure out where i went wrong.

Here is the code and feel free to critique me on any of it, Thanks.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Starsign Calc.</title>
  </head>
  <body>
    <form method="get">
      <h3>Enter Your Month and Day of Birth</h3>
      <select name="usermonth" id="usermonth">
        <option value="january">January</option>
        <option value="febuary">Febuary</option>
        <option value="march">March</option>
        <option value="april">April</option>
      </select>
      <input name="userday" id="userday" type="number" min="1" max="31" value="1" />
      <input id="change-placeholder" type="submit" />
    </form>
    <hr />
    <h1>You are a ???????</h1>
    <script type="text/javascript">
          document.getElementById('change-placeholder').addEventListener('click', function(e) {
            e.preventDefault();
            let birthMonth = document.getElementById('usermonth').value;
            let birthDay = document.getElementById('userday').value;

            //is user a Pisces?
            if (birthMonth === 'febuary' && birthDay >= 19 && birthDay <= 28) {
            document.querySelector('h1').innerHTML = "You are a Pisces";
            } else if (userMonth === 'march' && userDay <= 20) {
            document.querySelector('h1').innerHTML = "You are a Pisces";

      }
          };
    </script>
  </body>
</html>

You have not closed ) in your script at the end after }. That's the first syntax error, which needs to be corrected.

Clicking on the button gives me this error:

Uncaught ReferenceError: userMonth is not defined
    at HTMLInputElement.<anonymous> (<anonymous>:12:18)

So you need to correctly define what's happening. So change all user* to birth* in the else part:

if (birthMonth === "febuary" && birthDay >= 19 && birthDay <= 28) {
  document.querySelector("h1").innerHTML = "You are a Pisces";
} else if (birthMonth === "march" && birthDay <= 20) {
  document.querySelector("h1").innerHTML = "You are a Pisces";
}

And finally, you need a final else statement if none matches:

if (birthMonth === "febuary" && birthDay >= 19 && birthDay <= 28) {
  document.querySelector("h1").innerHTML = "You are a Pisces";
} else if (birthMonth === "march" && birthDay <= 20) {
  document.querySelector("h1").innerHTML = "You are a Pisces";
} else {
  document.querySelector("h1").innerHTML = "I am not sure...";
}

So you can see it working.

Complete code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Starsign Calc.</title>
  </head>
  <body>
    <form method="get">
      <h3>Enter Your Month and Day of Birth</h3>
      <select name="usermonth" id="usermonth">
        <option value="january">January</option>
        <option value="febuary">Febuary</option>
        <option value="march">March</option>
        <option value="april">April</option>
      </select>
      <input name="userday" id="userday" type="number" min="1" max="31" value="1" />
      <input id="change-placeholder" type="submit" />
    </form>
    <hr />
    <h1>You are a ???????</h1>
    <script type="text/javascript">
      document
        .getElementById("change-placeholder")
        .addEventListener("click", function (e) {
          e.preventDefault();
          let birthMonth = document.getElementById("usermonth").value;
          let birthDay = document.getElementById("userday").value;

          //is user a Pisces?
          if (birthMonth === "febuary" && birthDay >= 19 && birthDay <= 28) {
            document.querySelector("h1").innerHTML = "You are a Pisces";
          } else if (birthMonth === "march" && birthDay <= 20) {
            document.querySelector("h1").innerHTML = "You are a Pisces";
          } else {
            document.querySelector("h1").innerHTML = "I am not sure...";
          }
        });
    </script>
  </body>
</html>

Working Snippet: JSBin

Alternate Approach

You may listen to the form's onSubmit or submit event instead of the input:submit's click event.

Related
preventDefault() on an <a> tag
How do I remove javascript validation from my eclipse project?
How to use PHP mail function without leaving the actual page it's called from
preventDefault in Safari
Access event to call preventdefault from custom function originating from onclick attribute of tag
Preventdefault not working
Cannot display HTML string
Why check if preventDefault, then preventDefault?
Huge number of files generated for every Angular project