How to call an id more than once

Question

How to call an id more than once

Navigation

#1 by (2 votes)

2

I'm sending a field from my form to another page. In this page I need 2 images and 2x the id field that was received. But the received field only appears in the first image. Can you tell me where the error is?

Follow the form code:

<form action="menina.html" name="formul"> 
<input type="text" name="nome">

<br> 
<br> 
<input type="button" value="Menino" onclick="envia('menino.html')"> 

<br>       
<input type="button" value="Menina" onclick="envia('menina.html')">

</form>

<script> 

function envia(pag){ 
       document.formul.action= pag 
       document.formul.submit() 
}

</script>

This is the page code you are receiving

<html>
<head>
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
/**
* @see http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name )
{
name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var regexS = "[\?&]"+name+"=([^]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
    return "";
else
    return results[1];
}
window.onload = function(){
id('nome').innerHTML = gup('nome').replace(/[+]/g,' ');;
}
</script>


<style>
#imagem {
width: 200px;
height 100px;
}

#texto {
position: absolute;
margin-top: -90px;
margin-left: 80px;
}

#imagem1 {
width: 200px;
height 100px;
}
#texto1 {
position: absolute;
margin-top: -60px;
margin-left: 300px;
}

</style>


</head>
<body>

<img id="imagem" src="Body bebe da titia.png"/>
<div id="texto"><p><strong id="nome"></strong></p> </div>

<img id="imagem1" src="Body principe da mamãe.png"/>
<div id="texto"><p><strong id="nome"></strong></p> </div>


</body>
</html>

javascript

asked by anonymous 28.02.2018 / 23:44

1 answer

Insertions in mongo how to do? I want an image to close and start a countdown of 5 seconds

score 2 · Answer 1

A id must be unique on the page.

Since you're using the same id in more than 1 element, the code will get the first id you find.

What you have to do is take the whole collection and loop it. First I suggest you change the id="nome" by class="nome" .

Then modify the function function id( el ) to get the elements by the class:

function id( el ){
   return document.getElementsByClassName( el );
}

Finally, in window.onload make for to change all elements with class nome :

window.onload = function(){
   var els = id('nome');
   for(var x=0; x<els.length; x++){
      els[x].innerHTML = gup('nome').replace(/[+]/g,' ');
   }
}

Then the code looks like this:

function id( el ){
   return document.getElementsByClassName( el );
}
/**
* @see http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name )
{
   name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
   var regexS = "[\?&]"+name+"=([^]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( window.location.href );
   if( results == null )
       return "";
   else
       return results[1];
}

window.onload = function(){
   var els = id('nome');
   for(var x=0; x<els.length; x++){
      els[x].innerHTML = gup('nome').replace(/[+]/g,' ');
   }
}

And the HTML:

<img id="imagem" src="Body bebe da titia.png"/>
<div id="texto"><p><strong class="nome"></strong></p> </div>

<img id="imagem1" src="Body principe da mamãe.png"/>
<div id="texto"><p><strong class="nome"></strong></p> </div>