Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Como faço para colocar mais de um botão?

Eu tentei fazer um código com 2 botões, cada um para executar uma função distinta.

Isso colocando um botao, abrindo javascript e descrevendo função. Depois outro html criei mais um botao, abri javascript novamente e descrevi a segunda a função.

Não funcionou. Por isso pergunto, como faço para levar para o javascript vários botões para funções diferentes?

6 respostas

Boa noite Karen, tudo bem?

Era pra ter funcionado. Deixa eu ver o seu código.

Bom dia, Abraão! Então, os códigos funcionaram bem separados, mas juntos não consegui!

<meta charset = "UTF-8">
<h1>EXERCICIO DE FIXAÇÃO DE CONTEÚDO</h1>
    <p>Aqui venho usando as tags aprendidas e como estruturá-las dentro do programa. Estou aprendendo <a href = "http://www.alura.com.br">aqui</a>!
    <br>
    Agora vamos para o Javascript!</p>

    <script>
    function pulaLinha(){
        document.write("<br>");
    }
    function mostra(frase){
        document.write(frase);
        pulaLinha();
    }


    function calculaImc(altura,peso){
        var imc = Math.round(peso/(altura*altura));
        return imc;
    }//pode colocar direto return = peso/(altura*altura);

    var imcKaren = calculaImc(1.70,65);
    pulaLinha();
    mostra("Calculei meu IMC, e o resultado foi " + imcKaren + ".")
    pulaLinha();

</script>
Vamos brincar! Calcule seu IMC também: <button>AQUI</button>
<br>
<br>
<script>
    function calculaImcUsuario(){
        var nomeInformado = prompt("Digite seu nome aqui!")
        var alturaInformada =prompt(nomeInformado + ", agora me diz tua altura:");
        var pesoInformado = prompt(nomeInformado + ", preciso do teu peso também, digita aí!");
        var imcUsuario = calculaImc(alturaInformada, pesoInformado);
            alert("Então, " + nomeInformado + ", seu IMC é " + imcUsuario + " ! ");
            if(imcUsuario == imcKaren){
                alert("Uau! Estamos com o mesmo IMC!");
            }
            if(imcUsuario < imcKaren){
                alert("Nossa, seu IMC está menor que o meu! Você mentiu também, né?!");
            }
            if(imcUsuario > imcKaren){
                alert("Seu IMC está maior que o meu, hein!!");
            }


    }



    var button = document.querySelector("button");

    button.onclick = calculaImcUsuario;

    mostra("E agora?")



</script>
Tente aqui adivinhar o número sorteado!
<input/>
<button>De seu chute!</button>
<br>
<script>
        function sorteia(){
            return Math.round(Math.random()*20);
        }

        function sorteiaNumeros(quantidade){
            var segredos = [];
            numero = 1
            while(numero <= quantidade){
                numeroSorteado = sorteia();
                var achou = false;

                    if(numeroSorteado != 0){
                        for(var posicao = 0; posicao < segredos.length; posicao++){

                            if(segredos[posicao] == numeroSorteado){
                            achou = true;
                            break
                            }
                        }
                        if(achou == false){
                            segredos.push(numeroSorteado);
                            numero++;
                    }


                }

            }
            return segredos;
        }
    var segredos = sorteiaNumeros(3);
    console.log(segredos);

    var chute = document.querySelector("input");

        function verificaNumeros(){
            var achou = false;
            tentativa = 1
            for(posicao = 0; posicao < segredos.length; posicao++)

                if(chute.value == segredos[posicao]){
                    alert("Voce acertou!")
                    achou = true;
                }
                if(achou == false){
                    alert("Voce errou!!")
                }


            chute.value = "";
            chute.focus();
        }
    var button = document.querySelector("button");
    button.onclick = verificaNumeros;
</script>

Mechi no teu código e consegui fazer tudo junto!

O que eu fiz? Coloquei tudo dentro de uma tag <script> no final do codigo.

<meta charset="UTF-8">
<h1>EXERCICIO DE FIXAÇÃO DE CONTEÚDO</h1>
<p>Aqui venho usando as tags aprendidas e como estruturá-las dentro do programa. Estou aprendendo <a
        href="http://www.alura.com.br">aqui</a>!
    <br>
    Agora vamos para o Javascript!
</p>


Vamos brincar! Calcule seu IMC também: <button>AQUI</button>
<br>
<br>

Tente aqui adivinhar o número sorteado!
<input />
<button>De seu chute!</button>
<br>

<script>
    function pulaLinha() {
        document.write("<br>");
    }
    function mostra(frase) {
        document.write(frase);
        pulaLinha();
    }


    function calculaImc(altura, peso) {
        var imc = Math.round(peso / (altura * altura));
        return imc;
    }//pode colocar direto return = peso/(altura*altura);

    var imcKaren = calculaImc(1.70, 65);
    pulaLinha();
    mostra("Calculei meu IMC, e o resultado foi " + imcKaren + ".")
    pulaLinha();

    function calculaImcUsuario() {
        var nomeInformado = prompt("Digite seu nome aqui!")
        var alturaInformada = prompt(nomeInformado + ", agora me diz tua altura:");
        var pesoInformado = prompt(nomeInformado + ", preciso do teu peso também, digita aí!");
        var imcUsuario = calculaImc(alturaInformada, pesoInformado);
        alert("Então, " + nomeInformado + ", seu IMC é " + imcUsuario + " ! ");
        if (imcUsuario == imcKaren) {
            alert("Uau! Estamos com o mesmo IMC!");
        }
        if (imcUsuario < imcKaren) {
            alert("Nossa, seu IMC está menor que o meu! Você mentiu também, né?!");
        }
        if (imcUsuario > imcKaren) {
            alert("Seu IMC está maior que o meu, hein!!");
        }


    }



    var button = document.querySelector("button");

    button.onclick = calculaImcUsuario;

    mostra("E agora?")

    function sorteia() {
        return Math.round(Math.random() * 20);
    }

    function sorteiaNumeros(quantidade) {
        var segredos = [];
        numero = 1
        while (numero <= quantidade) {
            numeroSorteado = sorteia();
            var achou = false;

            if (numeroSorteado != 0) {
                for (var posicao = 0; posicao < segredos.length; posicao++) {

                    if (segredos[posicao] == numeroSorteado) {
                        achou = true;
                        break
                    }
                }
                if (achou == false) {
                    segredos.push(numeroSorteado);
                    numero++;
                }


            }

        }
        return segredos;
    }

    var segredos = sorteiaNumeros(3);
    console.log(segredos);

    var chute = document.querySelector("input");

    function verificaNumeros() {
        var achou = false;
        tentativa = 1
        for (posicao = 0; posicao < segredos.length; posicao++)

            if (chute.value == segredos[posicao]) {
                alert("Voce acertou!")
                achou = true;
            }
        if (achou == false) {
            alert("Voce errou!!")
        }


        chute.value = "";
        chute.focus();
    }
    var button = document.querySelector("button");
    button.onclick = verificaNumeros;
</script>

Boa noite, Abraão!! Entendi o que tu fez, tu deixou todo html junto e apenas uma área de javascript. Mas, abri no chrome e no mozilla, e ainda não funcionou pra mim. Quando clico no botão de calcular imc, aparece o alerta "Voce errou". Quando tento um chute no segundo botão, não aparece mensagem nenhuma. :(

solução!

Dei uma analisada melhor no seu código. Tem vários motivos pra ele não ter funcionado, mas vou tentar explorar o principal deles.

Você está tentando 'pegar' um elemento com a tag <button> e aí sim definir um comportamento pra ele.

Acontece que a função 'document.querySelector()' vai varrer o documento inteiro e vai selecionar o primeiro elemento que encontrar. Dessa forma, não importa quantas vezes você vai dar esse comando, ele sempre vai pegar o primeiro.

A solução é você colocar uma coisa que faça esses dois botoes únicos, que no caso é o atributo 'id'. Se eu fosse eu iria ler um pouco sobre esse atributo pra conseguir entender, mas vou tentar explicar o que é relevante pra esse problema.

ex.:

    <button id="botao-calcular-imc">Calcule o seu IMC</button>
    <button id="botao-dar-chute">Dê um chute</button>

O atributo 'id' deve ser único e não devem existir em uma mesma página, dois elementos com o mesmo 'id'. Logo, é possível eu referenciar eles pelo 'id'.

ex.:

    const btnCalcularImc = document.querySelector('button#botao-calcular-imc')
    btnCalcularImc.onclick = calculaImcUsuario

    const btnDarChute = document.querySelector('button#botao-dar-chute')
    btnDarChute.onclick = verificaNumeros

Para você poder testar, eu arrumei seu codigo, peguei só o necessario para poder demonstrar isso.

<meta charset="UTF-8">

<button id="botao-calcular-imc">Calcule o seu IMC</button>
<button id="botao-dar-chute">Dê um chute</button>

<script>
    function calculaImcUsuario() {
        alert('Calcula IMC')
    }

    function verificaNumeros() {
        alert('Verifica Numeros')
    }

    const btnCalcularImc = document.querySelector('button#botao-calcular-imc')
    btnCalcularImc.onclick = calculaImcUsuario

    const btnDarChute = document.querySelector('button#botao-dar-chute')
    btnDarChute.onclick = verificaNumeros
</script>

Me diz aí o que você achou...

Enfim, espero ter ajudado. Bons estudos!

Bom dia Abraão! Agora sim, eu realmente não sabia como identificar o botão. Fiz no código e funcionou perfeitamente. Muito obrigada!