title: How to alert the front end user if a button is clicked but an input field was given no value jquery?
body: <p>I'm very new to jquery. I have a game and I've been trying to build.</p>
  
  <p>I asked in a previously question how to execute appending a result value based off a dynamically created input and button element. I was able to succesfully append a result alerting the user based off the input field. </p>
  
  <p>However now I would like to alert the user to keep trying if the user doesn't enter any input, but still clicks the button. </p>
  
  <p>Heres my code..</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#guessCheck').on('click', function () {
      //
      // chose the right inputs
      //
      $(this).prop('disabled', true);
      let highestRating = $('#checkedImageContainer input[type=number]').map(function () {
          return {ele: $(this), val: parseFloat(this.value)};
      }).get().sort(function (a, b) {
          return b.val - a.val;
      })[0].ele;
      $('#third-rule').removeClass('hidden');
      $('#guessImageContainer').removeClass('hidden');
      console.log('removed hidden class on the #highestrated list');
      $('#guessImageContainer').append('&lt;li&gt;&lt;img id="favoriteImage" src="' + highestRating.prev('img').attr('src') + '" name="' + highestRating.prev('img').attr('name') + '"&gt;&lt;input id="guessMyValue" type="text"&gt;&lt;button class="text-center" id="finishButton"&gt;Finish Button&lt;/button&gt;&lt;h2 class="text-center"&gt;Now Guess The Name Of Your Favorite Image&lt;/h2&gt;&lt;/li&gt;');
      registerFinishButtonListener();
  });
  
  function registerFinishButtonListener() {
      $('#finishButton').on('click', function () {
          console.log("finish button clicked");
          let userGuessInput = $('#guessMyValue').val();
          $('#fourth-rule').removeClass('hidden');
          $('#resultContainer').removeClass('hidden');
          //Disable user from clicking the button again
          $(this).prop('disabled', true);
          //If the user guesses right\/\/\/
          if (userGuessInput === $('#favoriteImage').attr('name')) {
  
              $('#resultText').append("You GUESSED RIGHT!!&lt;br&gt; IMAGE = " +
                      $('#favoriteImage').attr('name'))
          }
          //If the user guesses wrong\/\/\/
          else if (userGuessInput != $('#favoriteImage').attr('name')) {
  
              $('#resultText').append("Unfortunately your WRONG!!!&lt;br&gt; Imgae =" + $('#favoriteImage').attr('name'))
          }
          //IF THE USER GIVES NO VALUE\/\/\/
          else if (userGuessInput.val() === 0) {
              //Re enable the button from being clicked because the user still 
              // needs to give the inpuyt field a value
              $(this).prop('disabled', false);
              alert("Make sure you give it your best shot!!LMAO")
          }
      });
  }
  </code></pre>