Javascript Dynamic Anchor parameter

Question

I am trying to dynamically write some anchor tags to a div so I can click on them to be removed from an array. But I am having a hard time figuring out how to get the value of what Anchor was clicked from the update function into the remove function. When I get that alert to popup, it comes back undefined.

**I have this all split into different functions because there are other filters that I will be filtering by.

So if I have a list of

(x) 2.0 Dolby
(x) 3.0 Dolby
(x) 5.1 Dolby

Clicking on the (x) of 2.0 Dolby would then popup the alert saying that 2.0 Dolby was clicked. Any ideas?

HTML Code

<select id="audio" name="audio" onchange="addFilter('Audio',this.value)">
    <option value="null"></option>
        <?php
            foreach($audioArray as $data)
            {
                echo "<option value='$data'>$data</option>";
            }
        ?>
</select>
<div id="audioFilter"></div>

Javascript Code

function addFilter(type,str)
{
    var value=type+":"+str;
    if($.inArray(value,filters)==-1 && str!="null")
    {
        filters.push(value);
    }
    else
    {
        return;
    }
    if(type=="Audio" && $.inArray(str,audio)==-1 && str!="null")
    {
        audio.push(str);
        updatePage(type,audio);
    }
}
function updatePage(type,val)
{
    document.getElementById(type.toLowerCase()+"Filter").innerHTML = ""
    for(var i=0; i<audio.length;i++)
        document.getElementById(type.toLowerCase()+"Filter").innerHTML += "<a id='remove' onclick='removeFilter(this)'>"+audio[i]+"<a><br>";
}
function removeFilter(val)
{
    alert(val.innerhtml);               
}

Answer 1

val.innerHTML not val.innerhtml