Eu criei uma calculadora, com dois input
's: um para cada operando.
O intuito é experimentar uma função switch que deva receber os números caso a div
que representa o teclado seja clicada, ou apagada o último caracter em caso de clicar na tecla "backSpace" que também está no teclado da calculadora.
Porém, pois o teclado da calculadora só realiza as funcionalidades no primeiro input
, mesmo com o foco estando no segundo input
, o cursor volta automaticamente para o primeiro input
ao ser usado o teclado.
Já tentei usar o método focus()
, hasFocus()
entre outras coisas.
const ac=document.querySelector("#id_tecla-AC")
const input1=document.querySelector("#id_aritimetica1")
const input2=document.querySelector("#id_aritimetica2")
const backSpace=document.querySelector("#id_back-Space")
const numbers=[...document.querySelectorAll(".number")]
const sinais=[...document.querySelectorAll(".sinal")]
const igual=document.getElementById("id_symbol-iqual")
const resultado=document.getElementById("id_resultado")
const operacao=document.querySelector("#id_symbol")
numbers.map((element)=>{
element.addEventListener("click",(event)=>{
switch(element.textContent){
case "0" : if(input1.focus()){input1.value+=0}else if(input2.focus()){input2.value+=0}
break
case "1" : if(input1.focus){input1.value+=1}else if(input2.focus){input2.value+=1}
break
case "2" : if(input1.focus){input1.value+=2}else if(input2.focus){input2.value+=2}
break
case "3" : if(input1.focus){input1.value+=3}else if(input2.focus){input2.value+=3}
break
case "4" : if(input1.focus){input1.value+=4}else if(input2.focus){input2.value+=4}
break
case "5" : if(input1.focus){input1.value+=5}else if(input2.focus){input2.value+=5}
break
case "6" : if(input1.focus){input1.value+=6}else if(input2.focus){input2.value+=6}
break
case "7" : if(input1.focus){input1.value+=7}else if(input2.focus){input2.value+=7}
break
case "8" : if(input1.focus){input1.value+=8}else if(input2.focus){input2.value+=8}
break
case "9" : if(input1.focus){input1.value+=9}else if(input2.focus){input2.value+=9}
break
case "," : if(input1.focus){input1.value+=","}else if(input2.focus){input2.value+=","}
break
default:
break
}
})
})
backSpace.addEventListener("click",() =>{
if(input1.value.length){
input1.value = input1.value.substr(0, input1.value.length -1);
input1.focus();
}else if(input2.value.length){
input2.value = input2.value.substr(0, input2.value.length -1);
input2.focus();
}
})
map
para percorrer um array é um uso torto, leia aqui para entender melhor. Efocus()
serve para colocar o foco no elemento, não para verificar se ele tem o foco. EhasFocus
verifica se o documento tem algum elemento com foco, não se o elemento específico está focado. Talvez vc precise definir outra regra para saber quando usar ou outro input. E também dá pra simplificar esse switch, repare que tem muito código repetido (daria pra concatenar o própriotextContent
, por exemplo,switch
não parece ser a melhor opção aí)