I need to pass var information to a function using buttons

Question

I need to pass the value to the function to update the object. There are many more buttons. this is just a shot version. The problem is that all button presses update the function with the first value found in the list "button one"

<div class="streams" style="width:620px;border:0px;">
<span style='color:green'>Online Streams</span>
<span style='color:grey'>Offline Streams</span>

<input type="button" id="streamName" value="Khaldor" onclick="changestream1();" >
<input type="button" id="streamName" value="Painuser" onclick="changestream1();" >

<script type="text/javascript">
    function changestream1() 
    {
        var streamInput = document.getElementById('streamName').value;
        var object = document.getElementById('live_embed_player_flash');
        var param = document.getElementById('param');
        object.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + streamInput);
        param.setAttribute("value", "hostname=www.twitch.tv&channel=" + streamInput + "&auto_play=true&start_volume=25");
    }
</script>

<div id="streamHolder">
    <object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" bgcolor="#000000">
        <param name="allowFullScreen" value="true" />
        <param name="allowScriptAccess" value="always" />
        <param name="allowNetworking" value="all" />
        <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
        <param id="param" name="flashvars" />
    </object>
</div>

Answer 1

ID's must be unique, but you could save some time and add a parameter to your function that takes the current element being clicked:

onclick="changestream1(this);"

function changestream1(obj) 
{
    var streamInput = obj.value;
    var object = document.getElementById('live_embed_player_flash');
    var param = document.getElementById('param');
    object.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + streamInput);
    param.setAttribute("value", "hostname=www.twitch.tv&channel=" + streamInput + "&auto_play=true&start_volume=25");
}

Answer 2

These elements

<input type="button" id="streamName" value="Khaldor" onclick="changestream1();" >
<input type="button" id="streamName" value="Painuser" onclick="changestream1();" >

both have the same id, so Javascript is grabbing the first one since it's ambiguous which button reall is streamName. Make the id unique for each.

Answer 3

Your 2 buttons have the id streamName. Try with different IDs.

Edit

var streamInput = this.value;