Button selections displayed in table

Question

I am trying to get my button selections to display in a table on my web application. Bellow you find the pieces of code that relate to my 1. My function which allows for the selections (may not even be relevant..), 2. the buttons which you can select in order to set the parameters, and 3 the table with class name and the rows where they will go. I've been struggling with this! Please Help!

My function:

function setClip(val) 
{
clip=val;
}

function setZoom(val) 
{
zoom=val;
}

function geoMap(val)
{
gmap=val;
}

function swap(imgNumber)
{
if(clip==true & zoom==false & gmap==false)
document.getElementById("default").src=imgNumber+"clip.jpg";

else if(clip==false & zoom==true & gmap==false) 
document.getElementById("default").src=imgNumber+"zoom.jpg";

else if(clip==false & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"zoomp.jpg";

else if(clip==true & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"clipzoomp.jpg";

else if(clip==true & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"clipp.jpg";

else if(clip==true & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"clipzoom.jpg"; 

else if(clip==false & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"p.jpg";

else
document.getElementById("default").src=imgNumber+".jpg";

}

My Buttons:

<input type ="button" id="button3" value="Apply Mask" onclick="setClip(true)">
<input type ="button" id="button3" value="No Mask" onclick="setClip(false)">
<input type="button" id="button3" value="Maintain Zoom In" onClick="setZoom(true)"> 
<input type="button" id="button3"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" id="button3" value="GeoMap On" onClick="geoMap(true)">
<input type="button" id="button3" value="GeoMap Off" onClick="geoMap(false)">

The table I would like my selections to be displayed in, basically I want the values of the selected buttons to but put in the table after they have been selected

<table class="status" height="50" width="800">
<tr>
    <td  width="200" align="center">Step 1 Selection</td>
    <td  width="200" align="center">Step 2 Selection</td>
        <td  width="200" align="center">Step 3 Selection</td>
</tr>
</table>

Answer 1

I think your best bet here is using jQuery. It's far easier to manipulate than Javascript and was designed to easily manipulate objects. If you know CSS and a little Javascript, it's easy to pick up too. You don't even have to host it, as Google hosts it. All you need to do is add the following source code to the top where your scripts are:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var buttonCount=1;
   $(document).ready(function() {
    $("input[type='button']").click(function() {
        if(buttonCount <= 3) {
            //make sure that there are no duplicates
            if($(this).get(0).className != "buttonUsed")
            {
                $(this).get(0).className = "buttonUsed";

                var htmlString = $(this).attr('value');
                $('#sel' + buttonCount).html(htmlString);

                buttonCount++;
            }
        }
    });
});
... The rest of your script

I notice that you have been using IDs like one might use classes. I would advise you to consider using the class attribute for things like "button" and make IDs more unique. It will make it easier to code with Javascript, as JS usually follows IDs and works best if it targets only one element per ID. In any case I did rename your IDs. If you have CSS you can rename your CSS classes. Just note that in my code I renamed a class so that you can't choose more than one. That might work for you anyway, because then your button that has been used can look different from the unused buttons.

Anyway, here is the HTML, adapted:

<table class="status" id="buttonStatus" height="50" width="800">
<tr>
    <td  width="200" align="center">Step 1 Selection</td>
    <td  width="200" align="center">Step 2 Selection</td>
        <td  width="200" align="center">Step 3 Selection</td>
</tr><tr>
    <td width="200" align="center" id="sel1"> </td>
    <td width="200" align="center" id="sel2"> </td>
    <td width="200" align="center" id="sel3"> </td>
</tr>   
</table>
</body>

Let me know if this works.

Update

To edit as you desire, use this:

$(document).ready(function() {
    $("input[type='button']").click(function() {
        //make sure that there are no duplicates
        var buttonClassName = $(this).get(0).className;
        if(buttonClassName != "buttonUsed")
        {
            var buttonID = $(this).attr('id');
            var firstPart = buttonID.substring(0,6);
            var secondPart = buttonID.substring(6,7);
            var thirdPart = buttonID.substring(7);


            var newThirdPart;
            switch(thirdPart) 
            {
                case "a"    :   newThirdPart = "b"; break;
                case "b"    :   newThirdPart = "a"; break;
            }
            $(this).get(0).className = "buttonUsed";
            $("#" + firstPart + secondPart + newThirdPart).get(0).className = "button";



            var htmlString = $(this).attr('value');
            $('#sel' + secondPart).html(htmlString);
        }
    });
});

And the HTML

<body>
<input type ="button" class="button" id="button1a" value="Apply Mask" onclick="setClip(true)">
<input type ="button" class="button" id="button1b" value="No Mask" onclick="setClip(false)">
<input type="button" class="button" id="button2a" value="Maintain Zoom In" onClick="setZoom(true)"> 
<input type="button" class="button" id="button2b"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" class="button" id="button3a" value="GeoMap On" onClick="geoMap(true)">
<input type="button" class="button" id="button3b" value="GeoMap Off" onClick="geoMap(false)"><BR><BR><BR>

<table class="status" id="buttonStatus" height="50" width="800">
<tr>
    <td  width="200" align="center">Step 1 Selection</td>
    <td  width="200" align="center">Step 2 Selection</td>
        <td  width="200" align="center">Step 3 Selection</td>
</tr><tr>
    <td width="200" align="center" id="sel1"> </td>
    <td width="200" align="center" id="sel2"> </td>
    <td width="200" align="center" id="sel3"> </td>
</tr>   
</table>
</body>

Note on CSS

This JQuery changes the classname of the active button to buttonUsed, which means you can create a CSS to make the button look highlighted. If you'd rather not do that, and would rather have everything stay as button, you don't actually need it in the new example (whereas in my initial stab at it, it was very necessary).

$(document).ready(function() {
    $("input[type='button']").click(function() {
        //make sure that there are no duplicates

        var buttonID = $(this).attr('id');
        var secondPart = buttonID.substring(6,7);


        var htmlString = $(this).attr('value');
        $('#sel' + secondPart).html(htmlString);
    });
});

Much simpler, in fact. At least I showed you the sort of things jQuery is capable of. Whether you choose to use it or not is up to you. Happy coding!