How to call an id more than once

Asked

Viewed 54 times

2

I am sending a field of my form to another page. On this page I need to appear 2 images and 2x the id field that was received . But the received field only appears in the first image. You can 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 code of the page 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

1 answer

2

A id should be unique on the page.

How are you wearing the same id in more than 1 element, the code will take the first id what to find.

What you have to do is take the entire collection and make a loop. First I suggest changing the id="nome" for class="nome".

Then change the function function id( el ) to pick up the elements by class:

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

And finally, in the window.onload make a for to change all elements with the class nome:

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

So the code goes 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>

  • Thank you so much for the explanation. It came out right. Hugs

  • Dispose friend! Be sure to check if the answer has been accepted. Obg!

Browser other questions tagged javascript

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