JavaScript Forum

**Tiny Bubbles** · 06-04-2009, 06:26 AM

Hi
I got some javascript code going that is working fine swopping my images. The way it works is that the user clicks in the boxes to indicate their skill level and that info gets sent with the submission of the form (hence the checkboxes). At the moment the checkboxes themselves are visible but that is just to indicate to me that it is working. I will hide them later. Attached is my images.
What I need is a more sleeker and clever way to work the JS. I was thinking of a loop but not sure how to implement it. Can anyone help?

Here is the code:

Code:

<html>
<head>
<script language="JavaScript">
<!--
function limited() { 
   document.getElementById('limited').checked=true
   document.getElementById('solid').checked=false
   document.getElementById('advanced').checked=false
   document.getElementById('expert').checked=false
   document.getElementById('limitedItem').src='blue.gif'
   document.getElementById('solidItem').src='grey.gif'
   document.getElementById('advancedItem').src='grey.gif'
   document.getElementById('expertItem').src='grey.gif'
}

function solid() { 
   document.getElementById('limited').checked=true
   document.getElementById('solid').checked=true
   document.getElementById('advanced').checked=false
   document.getElementById('expert').checked=false
   document.getElementById('limitedItem').src='blue.gif'
   document.getElementById('solidItem').src='blue.gif'
   document.getElementById('advancedItem').src='grey.gif'
   document.getElementById('expertItem').src='grey.gif'
}

function advanced() { 
   document.getElementById('limited').checked=true
   document.getElementById('solid').checked=true
   document.getElementById('advanced').checked=true
   document.getElementById('expert').checked=false
   document.getElementById('limitedItem').src='blue.gif'
   document.getElementById('solidItem').src='blue.gif'
   document.getElementById('advancedItem').src='blue.gif'
   document.getElementById('expertItem').src='grey.gif'
}

function expert() { 
   document.getElementById('limited').checked=true
   document.getElementById('solid').checked=true
   document.getElementById('advanced').checked=true
   document.getElementById('expert').checked=true
   document.getElementById('limitedItem').src='blue.gif'
   document.getElementById('solidItem').src='blue.gif'
   document.getElementById('advancedItem').src='blue.gif'
   document.getElementById('expertItem').src='blue.gif'
}
//-->

</script>

<style type="text/css">

#limitedItem {
    width:12px;
    height:12px;
    padding:0px;
    margin:5px;
    float:left;
    outline:none;
}

#solidItem {
    width:12px;
    height:12px;
    padding:0px;
    margin:5px;
    float:left;
    outline:none;
}

#advancedItem {
    width:12px;
    height:12px;
    padding:0px;
    margin:5px;
    float:left;
    outline:none;
}

#expertItem {
    width:12px;
    height:12px;
    padding:0px;
    margin:5px;
    float:left;
    outline:none;
}

</style>
</head>
<body>
<form>
<a href="javascript:limited()"><img src="grey.gif" width="12" height="12" border="0" id="limitedItem"></a>
<a href="javascript:solid()"><img src="grey.gif" width="12" height="12" border="0" id="solidItem"></a>
<a href="javascript:advanced()"><img src="grey.gif" width="12" height="12" border="0" id="advancedItem"></a>
<a href="javascript:expert()"><img src="grey.gif" width="12" height="12" border="0" id="expertItem"></a>
<br><br>
<input type="checkbox" id=limited>
<input type="checkbox" id=solid>
<input type="checkbox" id=advanced>
<input type="checkbox" id=expert>
</form>
</body>
</html>

Thanks

Tiny B

**wayfarer07** · 11:26 AM

Simple as this:

HTML Code:

<html>
<head>
<title>Example</title>
<script type="text/javascript">
    function selectBox(id) {
        var input = document.getElementById("checkboxes").getElementsByTagName("input");
        for(var i = 0; i < input.length; i++) {
            input[i].checked = (id == input[i].className) ? true : false;
        }
    }
    window.onload = function() {
        var a = document.getElementById("links").getElementsByTagName("a");
        for(var i = 0; i < a.length; i++) {
            a[i].onclick = function() {
                selectBox(this.id);
                return false;//stop default action of link
            }
        }
    }
</script>
</head>

<body>
<body>
<form>
<fieldset id="links">
<a href="#select" id="limited"><img src="grey.gif" width="12" height="12" border="0"></a>
<a href="#select" id="solid"><img src="grey.gif" width="12" height="12" border="0"></a>
<a href="#select" id="advanced"><img src="grey.gif" width="12" height="12" border="0"></a>
<a href="#select" id="expert"><img src="grey.gif" width="12" height="12" border="0"></a>
</fieldset>
<fieldset id="checkboxes">
<input type="checkbox" class="limited">
<input type="checkbox" class="solid">
<input type="checkbox" class="advanced">
<input type="checkbox" class="expert">
</fieldset>
</form>
</body>
</html>
</body>
</html>

Note that the checkboxes now have a CLASS which is the same name as the ID of each link. Each group has a fieldset with an ID on it so that each may be grouped and looped over.

**Tiny Bubbles** · 06-05-2009, 04:13 AM

Thanks a mil wayfarer07. This was most helpful!

**wayfarer07** · 06-05-2009, 08:13 AM

Now that I look at it, though, I didn't swap the images, only the checkbox states.

**wayfarer07** · 06-05-2009, 08:41 AM

So we could do this to the onclick event:

Code:

     window.onload = function() {
        var a = document.getElementById("links").getElementsByTagName("a");
        for(var i = 0; i < a.length; i++) {
            a[i].onclick = function() {
                selectBox(this.id);
                var a = document.getElementById("links").getElementsByTagName("a");
                var image = "blue.gif";
                for(var i=0; i < a.length; i++) {
                     //loop through each "a", and make the containing img "blue.gif"
                     var img = a[i].getElementsByTagName("img")[0];
                     img.src = image;
                     //until we come to the "a" which has the same ID we clicked on, go to grey.gif
                     if(a[i].id == this.id) image = "grey.gif";
                }
                 return false;//stop default action of link
            }
        }
    }

So it's a little more complex, but still more efficient than the way you were doing things...