0

Estou desenvolvendo uma calculadora básica para aprender um pouco mais de javascript, porém, logo de cara me veio a dúvida. Como faço para percorrer todos os li's e pegar seus valores individualmente dentro do array, como detecto o clique em determinado li e pego seu valor para guardar em uma variável ?

<!--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
2
  • 1
    Não compreendi exatamente o que deseja... Tem como dar uma leve explicação, para compreender melhor?
    – LocalHost
    Commented 10/04/2017 às 21:07
  • 1
    Como o @LocalHost comentou, acredito que respondi parcialmente tua pergunta, se puderes explicar mais sobre a parte de armazenar em um array p/ entendermos exatamente o que tu quer...
    – Mathiasfc
    Commented 10/04/2017 às 21:17

2 Respostas 2

2

Podes simplesmente usar o forEach ou outra estrutura de repetição qualquer para percorrer os elementos presentes na selecção. E como já tens o nome da classe, o ul é desnecessário:

var generalPanel = document.querySelectorAll(".numeric-panel li");
generalPanel.forEach(function(i){
    i.addEventListener('click', function(){
        alert(this.innerHTML);
    });
});
1
  • o ul é necessário pois quero os outros itens também :D mas vou testar aq Commented 11/04/2017 às 16:03
2

Para detectar o click utilizando javascript puro em algum elemento

    //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); 
    };

Uma maneira mais simples de fazer seria utilizar jquery fica aqui um exemplo de como ficaria também:

//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());
});

Exemplo funcional em javascript puro:

//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>

Exemplo funcional utilizando 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>

1
  • obg pela prontidão :D Commented 11/04/2017 às 17:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .