Javascript function for array

Question

I have a poll system. People can vote and choose between two images. I'm trying that if you click 1 image, the other image will change opacity. With my code below only the first match is working. The rest won't change opacity.

        echo "<form method='post' action = 'gestemd-test.php?ronde=".$botb_ronde."&mid=".$member_id."&token=".$token."'>";
            $teller = 1;
                while ($aRecord1 = mysql_fetch_array($nummer1) AND $aRecord2 = mysql_fetch_array($nummer2)) {
                    echo "<input type='hidden' name='id_wedstrijd".$teller."' value='".$aRecord1['id_wedstrijd']."'>";
                    echo "<label id='image1' for='thing1".$teller."'><img src='http://kloep.nl/nix/BOTB/2015/deelneemsters/deelneemsters/".$aRecord1['id_deelneemster'].".png' /></label> <input onkeydown='return keyDown(event);' type='radio' name='wedstrijd".$teller."' value='".$aRecord1['id_deelneemster']."' id='thing1".$teller."'>";
                    echo " VS ";
                    echo "<input onkeydown='return keyDown(event);' type='radio' name='wedstrijd".$teller."' value='".$aRecord2['id_deelneemster']."' id='thing2".$teller."'> <label id='image2' for='thing2".$teller."'><img src='http://kloep.nl/nix/BOTB/2015/deelneemsters/deelneemsters/".$aRecord2['id_deelneemster'].".png' /></label><br />";
                    $teller++;
                }
                $teller--;

                echo "<input type='hidden' name='aantal' value='".$teller."'>";
                echo "<input type='hidden' name='naam' value='".$naam."'>";
                echo "<input type='submit' value='Stem!'>";
            echo "</form>";

Below is my Javascript function. I put this between the HEAD tags.

        <script type="text/javascript">
        window.onload = function() {
            var image1 = document.getElementById('image1');
            var image2 = document.getElementById('image2');
                image1.onclick=function(){reset();image2.style.opacity = "0.2";}
                image2.onclick=function(){reset();image1.style.opacity = "0.2";}
        }
        function reset(){
            var image1 = document.getElementById('image1');
            var image2 = document.getElementById('image2');
            image1.style.opacity="1.0";image2.style.opacity="1.0";
        }
    </script>

Can someone help me?

since you are building your html in a `while()` loop, you have multiple `id='image1`/`id='image1`. `id`s are supposed to be UNIQUE. You need to use `class` or other attribute. — Sean, Apr 18 '15 at 14:01
The element with the `id` you search for is a `label`, not an `img`. Shouldn't you have `id='image1'` in the `` tag instead? — Always Learning, Apr 18 '15 at 14:07
The issue is clearly the duplicate ID's, `getElementById` will stop looking once a match is found, which is why it only works for the element with that ID. — adeneo, Apr 18 '15 at 14:11

Always Learning · Accepted Answer · 2015-04-18T15:41:25.047

You need to have unique id's for each image. When writing your <label> tags for each pair of images, set them up like this:

echo "<label id='image1_".$teller."' onclick='fade(1,".$teller.")' for='thing1".$teller."'>
echo "<label id='image2_".$teller."' onclick='fade(2,".$teller.")' for='thing1".$teller."'>

Then have a fade function in JavaScript like this:

<script type="text/javascript">
    // num is 1 if image1 was clicked, or 2 if image2 was clicked
    // i is the index of the pair being selected (1 through however many pairs)
    function fade(num,i) {
        document.getElementById('image1_'+i).style.opacity = (num==1?"1.0":"0.2");
        document.getElementById('image2_'+i).style.opacity = (num==2?"1.0":"0.2");
    }
</script>

The html produced by your script will look like this:

<label id='image1_1' onclick='fade(1,1)' for='thing11'>
<label id='image2_1' onclick='fade(2,1)' for='thing11'>
<label id='image1_2' onclick='fade(1,2)' for='thing12'>
<label id='image2_2' onclick='fade(2,2)' for='thing12'>
<label id='image1_3' onclick='fade(1,3)' for='thing13'>
<label id='image2_3' onclick='fade(2,3)' for='thing13'>
//... etc for however many pairs

The fade method will find exactly the one it's supposed to and set the opacity as you desire and there is no ambiguity as to which image is being adjusted.

Note: you don't need the window.onload function at all.

Javascript function for array

1 Answers1