Jump to content
cviniciussdias

Por que ações executadas dentro de loops são realizadas depois das dem

Recommended Posts

Por que, se eu adiciono um código dentro de um loop (for, por exemplo), as ações dentro dele são executadas após o que está fora?

Por exemplo, o seguinte script:

(function () {
    var i, teste = document.getElementById("teste");
    teste.innerHTML = "<ul>";
    for (i = 0; i < 5; i++) {
        teste.innerHTML += "<li>Teste " + i + "</li>";
    }
    teste.innerHTML += "</ul>";
})();

Esse bloco de código me gera essa saída:

<ul></ul><li>Teste 0</li><li>Teste 1</li><li>Teste 2</li><li>Teste 3</li><li>Teste 4</li>

O que está em volta do for, é executado primeiro. Só depois, o que está dentro do for é realizado.

Existe uma possibilidade de resolver isso?

Sei que nesse caso, eu poderia criar o elemento ul, e com appendChild inserir os elementos li, mas, esse foi só um exemplo do meu problema.

 

Desde já, grato!

Share this post


Link to post
Share on other sites

Não cara.. nesse caso do exemplo isso ai não acontece não.

O que vem depois do loop espera o loop acabar.

 

Qual foi o caso real em que vc notou o erro ? no código acima, essa situação não acontece.

Share this post


Link to post
Share on other sites

Fala Vinicius o que acontece é o seguinte

 

 

Ao inserir o <ul> ( teste.innerHTML = "<ul>"; ) o dom automaticamente identifica como um elemento e o fecha.

E outro ponto é que você está adicionando o <li> ( teste.innerHTML += "<li>Teste " + i + "</li>"; ) na div pai do <ul> e não nele;

 

O certo seria algo assim:

var i, teste = document.getElementById("entry2172473");
    teste.innerHTML = "<ul id='ListTest'>";
    lista = document.getElementById('ListTest');
    for (i = 0; i < 5; i++) {
        lista.innerHTML += "<li>Teste " + i + "</li>";
    }

Se rodar esse código no console deste tópico verá o resultado;

  • +1 1

Share this post


Link to post
Share on other sites

Não cara.. nesse caso do exemplo isso ai não acontece não.

O que vem depois do loop espera o loop acabar.

 

Qual foi o caso real em que você notou o erro ? no código acima, essa situação não acontece.

 

William, no exemplo, era exatamente o que acontecia. Você não deve nem ter testado...

Obrigado mesmo assim.

:-)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
    • By milokoz
      Basicamente eu estou com um leve problema:
      Warning: mysqli_error() expects exactly 1 parameter, 0 given in C:\xampp\htdocs\_config\classes\class.MySQL.php on line 17
      Não foi possível encontrar o banco de dados "test".
      A DB está criada no PHP 
      http://prntscr.com/p5epzn

      e esta nomeada corretamente
      # Definições e conexão com à DATABASE
      define("DB_HOST", "localhost");
      define("DB_PORT", "3303");
      define("DB_USER", "root");
      define("DB_PASS", "");
      define("DB_NAME", "test");
    • By joazinDev
      Estou tentando calcular duas horas e as vezes precisso que ela saia negativa tbm
      Exemplo:
      07:33 - 07:48 = -00:15
      Como faço isso utilizando php ?
    • By Filhote de Dev
      Estou fazendo um requisição HTTP e de retorno recebo um Json! Então eu quero pegar esse valor de Json e atribuir a outra variável para poder modificá-la e depois exibir as duas lado a lado para comparar. Então me deparei com 2 problemas o primeiro é que não estou conseguindo atribuir o valor httpRequest.responseText a uma variável, já tentei a função eval() e a toString() e quando eu peço para printar com um alert() para verificar me retorna undefined o segundo problema é que eu estava exibindo o resultado na dom por meio de appendChild(), estou exibindo apenas com os valores originais para teste, mas quando ele executa esse trexo do code, ele printa na dom e logo em seguida retira da dom, tipo uma piscadinha rápida. Ficaria grato se me ajudassem a resolver esse problema.
       
      o Json que ele recebe de uma pagina .html é esse:
      {"numero_casas":9,"token":"68c56aa784fe216ae92720b76386ea0995055074","cifrado":"fqnw rw mxdkc, unjen rc xdc. sxbqdj kuxlq","decifrado":"","resumo_criptografico":""}  
      o Script esta assim:
      var httpRequest function request(){ var url = 'test.html'//apagar depois if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest() } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP") } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP") } catch (e) {} } } if (!httpRequest) { alert('Giving up :( Cannot create an XMLHTTP instance') return false } httpRequest.onreadystatechange = alertContents httpRequest.open('GET', url, true) httpRequest.responseType = 'jason' httpRequest.send() httpRequest.onload = function(){ view(httpRequest) } } function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { alert(httpRequest.responseText) } else { alert('There was a problem with the request.') } } } function view(httpRequest){ var resposta = httpRequest.responseText.toString() alert(resposta.value) var box = document.querySelector('div#decoding') box.setAttribute('class', 'shadow') var challenge = document.createElement('fieldset') challenge.setAttribute('class', 'painting') var legendChallenge = document.createElement('legend') legendChallenge.innerHTML = 'Challenge' challenge.innerHTML = `Número de casas: ${httpRequest.response.numero_casa}<br> Token: ${httpRequest.response.token}<br> Cifrado: ${httpRequest.response.cifrado}<br> Decifrado: ${httpRequest.response.decifrado}<br> Resumo Criptografico: ${httpRequest.response.resumo_criptografico}` var answer = document.createElement('fieldset') answer.setAttribute('class', 'painting') var legendAnswer = document.createElement('legend') legendAnswer.innerHTML = 'Answer' answer.innerHTML = `Número de casas: ${httpRequest.response.numero_casas}<br> Token: ${httpRequest.response.token}<br> Cifrado: ${httpRequest.response.cifrado}<br> Decifrado: ${httpRequest.response.decifrado}<br> Resumo Criptografico: ${httpRequest.response.resumo_criptografico}` box.appendChild(challenge) box.appendChild(answer) challenge.appendChild(legendChallenge) answer.appendChild(legendAnswer) }  
       
      Index.html:
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Caesar cipher</title> </head> <body> <header> <h1>Caesar cipher</h1> </header> <section> <div class="container"> <div class="box"> <div class="form"> <form action=""> <div> <fieldset class="shadow"> <legend><h1>Decoding</h1></legend> <button id="btntoken" onclick="request()">Fetch Encryption Challenge</button> </fieldset> </div> <div id="decoding" class="aling"></div> </form> </div> </div> </div> </section> <footer> </footer> <script type="text/javascript" src="script.js"></script> </body> </html>  
       
      e o style.css para dar sentido as class:
      /*zerando margein e padding de todos os elementos*/ *{ margin: 0; padding: 0; } /*definido estilo padrão*/ body{ font-family: 'Courier New', Courier, monospace; font-size: 16px; background-color: #F5F6FA; } /*Estilização e alinhamento do cabeçario*/ header{ background-color: #22212F; color: #FFF; height: 80px; font-size: 24px; align-items: center; display: flex; padding-left: 15px; } /*Alinhamento das tags presentes na section*/ section,div.form{ display: flex; justify-content: center; } div.container{ margin:5px; width: 800px; background-color: #FFF; padding: 15px; margin-top: 20px; } div.parag,div.box{ display: block; } div.form{ margin-top:30px; } p{ margin-top: 10px; } /*estilização do formulario principal*/ .shadow{ box-shadow: 5px 5px 5px 2px #22212F; } fieldset{ width: 500px; min-height:150px; padding: 10px; } legend{ font-size: 20px; } input#token{ font-size: 16px; width: 350px; height: 30px; } button#btntoken{ margin: 5px; margin-top:15px; width:480px; height: 50px; font-size: 24px; } /*estilização da resposta ao usuário*/ .aling{ margin: 20px; } .painting{ display: inline-block; width: 230px; min-height: 100px; }
    • By teuzero
      Meu site é :https://xraros.000webhostapp.com/
       
      To com seguinte problema eu adicionei esse código:
       
      jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(); } }); no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.