Contador simple em Javascript

Asked

Viewed 132 times

-1

Hello,

I’m doing a very simple counter in javascript, but I’m not getting to do the for appears in the browser, is only appearing the last number of the loop. When I test in the console the result is correct. However, when to show in HTML it does not work. follow the codes

function executar() { 

  let inicio = document.getElementById('inicio')
  let fim = document.getElementById('fim')
  let passo = document.getElementById('passo')
  let resultado = document.getElementById('resultado')

  if( inicio.value.length == 0 || fim.value.length == 0 || passo.value.length == 0){
    window.alert('Complete os dados')
  } else {
    resultado.innerHTML = 'Contando:'
    let i = Number(inicio.value)
    let f = Number(fim.value)
    let p = Number(passo.value)
    if (p == 0){
      p = 1
    }


    if ( i < f){
    for (let c = i; c <= f; c+=p){
     resultado.innerHTML = `${c} \u{1F449}`
   }
  } else {
      for(let c = i; c>= f ; c-= p){
        resultado.innerHTML += `${c} \u{1F449}`
      }
  }
  resultado.innerHTML += `\u{1F3C1}`

  }

}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site 3</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body >
    <header>

        <h1>Site 3</h1>

    </header>
    <section>
        <div>
            <p>Inicio
            <input type="number" name="inicio" id="inicio">
        </p>
            <p>Fim
            <input type="number" name="fim" id="fim">
        </p>
            <p>Passo
            <input type="number" name="passo" id="passo">
        </p>
             
            <input type="button" value="Executar" onclick="executar()">
             </p>
            
        </div>
        <div id="resultado">
            Preencha os dados...
        </div>


    </section>
    <footer>

        <p>&copy; Henrique</p>

    </footer>
    <script src="script.js"></script>
</body>
</html>

javascript dom

1 answer

1

Basically need to show the data as the start and end with certain step by step, did right (basically) but at the time of showing it should be accumulative and at the end of the day its code always shows the last one because the text is not concatenated but changed so it only shows the last one:

function executar() {

  let inicio = document.getElementById('inicio')
  let fim = document.getElementById('fim')
  let passo = document.getElementById('passo')
  let resultado = document.getElementById('resultado')

  if (inicio.value.length == 0 || fim.value.length == 0 || passo.value.length == 0) {
    window.alert('Complete os dados')
  } else {
    resultado.innerHTML = 'Contando:'
    let i = Number(inicio.value)
    let f = Number(fim.value)
    let p = Number(passo.value)
    if (p == 0) {
      p = 1
    }


    if (i < f) {
      for (let c = i; c <= f; c += p) {
        resultado.innerHTML += `${c} \u{1F449}`
      }
    } else {
      for (let c = i; c >= f; c -= p) {
        resultado.innerHTML += `${c} \u{1F449}`
      }
    }
    resultado.innerHTML += `\u{1F3C1}`

  }

}
<div>
  <p>Inicio
    <input type="number" name="inicio" id="inicio">
  </p>
  <p>Fim
    <input type="number" name="fim" id="fim">
  </p>
  <p>Passo
    <input type="number" name="passo" id="passo">
  </p>

  <input type="button" value="Executar" onclick="executar()">
  </p>

</div>
<div id="resultado">
  Preencha os dados...
</div>

that is, lacked put += along those lines innerHTML result = ${c} \u{1F449}

A little better code:

function getElement(name) {
  return document.getElementById(name);
}
function valid(obj) {
  return obj && obj.value.length === 0;
}
function parse(obj) {
  return Number(obj.value)
}
function print(i, f, p, obj) {
  if (i < f) {
    for (let c = i; c <= f; c += p) {
        obj.innerHTML += `${c} \u{1F449}`
    }
  } else {
    for (let c = i; c >= f; c -= p) {
        resultado.innerHTML += `${c} \u{1F449}`
    }
  }
}
function executar() {
  const inicio = getElement('inicio')
  const fim = getElement('fim')
  const passo = getElement('passo')
  const resultado = getElement('resultado')

  if (valid(inicio) || valid(fim) || valid(passo)) {
    window.alert('Complete os dados')
  } else {
    resultado.innerHTML = 'Contando:'
    const i = parse(inicio);
    const f = parse(fim);
    const p = parse(passo);
    print(i, f, p, resultado);
    resultado.innerHTML += `\u{1F3C1}`
  }
}
<div>
  <p>Inicio
    <input type="number" name="inicio" id="inicio">
  </p>
  <p>Fim
    <input type="number" name="fim" id="fim">
  </p>
  <p>Passo
    <input type="number" name="passo" id="passo">
  </p>

  <input type="button" value="Executar" onclick="executar()">
  </p>

</div>
<div id="resultado">
  Preencha os dados...
</div>

  • 1

    I think I got the question wrong.

  • 1

    It’s complicated often to understand, but the help of the code in the question was critical to answer @Augustovasques ...

  • 1

    Show, thanks was only the += that was missing

Browser other questions tagged javascript dom

You are not signed in. Login or sign up in order to post.