Search code examples
javascriptfunctiondomevent-handlinggetelementbyid

How can I run an if/else Javascript function through and input field and a button as the event in HTML?

I have a javascript function that I want to connect to and run through my HTML. It’s a simple function that shows an answer (most popular video game) based on the year entered. Now my idea is that this input is passed through an input field in the HTML and the answer appears after a button click as an event. My problem is that I can’t connect this function to my HTML through the input field. in other words, function is ready but I can’t run/apply it still. I have been trying and experimenting with DOM but I keep getting more lost.

In other words, I have the Javascript and and the HTML for what I want to show but there’s a missing step, the HTML code that refers to and actually run the javascript code.

here's the beginning and end of the function for convenience since it starts from the the year 1950 till 2020;


mostPopularGame = year => {

const submitBtn = document.getElementById("yearInput");

if (year <= 0 || year > 2020 ) {
return 'Please enter a valid year!'
} else if ( year >= 1950 && year <= 1970) {
return 'Starting 1950 till 1969, early computer games on which everything we play now is based were developed as a hobby on university mainframe computers.'
} else if ( year === 1971 ) {
  return 'The most popular video game that year was Computer Space'
else {
return 'please enter a year starting 1950'
}
};

Now this is my HTML, I'm aware there is code missing and that it might look a little confusing (sorry for that) since I'm a little bit lost when it comes to DOM, event handlers and event listeners. I have been trying to get it done for 4 days but I removed the code that I suspected wouldn't help. As you can see, my code is inside a form that includes a text input field for years and another input as a button for the event.

<form>
          <h2> Please enter year here </h2>
         
      <input id="yearInput" type="text"/>
            <p> </p>
            
            <input type="button" id="result"
                   value="check"
                   onclick="mostPopularGame()">
                   </form>

Sorry for the long question but I'm quite desperate for an answer to this. Thanks in advance.

Solution

  • if i understood you well then you had to do something like this 

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <form>
    <h2> Please enter year here </h2>

    <input id="yearInput" type="text" />
    <p> </p>

    <input type="button" id="result" value="check" onclick="notify()">
  </form>
  <script>
    mostPopularGame = () => {

      const submitBtn = document.getElementById("yearInput");
      let year = submitBtn.value
      if (year <= 0 || year > 2020) {
        return 'Please enter a valid year!'
      } else if (year >= 1950 && year <= 1970) {
        return 'Starting 1950 till 1969, early computer games on which everything we play now is based were developed as a hobby on university mainframe computers.'
      } else if (year === 1971) {
        return 'The most popular video game that year was Computer Space'
      } else {
        return 'please enter a year starting 1950'
      }
    };

    notify = () => {
      alert(mostPopularGame())
    }
  </script>
</body>

</html>