Javascript does not change the <div>

Asked

Viewed 55 times

1

Hello, I have a problem with my Javascript code, I was doing an exercise but my code does not change the content of a div called "res". I already debugged the code and gave the following error:

var inicio = document.getElementById('txtinicio')
             ^

ReferenceError: document is not defined

While in the browser no error occurs.

HTML code:

<body>
    <header>
        <h1>Vamos contar</h1> 
    </header>
    <section>
        <div>
            <p>
                Início: <input type="number" name="txtinicio" id="txtinicio">
            </p>
            <p>  
                Fim: <input type="number" name="txtfim" id="txtfim">
            </p>
            <p>
                Passo: <input type="number" name="txtpasso" id="txtpasso"> <br>
                <br> <input type="button" value="Contar" onclick="verificar()">
            </p>
        </div>
        <div id="res">
            Preparando a contagem...
        </div>
    </section>
    <footer>
        <p>&copy; Alex Faustino</p>
    </footer>
    <script src="script.js"></script>
</body>

Javascript code:

var inicio = document.getElementById('txtinicio')
var fim = document.getElementById('txtfim')
var passo = document.getElementById('txtpasso')
var res = document.getElementById('res')
var inicion = Number(inicio)
var fimn = Number(fim)
function verificar() {
    if (inicio.value.length == 0 && fim.value.length == 0 && passo.value.length == 0) {
        window.alert('[ERRO] Insira os dados!')
    } else {
        for (var c=inicion; c<=fimn; c++) {
            res.innerHTML(c)
        }
    }
}

Thank you so much for all your help! :)

javascript html

  • Voce already tried to put the whole point and comma at the end of each command? and complete its script tag with type="text/javascript"?

2 answers

2


You have several problems with your code, for example, with document.getElementById is rescued the input and its value must be indicated in the function (input.value), the test consequently does not test value and finally it seems that missed to put the step in the for, good tried to make a minimal example, and print the result on the screen:

const inicio = document.getElementById('txtinicio')
const fim = document.getElementById('txtfim')
const passo = document.getElementById('txtpasso')
const res = document.getElementById('res')

function verificar() {    
    let ini = parseInt(inicio.value) || 0;  
    let fin = parseInt(fim.value) || 0 ;
    let pas = parseInt(passo.value) || 0;
    let str = '';
    if (ini > 0 && fin > 0 && ini < fin && pas > 0){
      for (var c = ini; c <= fin; c = c + pas) {
        str = str + c + ' ';
      }
      res.innerHTML = str;
    }
    else {
       window.alert('[ERRO] Insira os dados!')
    }
}
<div>
  <p>
    Início: <input type="number" name="txtinicio" id="txtinicio">
  </p>
  <p>
    Fim: <input type="number" name="txtfim" id="txtfim">
  </p>
  <p>
    Passo: <input type="number" name="txtpasso" id="txtpasso"> <br>
    <br> <input type="button" value="Contar" onclick="verificar()">
  </p>
</div>
<div id="res">
  Preparando a contagem...
</div>

0

Try to put your javascript code inside the event onload html document, so you ensure that your javascript will only be executed when every document is loaded. If using Jquery use the function reader() and put all your code inside it.

//Jquery
$(document).ready(fucntion(){
    //Seu código aqui.
})

//Javascript puro
document.onload = function(){
    //Seu código aqui.
}

Browser other questions tagged javascript html

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