Jump to content

Recommended Posts

Tenho um formulario com varis IDs que recebem um texto pelo: document.getElementById('nome').innerHTML = nome não pode ser vazio...  
preciso de um script que percorra todo o formulário e limpe esses IDs. Alguem ajuda?

Share this post


Link to post
Share on other sites

Bom, como o próprio nome diz "ID" é a identidade única de um elemento no documento (página HMTL) então não deve haver mais de um. Dessa forma, alguns navegadores acabam escolhendo formas diferentes de trabalhar com o resgate dos elementos, geralmente resgatando o primeiro elemento da página. Portando o seguinte código:

 

<div>
  <div id="campo">Teste 1</div>
  <div id="campo">Teste 2</div>
</div>

<script>
  alert(document.getElementById('campo').innerHTML);
</script>

Irá exibir a caixa de alerta com o texto "Teste 1", deixando o outro elemento de lado.

 

Minha sugestão é tentar utilizar outro atributo para resgatar os elementos que você deseja alterar, como class ou data-* por exemplo.

 

Segue o exemplo:

 

<div>
  <div class="elemento">Texto 1</div>
  <div class="invalido">Texto 2</div>
  <div class="elemento">Texto 3</div>
</div>

<script>
  var elements = document.getElementsByTagName('div'); // resgatando todas as divs

  for(var i = 0, total = elements.length; i < total; i++) { // fazendo um loop/laço sobre todos os divs
    var element = elements[i]; // guarando a div do loop/laço na variavel element

    if (element.className === 'elemento') { // filtrando apenas os que tem a class (className em javascript) como 'elemento'
      alert(element.innerHTML);
 
    } // fechando o loop do if
  } // fechando o loop do for
</script>

No caso acima, você pode ver que ele irá trazer a caixa de alerta duas vezes, uma com o texto "Texto 1" e outra com o "Texto 3". Deixei os comentários no código para facilitar a compreensão, mas você pode remover se quiser... (na minha opinião, você deve remover pra forçar seus estudos).

 

Dá pra melhorar a performance ainda do código acima, mas não vem ao caso neste momento. Também recomendo dar uma olhada no querySelectorAll que faz a busca nos elementos através de chamadas parecidas com o CSS ou como a jQuery. Apesar de ser nativo no navegador e não precisar instalar biblioteca nenhum o querySelectorAll é relativamente novo, não sei quais navegadores você pretende atingir então recomendo ver na tabela do CanIUse antes ;-)

 

Espero que tenha ajudado, qualquer dúvida só gritar e bons estudos.

 

querySelectorAll - https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelectorAll

tabela do Can I Use - https://caniuse.com/#feat=queryselector

jQuery - http://jquery.com/

Share this post


Link to post
Share on other sites
Em 08/05/2019 at 11:12, Michael Granados disse:

Bom, como o próprio nome diz "ID" é a identidade única de um elemento no documento (página HMTL) então não deve haver mais de um. Dessa forma, alguns navegadores acabam escolhendo formas diferentes de trabalhar com o resgate dos elementos, geralmente resgatando o primeiro elemento da página. Portando o seguinte código:

 


<div>
  <div id="campo">Teste 1</div>
  <div id="campo">Teste 2</div>
</div>

<script>
  alert(document.getElementById('campo').innerHTML);
</script>

Irá exibir a caixa de alerta com o texto "Teste 1", deixando o outro elemento de lado.

 

Minha sugestão é tentar utilizar outro atributo para resgatar os elementos que você deseja alterar, como class ou data-* por exemplo.

 

Segue o exemplo:

 


<div>
  <div class="elemento">Texto 1</div>
  <div class="invalido">Texto 2</div>
  <div class="elemento">Texto 3</div>
</div>

<script>
  var elements = document.getElementsByTagName('div'); // resgatando todas as divs

  for(var i = 0, total = elements.length; i < total; i++) { // fazendo um loop/laço sobre todos os divs
    var element = elements[i]; // guarando a div do loop/laço na variavel element

    if (element.className === 'elemento') { // filtrando apenas os que tem a class (className em javascript) como 'elemento'
      alert(element.innerHTML);
 
    } // fechando o loop do if
  } // fechando o loop do for
</script>

No caso acima, você pode ver que ele irá trazer a caixa de alerta duas vezes, uma com o texto "Texto 1" e outra com o "Texto 3". Deixei os comentários no código para facilitar a compreensão, mas você pode remover se quiser... (na minha opinião, você deve remover pra forçar seus estudos).

 

Dá pra melhorar a performance ainda do código acima, mas não vem ao caso neste momento. Também recomendo dar uma olhada no querySelectorAll que faz a busca nos elementos através de chamadas parecidas com o CSS ou como a jQuery. Apesar de ser nativo no navegador e não precisar instalar biblioteca nenhum o querySelectorAll é relativamente novo, não sei quais navegadores você pretende atingir então recomendo ver na tabela do CanIUse antes ;-)

 

Espero que tenha ajudado, qualquer dúvida só gritar e bons estudos.

 

querySelectorAll - https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelectorAll

tabela do Can I Use - https://caniuse.com/#feat=queryselector

jQuery - http://jquery.com/

 

Muito obrigado! modifiquei o código e resolvi meu problema. Valeu, mesmo!

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 michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
    • By marcelocardoso
      Fala galera...
      Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
      A nível de conhecimento, segue código para:::

      1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
      2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

      CODE:
       
      $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

      Dicas, Sugestões como fazer, realizar, agradeço.
      Obrigado.

       
    • By Guss
      var carro = {
      cor = "azul",
      modelo = "fusca",
      marca = "Volwagen,
      kms = 10000,
      combustivel = "gasolina"
      }
       
    • By _FelipeOlvr
      Oi pessoal, blz?
       
      Bom, passei quase a tarde toda pra fazer o seguinte:
       
      Imagina que o body tem scroll Y.
      agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
       
      Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
       
      ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
       
      Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
       
      <!DOCTYPE html> <html lang="pt-BR"> <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"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
       
       
×

Important Information

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