Click detection and value collection

Navigation
0

I'm developing a basic calculator to learn a little more javascript, but right from the start came the doubt. How do I go through all the li's and get their values individually inside the array, how do I detect the click on a particular li and get its value to save to 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
    
asked by anonymous 10.04.2017 / 22:53

2 answers

2

You can simply use forEach or any other repeat structure to cycle through the elements present in the selection. And since you already have the class name, ul is unnecessary: 

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

To detect the click using pure javascript on 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 this would be to use jquery here's an example of what it would look like 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><divid="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>
    
10.04.2017 / 23:16
How do I set an attribute by its name contained in a variable? How to replace the extension but remain the title