-3

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

2
  • 1
    Algumas dicas: usar map para percorrer um array é um uso torto, leia aqui para entender melhor. E focus() serve para colocar o foco no elemento, não para verificar se ele tem o foco. E hasFocus 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óprio textContent, por exemplo, switch não parece ser a melhor opção aí)
    – hkotsubo
    Commented 16/11/2023 às 17:08
  • Pois é , cara. Fiz algumas buscar em busca de encontrar alguma regra de tratamento para resolver tal problema. Estou ainda em busca, vou dar um repensada uma outa regra. Mas isso isso me deixou encucado, pois é um conhecimento que pode vir a ser muito útil em um projeto. Quanto ao switch é tranquilo, dá para passar tudo em um function e chamar o código apenas uma vez ao evento do click. Commented 16/11/2023 às 17:43

1 Resposta 1

-3

Abaixo segue o métodos que criei par fazer a verificação do input que está com FOCO no momento do evento do clique

let condicao=""

input1.addEventListener('focus', () => {
condicao=0
});

input2.addEventListener('focus', () => {
condicao=1
});

backSpace.addEventListener("click",() =>{
    if(condicao==0){
    input1.value = input1.value.substr(0, input1.value.length -1);
    }else if(condicao==1){
    input2.value = input2.value.substr(0, input2.value.length -1);
    }
}) 

2
  • Não precisa dessa variável condicao. Em vez disso, use uma variável para guardar o próprio input que foi focado. Algo assim: jsfiddle.net/xvb75smf
    – hkotsubo
    Commented 17/11/2023 às 14:33
  • Exatamente isso que eu estava tentando fazer ontem, usar o um selector direto para tag input, para então pegar o` input` focado. Já o switch eu removi todas àquelas linah do códifo e deixei apenas para assim: for(const element of numbers){ element.addEventListener("click",(evt)=>{ verifica(evt.target.textContent) }) } Commented 17/11/2023 às 17:27

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 .