Click detection and value collection

Question

I am developing a basic calculator to learn a little more javascript, however, I soon came to doubt. How do I go through all the li’s and get their values individually within the array, how do I detect the click on a particular li and get its value to store in a variable ?

<!--Corpo Calculadora-->
    <div id="calc">
        <!--Visor-->
        <div class="calc-visor"></div>
        <!--Botões-->
        <div class="btn-panel">
        <!--Painel números/resultado/reset-->
        <ul class="numeric-panel">
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>0</li>
        </ul>
        <!--Operadores-->
        <ul class="operator-panel">
            <li>+</li>
            <li>-</li>
            <li>x</li>
            <li>÷</li>
        </ul>
        <span class="ac-calc">AC</span>
        <span class="equal-calc">=</span>
    </div>
</div>

// eval() -> converte contas em string e as resolve
var generalPanel = document.querySelectorAll(".btn-panel ul li");//array

Answer 1

To detect the click using pure javascript in some element

    //Por questões de compatibilidade com o IE
    //Esta função irá obter o elemento do evento de uma forma compatível com o navegador
    function getEventTarget(e) {
        e = e || window.event;
        return e.target || e.srcElement; 
    }
    //te aconselho a colocar um ID na ul e utilizar getElementById
    var ul = document.getElementById('ulCalc');

    //Adiciona a função click na ul e mostra o valor
    ul.onclick = function(event) {
        var target = getEventTarget(event);
        //agora você tem o valor, nota que ele é do tipo string 
        var valor =  target.innerHTML;
        alert(valor);
        //caso queira converter p/ inteiro
        //var valorInt = parseInt(valor); 
    };

A simpler way to do it would be to use jquery here is an example of how it would look too:

//Pega o click em qualquer li dentro da classe .numeric-panel
$(".numeric-panel li").click(function() {
    var valor = $(this).html()
    alert($(this).html()); 
    //caso queira o valor do tipo inteiro
    //var valorInt = parseInt($(this).html());
});

Functional example in pure javascript:

//Por questões de compatibilidade com o IE
// Esta função irá obter o destino do evento de uma forma compatível com o navegador
function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}
//te aconselho a colocar um ID na ul e utilizar getElementById
var ul = document.getElementById('ulCalc');

//Adiciona a função click na ul e mostra o valor
ul.onclick = function(event) {
  var target = getEventTarget(event);
  //agora você tem o valor, nota que ele é do tipo string 
  var valor = target.innerHTML
  alert(valor);
  //caso queira converter p/ inteiro
  //var valorInt = parseInt(valor); 
};

<div id="calc">
  <!--Visor-->
  <div class="calc-visor"></div>
  <!--Botões-->
  <div class="btn-panel">
    <!--Painel números/resultado/reset-->
    <ul id="ulCalc" class="numeric-panel">
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>0</li>
    </ul>
    <!--Operadores-->
    <ul class="operator-panel">
      <li>+</li>
      <li>-</li>
      <li>x</li>
      <li>÷</li>
    </ul>
    <span class="ac-calc">AC</span>
    <span class="equal-calc">=</span>
  </div>
</div>

Functional example using jquery:

//Pega o click em qualquer li dentro da classe .numeric-panel
$(".numeric-panel li").click(function() {
  var valor = $(this).html()
  alert($(this).html());
  //caso queira o valor do tipo inteiro
  //var valorInt = parseInt($(this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calc">
  <!--Visor-->
  <div class="calc-visor"></div>
  <!--Botões-->
  <div class="btn-panel">
    <!--Painel números/resultado/reset-->
    <ul class="numeric-panel">
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>0</li>
    </ul>
    <!--Operadores-->
    <ul class="operator-panel">
      <li>+</li>
      <li>-</li>
      <li>x</li>
      <li>÷</li>
    </ul>
    <span class="ac-calc">AC</span>
    <span class="equal-calc">=</span>
  </div>
</div>

Answer 2

You can just use the forEach or any other repeating structure to traverse the elements present in the selection. And since you already have the class name, the ul is unnecessary:

var generalPanel = document.querySelectorAll(".numeric-panel li");
generalPanel.forEach(function(i){
    i.addEventListener('click', function(){
        alert(this.innerHTML);
    });
});