Evento Click, Arrow Function e Hacks JS #2

6968 단어 domdevwebjavascript


Evento Click에 대한 JavaScript vamos pensar 게시물이 없으며 Arrow Function을 구체적으로 설명합니다. Nosso projeto é uma calculadora de IMC utiliza os principais conceitos de forma bem simplificada.

오 프로젝트



Projeto em desenvolvimento



HTML 없음



이벤트를 클릭하면 DOM에서 조작할 수 있습니다.

<button id="button" type="button">Calcular IMC</button>


자바스크립트 없음



O processo é simples e vamos ver três conceitos
  • addEventListener
  • 화살표 기능
  • innerHTML(Vamos precisar para resolver 음 버그)

  • 추가 이벤트



    botão e adicionamos o Evento click e a partir desse momento, todas as vezes que clicarmos no botão, vamos disparar a função de calculo de IMC e adicionar o resultado ao HTML.

    document.getElementById("button").
    addEventListener("click", () => {
    


    A Arrow Function은 더 많은 코드를 제공합니다.



    Sem a necessidade da escrita da palavra reservada function ou o uso deum return.

    Agora, com o uso dessas três variáveis, conseguimos os valores de input e selecionamos a div que vai receber o resultado final. Ela foi criada apenas com esse intuito, e está vazia.

    const height = document.getElementById("input-height").value;
    const weight = document.getElementById("input-weight").value;
    
    const container = document.getElementById("bmi-result");
    


    Agora, vemos a variável result, que é inicializada com um valor. HTML 요소를 수신할 때마다 Criando를 작성해야 하며, CreateElement를 만들면 결과를 수신할 수 있습니다.

    o textContent é o valor do H3 criado e a função a ser disparada, foi declarada fora do escopo da Arrow function, como vocês podem ver.

    const result = document.createElement("h3");
    
    result.textContent = calculateBMI(height, weight);
    
    container.appendChild(result);
    
    
    //Fora do escopo da Arrow Function
    function calculateBMI(height, weight) {
    
        var bmi = (weight/(height*height)).toFixed(1);
        return bmi;
    }
    


    Essa ideia é suficiente para resolver o desafio, mas não sem criar um bug um tanto engraçado



    Cada vez que clicamos no botão, o processo repete. Então criamos uma nova Tag H3 e o resultado é novamente inserido no HTML. Isso é um bug, um mau funcionamento da lógica do nosso código, mas que se resolve com uma linha.

    내부HTML




    //Remover resultado antigo
    container.innerHTML = "";
    


    Essa linha antes da criação da tag H3, vai trocar o conteúdo da div para vazio. InnerHTML은 div를 제외하고 대체할 수 있습니다. div 영속성.

    Entender isso é importante porque existem funcionalidades JavaScript para excluir a div em si.

    Essa única linha resolve o bug e demonstra que você, dev, de fato pensa em cada linha do seu código. Bastante dessas dicas를 사용하십시오.


    Esse é um post escrito por mim ✨❤️

    E é o segundo de uma série de 4 posts sobre esse projeto. 아니 próximo 척 falar sobre os padrões CSS que uso.

    Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no ou por e-mail no [email protected]

    좋은 웹페이지 즐겨찾기