Javascript - Need help converting user input from form into HTML

Question

Alright, so I'm a bit of a beginner and I am trying to convert user input into a program that calculates what day the user was born on based on their input.

The gist of the html code is as follows:

<h3>Please enter your date of birth in this format (MM/DD/YYYY)</h3>

        <form id = "dob-question">
          <input type="text" name="Date of Birth" id="dob-input" value="01/31/1986">
          </input>
          <button type="button" id="submit-button">Submit</button>
        </form>

        <div id="answer"></div>

And the Javascript:

<script>
  function writesDay(d) {
    document.getElementById("answer").innerHTML = "You were born on a " + d;
  }

  var date = new Date();
  var dobInput = document.getElementById("dob-input").value;
  var splitDob = dobInput.split("/");

  var month = parseInt(splitDob[0] - 1);
  var day = parseInt(splitDob[1]);
  var year = parseInt(splitDob[2]);

  date.setFullYear(year, month, day);
  var dayOfWeek = "";

  switch(date.getDay()) {
    case 0: 
      dayOfWeek = "Sunday";
      break;
    case 1:
      dayOfWeek = "Monday";
      break;
    case 2: 
      dayOfWeek = "Tuesday";
      break;
    case 3:
      dayOfWeek = "Wednesday";
      break;
    case 4:
      dayOfWeek = "Thursday";
      break;
    case 5:
      dayOfWeek = "Friday";
      break;
    case 6:
      dayOfWeek = "Saturday";
      break;
  }

  document.getElementById("submit-button").addEventListener("click", writesDay(dayOfWeek));

</script>

My first problem is this: Before hitting the submit button, the code already runs the function and writes out the date from the default input value (Jan 31, 1986). I don't want this to show up until the submit button is clicked. I also want it to change based on what the user inputs and write now it just doesn't. In fact, the submit button really doesn't do anything and I can't figure out why. Help is appreciated!

Answer 1

The first problem is that second argument to addEventListener has to be a function. You're calling the function immediately, not passing a reference to a function.

document.getElementById("submit-button").addEventListener("click", function() {
    writesDay(dayOfWeek);
});

The next problem is that you have to calculate dayOfWeek when the user clicks the button. You're calculating it when the page is initially loaded, so it doesn't get the user's input to the form field. So all that code needs to be inside that function:

 function writesDay(d) { document.getElementById("answer").innerHTML = "You were born on a " + d; } document.getElementById("submit-button").addEventListener("click", function() { var date = new Date(); var dobInput = document.getElementById("dob-input").value; var splitDob = dobInput.split("/"); var month = parseInt(splitDob[0] - 1); var day = parseInt(splitDob[1]); var year = parseInt(splitDob[2]); date.setFullYear(year, month, day); var dayOfWeek = ""; switch (date.getDay()) { case 0: dayOfWeek = "Sunday"; break; case 1: dayOfWeek = "Monday"; break; case 2: dayOfWeek = "Tuesday"; break; case 3: dayOfWeek = "Wednesday"; break; case 4: dayOfWeek = "Thursday"; break; case 5: dayOfWeek = "Friday"; break; case 6: dayOfWeek = "Saturday"; break; } writesDay(dayOfWeek); }); 

 <h3>Please enter your date of birth in this format (MM/DD/YYYY)</h3> <form id="dob-question"> <input type="text" name="Date of Birth" id="dob-input" value="01/31/1986"> </input> <button type="button" id="submit-button">Submit</button> </form> <div id="answer"></div> 

Answer 2

You need to move your code inside the function, so that it is not called when loading. Check another simple way to implement.

 <h3>Please enter your date of birth in this format (MM/DD/YYYY)</h3> <form id = "dob-question"> <input type="date" name="Date of Birth" id="dob-input" value="01/31/1986"> </input> <button type="button" id="submit-button">Submit</button> </form> <div id="answer"></div> <script> document.querySelector('#submit-button').addEventListener('click', function(){ let userInput = document.querySelector("#dob-input"), birthDate = new Date(userInput.value); document.querySelector('#answer').innerHTML = "You born on " + ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][birthDate.getUTCDay()]; }); </script> 

Answer 3

You have only wrapped your writesDay code in a function, the rest of the code will be executed as soon as it loads. You need to execute the code which gets the date etc. when the button is clicked as well.

 function writesDay(d) { document.getElementById("answer").innerHTML = "You were born on a " + d; } function getDayName(date) { var dayOfWeek = ""; switch(date.getDay()) { case 0: dayOfWeek = "Sunday"; break; case 1: dayOfWeek = "Monday"; break; case 2: dayOfWeek = "Tuesday"; break; case 3: dayOfWeek = "Wednesday"; break; case 4: dayOfWeek = "Thursday"; break; case 5: dayOfWeek = "Friday"; break; case 6: dayOfWeek = "Saturday"; break; } return dayOfWeek; } function getDateFromArray(splitDob) { var date = new Date(); var month = parseInt(splitDob[0] - 1); var day = parseInt(splitDob[1]); var year = parseInt(splitDob[2]); date.setFullYear(year, month, day); return date; } function getSplitDob() { var dobInput = document.getElementById("dob-input").value; var splitDob = dobInput.split("/"); return splitDob; } function updateDay() { var splitDob = getSplitDob(); var date = getDateFromArray(splitDob); var day = getDayName(date); writesDay(day); } document.getElementById("submit-button").addEventListener("click", updateDay); 

 <form id = "dob-question"> <input type="text" name="Date of Birth" id="dob-input" value="01/31/1986"> </input> <button type="button" id="submit-button">Submit</button> </form> <div id="answer"></div>