Image onclick

[traucostar]

Hello,
Hope someone can help me, I dont know were to put this thread because it has javascript and some PHP. Here is my question: I have a list of images in my folder named: 1.jpg, 2.jpg, 3.jpg etc... All images are displayed on a white div, and when users click on the image, the backgound of the div changes to orange. But I dont know how to reverse that, from orange to white, onclick. Thanks!

<script type="text/javascript"> 
    <?php  
$i = 1; 
while ($i < 6) 
{ 
    ?>      
function ponerborde<?php echo $i; ?>(here) 
{ 
        var imgTag = "<div style='height:77px; width:102px; background-color: #F60; display:table-cell; position:relative; vertical-align:middle;'><img src='<?php echo base_url().$i; ?>.jpg' onclick='ponerborde<?php echo $i; ?>(<?php echo $i; ?>)'/>"; 
     
    var obj = document.getElementById(here); 
    obj.innerHTML = imgTag; 
} 
<?php  
$i++; 
} 
?> 
</script> 

<?php  
$i = 1; 
while ($i < 6) 
{ 
    ?>  
<div id="<?php echo $i; ?>" style="display:table; float:left;text-align:center;vertical-align:middle;"> 
<div style="height:77px; width:102px; background-color: #FFF; display:table-cell; position:relative; vertical-align:middle;"> 
<img src="<?php echo base_url().$i; ?>.jpg" onclick="ponerborde<?php echo $i; ?>(<?php echo $i; ?>)"/> 
</div> 
</div> 
<div class="vacio"> 
</div> 
<?php  
$i++; 
} 

?>

[VolcomMky]

Try this

<script type="text/javascript"> 
   
function ponerborde(here) 
{ 
        var imgTag = "<div style='height:77px; width:102px; background-color: #FFF; display:table-cell; position:relative; vertical-align:middle;'><img src='<?=base_url();?>"+here+".jpg' onclick='ponerborder('"+here+"');\""; 
     
    var obj = document.getElementById('divID'+here); 
    obj.innerHTML = imgTag; 
} 
</script> 

<?php  
$i = 1; 
while ($i < 6) 
{ 
    ?>  
<div id="divID<?php echo $i; ?>" style="display:table; float:left;text-align:center;vertical-align:middle;"> 
	<div style="height:77px; width:102px; background-color: #F60; display:table-cell; position:relative; vertical-align:middle;"> 
		<img src="<?php echo base_url().$i; ?>.jpg" onclick="ponerborde('<?php echo $i; ?>')"/> 
	</div> 
</div> 
<div class="vacio"> 
</div> 
<?php  
$i++; 
} 
?>

[traucostar]

Thanks VolcomMky, I did it with a modification of your code:

JAVASCRIPT:

<script type="text/javascript">   
function addborder(here) 
{ 
        var imgTag = "<div style='height:77px; width:102px; background-color: #F60; display:table-cell; position:relative; vertical-align:middle;'><img src='"+here+".jpg' onclick='removeborder("+here+")'/>";  
  		document.getElementById('p'+here).innerHTML = imgTag;
} 
function removeborder(here) 
{ 
        var imgTag = "<div style='height:77px; width:102px; background-color: #FFF; display:table-cell; position:relative; vertical-align:middle;'><img src='"+here+".jpg' onclick='addborder("+here+")'/>";  
    	document.getElementById('p'+here).innerHTML = imgTag; 
} 
</script>

PHP:

<?php 
for($i = 1; $i < 7; $i++){ 
  print '<div id="p'.$i.'" style="display:table; float:left;text-align:center;vertical-align:middle;"> 
      <div style="height:77px; width:102px; background-color: #FFF; display:table-cell; position:relative; vertical-align:middle;"> 
    <img src="'.$i.'.jpg" alt="" onclick="addborder('.$i.')" /> 
      </div> 
    </div>'; 
} 
?>

[VolcomMky]

No problem, glad to help

[traucostar]

EDITED

Ok, i didnt find anything in google, I had been two days working on this litle code... im so frustated.
My goal, is that users can select image (change border to orange), and then click "Continue", and it shows a 0 if the image is not selected and "p$i" if the image is selected.NOW IT WORKS!

Here is the code, if someone wants to use it:

<script type="text/javascript"> 
   
function addborder(here) 
{ 
		var obj1 = document.getElementById('p'+here)
		obj1.style.backgroundColor = '#f60';
		document.getElementById('f'+here).value = here;
        var imgTag = "<img src='<?php echo base_url(); ?>"+here+".jpg' onclick='removeborder("+here+")'/>";  
  		document.getElementById('p'+here).innerHTML = imgTag;
} 

function removeborder(here) 
{ 
		var obj2 = document.getElementById('p'+here)
        obj2.style.backgroundColor = '#fff';
		document.getElementById('f'+here).value = "0";
		var imgTag = "<img src='<?php echo base_url(); ?>"+here+".jpg' onclick='addborder("+here+")'/>";  
    	document.getElementById('p'+here).innerHTML = imgTag; 
} 
</script>

<form action="<?=site_url('show/results')?>" method="post">

<?php 
for($i = 1; $i < 7; $i++){ 
  print '<div style="display:table; float:left;text-align:center;vertical-align:middle;"> 
      <div id="p'.$i.'" style="height:77px; width:102px; background-color: #FFF; display:table-cell; position:relative; vertical-align:middle;"> 
    <img src="'.base_url().$i.'.jpg" alt="" onclick="addborder('.$i.');" /> 
      </div> 
    </div>
    <input type="hidden" id="f'.$i.'" name="n'.$i.'" value="0"/>'; 
} 
?> 

 <input type="image" src="<?php echo base_url(); ?>images/continue.png" name="submit">
</form>

What is the meaning of parentNode, in the use of divs?