Here is my issue. I have an input type button with a background, it is generated by PHP. I'm trying to change the background property of this input using a simple Javascript script.
<?php
foreach($imageList as $image){
//My button input
echo '<input id="button_'.$image -> getId().'" type="button" style="background: url(path) 0px 0px no-repeat">';
//My test button input
echo '<input id="test_button_'.$image -> getId().'" type="button" style="background: url(path) 0px 0px no-repeat">';
?>
<script>
for (var i = 0; i < idList.length; i++) {//I navigate trhough an array
if (idList[i] == 'id_<?php echo $image -> getId(); ?>') {//If the array[value] match with the id
//I change my background property: -20px 0px
document.getElementById('button_<?php echo $image -> getId(); ?>').style.background = 'url(path) -20px 0px no-repeat';
//This is to change the test button background property
document.getElementById('test_button_<?php echo $image -> getId(); ?>').style.background = 'url(path) -20px 0px no-repeat';
}else{
document.getElementById('button_<?php echo $image -> getId(); ?>').style.background = 'url(path) -20px 0px no-repeat';
}
}
</script>
<?php
}
?>
The test_button_id button input is affected by the Javascript but not the button_id input. At this point I'm struggling with this issue and I don't know why the script should affet one input and not the other. I already try to change the id of the first input but it didn't work.
Thank you for any help you could give me.