title: How to fix to make it when Image is clicked, Javascript will get the Number instead?
body: <p>So I'm doing a project wherein I have buttons with image for each and when I click them, it will go to a blank div.span. <code>&lt;button class="number"&gt;&lt;img src="img/1.png" /&gt;1&lt;/button&gt;</code> going to <code>&lt;div id="numberPad"&gt; &lt;div id="screen"&gt;&lt;span&gt; &lt;/span&gt;&lt;/div&gt;..</code>
  The problem is my javascript, I just want when I click the image, the image will go to that div carrying the value of "1" so that when I submit it, only the number "1" will be read by the database. Everything is working if I don't have image on it, but when I tried putting an image, the submit will not click anymore. Should I need to do something in the html image or <p>? or I should change something in the javascript? I just wanna know how "When Image clicked, Javascript will get the Number instead" Please help, thank you!</p>
  
  <pre><code>var numbers     = document.querySelectorAll('.number');
  var screenSpans = document.querySelectorAll('#screen span');
  var submit = document.getElementById('submit');
  var currEmail = document.getElementById('currEmail').innerHTML.replace(/\s/g, '');
  var guess = '';
  var reset;
  
  submit.addEventListener('click', function(){
  reset = 0;
  for (var i = 0; i &lt; screenSpans.length; i++) {
  
      // Catch if they have not entered enough digits
      if (screenSpans[i].innerHTML == ''){
          errorModal.className = 'modal';
          setTimeout(function(){
              errorModal.className = 'modal hide';
          }, 4000);
  
      } else {
          guess = guess+screenSpans[i].innerHTML;
          if (guess.length &gt;= 6 &amp;&amp; guess.length &lt;= 12){
              $.ajax({
                    url: "submit.php",
                    method: "POST",
                    data: { guess: guess, email: currEmail }
              });
  
              lastModal.className = 'modal';
              main.className = 'hide';
          }
      }
  };
  guess = '';
  });
  
  for (var i = numbers.length - 1; i &gt;= 0; i--) {
  numbers[i].addEventListener('click', function(){
      reset = 0;
      nextSpan(this.innerHTML);
  });
  };
  
  function nextSpan (currNumber){
  for (var i = 0; i &lt; screenSpans.length; i++) {
      if (screenSpans[i].innerHTML == '' &amp;&amp; reset == 0){
          screenSpans[i].innerHTML = currNumber;
          reset = 1;
      }
  };
  }
  </code></pre>