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>