Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

É possível fazer com que um botão apareça somente quando cumprir condição?

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Execute códigos diferentes dependendo da condição e atividade Consolidando seu conhecimento 2

por yuri wada hirono imokuti
| 47.5k xp | 3 posts

Galera, me ajudem por favor! Minha dúvida é a seguinte:

Criei o seguinte código para o jogo de adivinhação da Lógica de Programação I:

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

function adivinhar() {
let numeroPensado = sorteia(1000)
let chute = document.getElementById('chute')
let res = document.getElementById('res')
if (chute == numeroPensado) {
    res.innerHTML = `Você acertou!`
} else if (chute.value.length == 0) {
    res.innerHTML = `Insira um número para "Chute"!!`
} else if (chute.value < 0 || chute.value > 1000) {
    res.innerHTML = `Insira um número inteiro válido para "Chute" que esteja entre 0 e 1000!!`
} else {
    res.innerHTML = `OPS! Você errou!<br>O número pensado pelo computador foi ${numeroPensado}!!`
    }
}

function tentarnovamente() {
    let res = document.getElementById('res')
    let chute = document.getElementById('chute')
    res.innerHTML = []
    chute.value = ``
    chute.focus()
}

Gostaria de saber se é possível fazer com que um botão de "Tente Novamente" apareça somente quando a pessoa acerta ou quando ela erra o número pensado pelo computador!! No caso, para o botão aparecer, ela teria que cumprir a condição if (chute == numeroPensado) e else { res.innerHTML = OPS! Você errou!<br>O número pensado pelo computador foi ${numeroPensado}!! }

PS.: Eu criei a função tentarnovamente() para o click em um botão de "Tente Novamente", mas esse botão sempre aparece para a pessoa. Eu gostaria que ele ficasse visível apenas quando aparecesse o resultado!!

4 respostas
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Yuri, tudo certo?

Achei interessante a tua dúvida. Cola o trecho html aqui para que eu possa replicar na minha máquina, por favor.

Acredito que criar o botão, dinamicamente com o JS, será a solução para teu questionamento.

Aguardo o código html para acharmos uma saída.

Abraço.

por yuri wada hirono imokuti
| 47.5k xp | 3 posts

E ai!! O código HTML é este aqui:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo da Adivinhação!</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <header>
        <h1>Jogo da Adivinhação!</h1>
    </header>

    <section>
        <div id="adivinha">
            <p>O computador pensará em um número de 0 a 1000! Tente adivinhar em qual número o computador pensou!</p>
            <p>Insira aqui seu chute: <input type="number" name="chute" id="chute"> <input type="button" id="btn" value="Adivinhar!" onclick="adivinhar()"></p>
        </div>
        <div id="res">

        </div>
        <div>
            <input type="button" value="Tentar Novamente" onclick="tentarnovamente()">
        </div>
    </section>

    <footer>
        <p>&copy;YuriWada</p>
    </footer>
    <script src="script.js"></script>
</body>

</html>
solução!
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Yuri, Bom dia!

O botão ficava sempre visivel porque ele foi criado diretamente no arquivo HTML.

Para ele ficar oculto e aparecer apenas quando você rodar a função adivinhar() é preciso criá-lo dinamicamente a partir do JavaScript.

Primeiro eu retirei o botão da página deletando o código abaixo.

      <div>
        <input
          type="button"
          value="Tentar Novamente"
          onclick="tentarnovamente()"
        />
      </div>

Depois eu criei o btn e um br dentro da função adivinhar, no arquivo js.

Após criar o btn eu adicionei um textContent para adicionar o texto no botão.

E ai eu adicionei o botão na variável res.

Toda a função que estava no tentarnovamente() eu coloquei em uma arrow function anônima dentro de event listener do botão.

Ficou desta forma:

  const btn = document.createElement('button')
  const br = document.createElement('br')
  btn.textContent = 'Tentar novamente'
  res.appendChild(br)
  res.appendChild(btn)

  btn.addEventListener('click', () => {
    let res = document.getElementById('res')
    let chute = document.getElementById('chute')
    res.innerHTML = []
    chute.value = ``
    chute.focus()
  })

O arquivo .js completo ficou assim:

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

function adivinhar() {
  let numeroPensado = sorteia(1000)
  let chute = document.getElementById('chute')
  let res = document.getElementById('res')
  if (chute == numeroPensado) {
    res.innerHTML = `Você acertou!`
  } else if (chute.value.length == 0) {
    res.innerHTML = `Insira um número para "Chute"!!`
  } else if (chute.value < 0 || chute.value > 1000) {
    res.innerHTML = `Insira um número inteiro válido para "Chute" que esteja entre 0 e 1000!!`
  } else {
    res.innerHTML = `OPS! Você errou!<br>O número pensado pelo computador foi ${numeroPensado}!!`
  }

  const btn = document.createElement('button')
  const br = document.createElement('br')
  btn.textContent = 'Tentar novamente'
  res.appendChild(br)
  res.appendChild(btn)

  btn.addEventListener('click', () => {
    let res = document.getElementById('res')
    let chute = document.getElementById('chute')
    res.innerHTML = []
    chute.value = ``
    chute.focus()
  })
}

Criei um repositório com a solução que achei para este caso.

Se quiser, pode dar uma olhada lá.. Acredito que fica melhor estruturado para entendimento.

Esse é o link do commit para teu caso: https://github.com/eraldosiniciof/forum-alura/commit/15b3ba68a8cb11fa1ae417e5553e3fcb3c3503e1

Esse é o link dos arquivos: https://github.com/eraldosiniciof/forum-alura/tree/master/duvida5

Espero ter ajudado! Abraço.

por yuri wada hirono imokuti
| 47.5k xp | 3 posts

Muito obrigado, cara! Me ajudou pra caramba!