CrystalH February 2016

Get multiple element values to display in text box

I'm having trouble getting the value of each number and operator to display inside the text box (the calculator screen). I think that I probably need to iterate over my val variable somehow as I'm only getting the value of the first button ("1"). I've tried using a for loop which just breaks my code and have tried defining my btns variable with document.getElementsByClassName[0], so that val will also iterate over all the values but am not getting any further.

Code

var btns = document.getElementById("keys");
var val = btns.dataset.value;
var box = document.getElementById("display");

function addToScreen(x) {
  box.value += x;
}

document.body.addEventListener('click', function(e) {
  switch (e.target.dataset.value) {
    case '1':
      console.log('you hit button one');
      addToScreen(val);
      break;
      
    case '2':
      console.log('you hit button two');
      addToScreen(val);
      break;
      
    case '3':
      console.log('you hit button three');
      addToScreen(val);
      break;
      
     case '4':
      console.log('you hit button four');
      addToScreen(val);
      break;
     
     case '5':
      console.log('you hit button five');
      addToScreen(val);
      break;
      
     case '6':
      console.log('you hit button six');
      addToScreen(val);
      break;
      
     case '7':
      console.log('you hit button seven');
      addToScreen(val);
      break;
      
     case '8':
      console.log('you hit button eight');
      addToScreen(val);
      break;
      
     case '9':
      console.log('you hit button nine');
      addToScreen(val);
      break;
      
      case '0':
      addToScreen(val);
            

Answers


Eric February 2016

I would do this with Jquery:

$(document).on('click', '.numbers', function() {
  var data_value = $(this).attr('data-value');

  // do what you want to do with it.

});

You can do the same for the operators.


mottaman85 February 2016

just asign a val variable from var val = e.target.dataset.value;

document.body.addEventListener('click', function(e) {

  var val = e.target.dataset.value; 
  switch (e.target.dataset.value) {      
    case '1':
      console.log('you hit button one');
      addToScreen(val);
      break;

    case '2':
      console.log('you hit button two');
      addToScreen(val);
      break;

    case '3':
      console.log('you hit button three');
      addToScreen(val);
      break;

     case '4':
      console.log('you hit button four');
      addToScreen(val);
      break;

     case '5':
      console.log('you hit button five');
      addToScreen(val);
      break;

     case '6':
      console.log('you hit button six');
      addToScreen(val);
      break;

     case '7':
      console.log('you hit button seven');
      addToScreen(val);
      break;

     case '8':
      console.log('you hit button eight');
      addToScreen(val);
      break;

     case '9':
      console.log('you hit button nine');
      addToScreen(val);
      break;

      case '0':
      addToScreen(val);
      console.log('you hit button zero');
      break;
  }
});

Post Status

Asked in February 2016
Viewed 3,562 times
Voted 9
Answered 2 times

Search




Leave an answer