Changing css property of elements having similar kind of id's - php

Question

I am having a problem while changing the css property of elements having similar kind if id's using javascript.
I am running a php loop through a series of hidden elements. So I am having there id's like this imgstat_1, imgstat_2 and so on.
The code i am using is
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $img1->vchImgStatus?>" />
</a>
</li>
<input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
and javascript like this
function changeimgstat(obj)
{
var xyz = document.getElementById('newimg').value;
alert(document.getElementById('abc_'+xyz));
document.getElementById('abc_'+obj).style.border="3px solid red";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
So could someone suggest what i am doing wrong

Answer 1

As I found there is no error in your code, but have you defined $counter before foreach loop. And your img id should be abc_<?php echo $counter?> rather than abc_<?php echo $img1->vchImgStatus?> which you are using in javascript.
Try:
CSS
.img3{border:3px solid red;}
.img{border:none;}
HTML and PHP
<?php
$counter=1;
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img class="img" src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter?>" />
</a>
</li>
<input type="hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
SCRIPT
<script>
function removeAllClass()
{
var allimg=document.getElementsByClassName("img");
for(var index=0;index<allimg.length;index++)
{
allimg[index].className = "img";
}
}
function changeimgstat(obj)
{
removeAllClass();
document.getElementById('abc_'+obj).className="img img3";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
</script>

Answer 2

The best solution is to add a css class attribute to elements. And write styles for the class.
In the onclick function you can add the class to the elements

Answer 3

It seems you have:
<img ... id="abc_<?php echo $img1->vchImgStatus?>">
and
<input ... value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
Are you sure these two elements will have the id you expect?

Answer 4

try the following:
foreach($img as $img1){?>
<li>
<a href="#" onclick="changeimgstat('<?php echo $counter;?>')">
<img src="<?php echo $img1->vchEventImg?>" width="75" height="75" alt="" id="abc_<?php echo $counter;?>" />
</a>
</li>
<input type = "hidden" value="<?php echo $img1->vchImgStatus?>" id="imgstat_<?php echo $counter;?>">
<?php $counter++;
}?>
<input type="hidden" value="" name="newimg" id="newimg">
Javascript:
function changeimgstat(obj)
{
var xyz = document.getElementById('newimg').value;
alert(document.getElementById('abc_'+xyz));
document.getElementById('abc_'+obj).style.border="3px solid red";
var status = document.getElementById('imgstat_'+obj).value;
document.getElementById('newimg').value = status;
}
I have changes the id="abc_"
because in the javascript function the parameter passed by you is the counter so the same shoul be the id value.