loop do for na linha 20

Home › Fóruns › JavaScript › loop do for na linha 20

Visualizando 3 respostas da discussão
  • Autor
    Posts
    • 26 de julho de 2023 às 17:30 #120549
      Filipe Pinto Vicentini
      Participante

      o loop do inicio maior que o fim funciona, mas o loop do inicio menor que o fim tem problema

      <!DOCTYPE html>
      <html lang=”pt-br”>
      <head>
      <meta charset=”UTF-8″>
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
      <title>Contagem</title>
      <link rel=”stylesheet” href=”estilo.css”>
      </head>
      <body>
      <header><h1>Contagem</h1></header>
      <main>
      <form action=”#” method=”get”>
      <div class=”registro”>
      <label for=”inicio”>início:</label>
      <input type=”number” placeholder=”inicio” id=”inicio”>
      </div>
      <div class=”registro”>
      <label for=”fim”>fim:</label>
      <input type=”number” placeholder=”fim” id=”fim”>
      </div>
      <div class=”registro”>
      <label for=”passo”>passos:</label>
      <input type=”number” placeholder=”passos” id=”passos”>
      </div>
      <input type=”submit” value=”contar” id=”botao”>
      </form>
      <p id=”contagem”>Aqui vem os passos…</p>

      <script src=”contagem.js”></script>
      </main>
      <footer>
      Site criado por filipe para estudar.
      </footer>
      </body>
      </html>

      @charset “UTF-8”;

      body{
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgb(93, 93, 255);
      }

      header{
      text-align: center;
      }

      header h1{
      color: white;
      text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      }

      main{
      width: 300px;
      height: 250px;
      padding: 20px;
      margin: auto;
      background-color: white;
      border-radius: 20px;
      }

      main .registro{
      margin-bottom: 20px;
      }

      main #inicio, #fim, #passos{
      width: 50px;
      }

      main #botao{
      font-weight: bold;
      padding: 5px 10px;
      color: white;
      background-color: darkblue;
      border-radius: 10px;
      }

      main #contagem{
      font-size: 15px;
      }

      footer{
      padding: 10px;
      text-align: center;
      }

      footer a{
      text-decoration: none;
      color: white;
      }

      footer a:hover{
      text-decoration: underline;
      }

      @charset “UTF-8″;

      body{
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgb(93, 93, 255);
      }

      header{
      text-align: center;
      }

      header h1{
      color: white;
      text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      }

      main{
      width: 300px;
      height: 250px;
      padding: 20px;
      margin: auto;
      background-color: white;
      border-radius: 20px;
      }

      main .registro{
      margin-bottom: 20px;
      }

      main #inicio, #fim, #passos{
      width: 50px;
      }

      main #botao{
      font-weight: bold;
      padding: 5px 10px;
      color: white;
      background-color: darkblue;
      border-radius: 10px;
      }

      main #contagem{
      font-size: 15px;
      }

      footer{
      padding: 10px;
      text-align: center;
      }

      footer a{
      text-decoration: none;
      color: white;
      }

      footer a:hover{
      text-decoration: underline;
      }

      var inicio = document.getElementById(‘inicio’)
      var fim = document.getElementById(‘fim’)
      var passos = document.getElementById(‘passos’)
      var botao = document.getElementById(‘botao’)
      var contagem = document.getElementById(‘contagem’)

      botao.addEventListener(‘click’, contar)

      function contar(){
      var i = inicio.value
      var f = fim.value
      var p = passos.value

      contagem.innerText = ”

      if(i.length == 0 || f.length == 0 || p.length == 0){
      contagem.innerText = ‘Preencha tudo…’

      }else if(i < f){
      for(var conta=i; conta<=f; conta+=p){
      contagem.innerHTML += ${conta} 👉
      }
      contagem.innerHTML += ‘🏁’

      }else if(i > f){
      for(var conta=i; conta>=f; conta-=p){
      contagem.innerHTML += ${conta} 👉
      }
      contagem.innerHTML += ‘🏁’

      }else{
      contagem.innerText = ‘Não pode ter inicio igual o fim’
      }
      }

    • 26 de julho de 2023 às 18:52 #120551
      Tutora Jessica
      Moderador

      Ola Filipe, qual seria o modulo e aula desse exercício?

    • 27 de julho de 2023 às 12:05 #120579
      Filipe Pinto Vicentini
      Participante

      modulo E do primeiro exercicio que é contagem, exercicio(parte 2)

    • 27 de julho de 2023 às 18:48 #120606
      IcaroFilho
      Moderador

      Boa noite Felipe, Vou explicar os passos que segui.

      1. Por se tratar de um form, eu chamei ele no
        addEventListener

        • const form = document.getElementsByTagName("form")[0]
      2. Como você esta utilizando submit eu adicionei este evento:

        • form.addEventListener("submit", (e) => {
    e.preventDefault();
    contar(); 
});
      3. A captura dos itens de um input são do tipo string, então o correto é
        sempre fazer um tratamento, por isso devemos converter para o formato
        desejado. 

        var i = Number(inicio.value);
var f = Number(fim.value); 
var p = Number(passos.value);
      4. Primeira condicional
        • Por se tratar de um campo eu usei a negação (“!”) para verificar se o
          campo é nulo, isto é similar a escreve:
          if( i != null || i != undefined || i != "")

      na lógica eu não modifiquei.
      segue o código completo:

      var inicio = document.getElementById("inicio");
var fim = document.getElementById("fim");
var passos = document.getElementById("passos");
var contagem = document.getElementById("contagem");

const form = document.getElementsByTagName("form")[0];

form.addEventListener("submit", (e) => {
  e.preventDefault();
  contar();
});

function contar() {
  var i = Number(inicio.value);
  var f = Number(fim.value);
  var p = Number(passos.value);

  contagem.innerText = "";

  if (!i || !f || !p) {
    contagem.innerText = "Preencha tudo…";
  } else if (i < f) {
    for (var conta = i; conta <= f; conta += p) {
      contagem.innerHTML += <code>${conta} 👉</code>;
    }
    contagem.innerHTML += "🏁";
  } else if (i > f) {
    for (var conta = i; conta >= f; conta -= p) {
      contagem.innerHTML += <code>${conta} 👉</code>;
    }
    contagem.innerHTML += "🏁";
  } else {
    contagem.innerText = "Não pode ter inicio igual o fim";
  }
}
  • Autor
    Posts
Visualizando 3 respostas da discussão
  • Você deve fazer login para responder a este tópico.