Retrieve text after clicking a button in calculator project JS

Question

My query: Can you tell me a event through which when I click any button its text should get copied in var buttonText, Ex when I click 8 on calculator, "8" should get copied in the variable buttonText.

I have tried var buttonText = buttons[i].innerText. On the 6th line of my JavaScript code, but seems wrong and it's not working. Please help. I have also used query selector and for loop to get all buttons.

let screen = document.getElementById('screen'); // selects the screen
var buttons = document.querySelectorAll('button'); // selects all the buttons 
let screenValue = ""; // inital value on the screen is empty
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    var buttonText = buttons[i].innerText. //  Gets the text of that button which is clicked 

    if(buttonText == 'X') { // since the cross X sign is * multiplication sign.
      buttonText = '*';
      screenValue += buttonText;
      screen.value = screenValue;
    }
    else if (buttonText == 'C') { // for clearing the screen
      screenValue = "";
      screen.value = screenValue;
    } else if (buttonText == '=') { // = for calculating the arithmetic operation.
      screen.value = eval(screenValue);
    } else {
      screenValue += buttonText; // for appending inputs together
      screen.value = screenValue;
    }

  });
}

<div class="container">
  <h1>Calculator By Ayush</h1>

  <div class="calculator">
    <input type="text" name="screen" id="screen">
    <table>
      <tr>
        <td><button>(</button></td>
        <td><button>)</button></td>
        <td><button>C</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>X</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>+</button></td>
      </tr>
      <tr>
        <td><button>0</button></td>
        <td><button>.</button></td>
        <td><button>/</button></td>
        <td><button>=</button></td>
      </tr>
    </table>
  </div>
</div>

As you can see, your snippet has console errors. They need to be fixed — mplungjan, Aug 20 '20 at 07:57
Also consider using event delegation in this case instead of adding a listener to each button, here is [**a starting code for a calculator**](https://stackoverflow.com/questions/61193406/how-to-make-a-calculator-using-javascript-events/61194397#61194397) — Saadi Toumi Fouad, Aug 20 '20 at 08:04
Thank you so much for your precious time you made it right ,Can someone also give a hint for a back space button for deletion of a character from right at a time . — , Aug 20 '20 at 08:15

mplungjan · Answer 1 · 2020-08-20T08:22:20.743

Typo (full stop after innerText)
scope issue (buttons[i] should be this)

Code after change:

 buttons[i].addEventListener('click', function() {
    var buttonText = this.innerText; //  Gets the text of that button which is clicked

You can add using a closure adding 'click' event listeners in loop

but here is a simpler delegated click version with a backspace

const screen = document.getElementById("screen");
let screenValue = ""; // inital value on the screen is empty
document.getElementById("calculator").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.tagName !== "BUTTON") return;

  var buttonText = tgt.innerText; //  Gets the text of that button which is clicked 

  if (buttonText == 'X') { // since the cross X sign is * multiplication sign.
    buttonText = '*';
    screenValue += buttonText;
    screen.value = screenValue;
  } else if (buttonText == 'CA') { // for clearing the screen
    screenValue = "";
    screen.value = screenValue;
  } else if (buttonText == '') { // for clearing last entered
    screenValue = screenValue.slice(0,-1);
    screen.value = screenValue;
  } else if (buttonText == '=') { // = for calculating the arithmetic operation.
    screen.value = eval(screenValue);
  } else {
    screenValue += buttonText; // for appending inputs together
    screen.value = screenValue;
  }

})

button { height: 40px; width:40px; }

<div class="container">
  <h1>Calculator By Ayush</h1>

  <div id="calculator">
    <input type="text" name="screen" id="screen"> <button></button>
    <table>
      <tr>
        <td><button>(</button></td>
        <td><button>)</button></td>
        <td><button>CA</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>X</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>+</button></td>
      </tr>
      <tr>
        <td><button>0</button></td>
        <td><button>.</button></td>
        <td><button>/</button></td>
        <td><button>=</button></td>
      </tr>
    </table>
  </div>
</div>

You may also explain *"scope issue"*, and talk little about closures or attach a useful link so the OP knows what he was doing wrong? just a suggestion! — Saadi Toumi Fouad, Aug 20 '20 at 08:10

Rayees AC · Answer 2 · 2020-08-20T08:10:56.040

Firstly,

Change the onclik event of buttons. there is not get object buttons[i] use here this to get the object.

Second,

innerText. you are used a dot(.) after innerText please changes to semi column(;)

let screen = document.getElementById('screen');   // selects the screen
var buttons = document.querySelectorAll('button'); // selects all the buttons 
let screenValue = "";  // inital value on the screen is empty
for(var i=0;i<buttons.length;i++)
  {
    buttons[i].addEventListener('click',function()  
    {
        var buttonText =  this.innerText;  //  Gets the text of that button which is clicked 
        
        if(buttonText == 'X') {   // since the cross X sign is * multiplication sign.
            buttonText = '*';
            screenValue += buttonText;
            screen.value = screenValue;
        }
        else if (buttonText == 'C') {   // for clearing the screen
            screenValue = "";
            screen.value = screenValue;
        }
        else if (buttonText == '=') {     // = for calculating the arithmetic operation.
            screen.value = eval(screenValue);
        }
        else {
            screenValue += buttonText;   // for appending inputs together
            screen.value = screenValue; 
        }

    });
}

<div class="container">
            <h1>Calculator By Ayush</h1>
    
            <div class="calculator">
                <input type="text" name="screen" id="screen">
                <table>
                    <tr>
                        <td><button>(</button></td>
                        <td><button>)</button></td>
                        <td><button>C</button></td>
                        <td><button>%</button></td>
                    </tr>
                    <tr>
                        <td><button>7</button></td>
                        <td><button>8</button></td>
                        <td><button>9</button></td>
                        <td><button>X</button></td>
                    </tr>
                    <tr>
                        <td><button>4</button></td>
                        <td><button>5</button></td>
                        <td><button>6</button></td>
                        <td><button>-</button></td>
                    </tr>
                    <tr>
                        <td><button>1</button></td>
                        <td><button>2</button></td>
                        <td><button>3</button></td>
                        <td><button>+</button></td>
                    </tr>
                    <tr>
                        <td><button>0</button></td>
                        <td><button>.</button></td>
                        <td><button>/</button></td>
                        <td><button>=</button></td>
                    </tr>
                </table>
            </div>
        </div>

Retrieve text after clicking a button in calculator project JS

2 Answers2