Making a button fire the onclick event multiple times

Question

I have a text area on a page and a button that calls a function that highlights text in a div on the page. However, if I change the text in the box, the new text isn't highlighted. How would I make this button run that function multiple times? Code is below:

<script>

function highlight(text)
{
    inputText = document.getElementById("inputText")
    var innerHTML = inputText.innerHTML
    var index = innerHTML.indexOf(text);
    if ( index >= 0 )
    {
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML
    }

}


</script>

@Html.TextArea("area")
<button onclick="highlight(document.getElementById('area').value)">Highlight</button>

<style>
    .highlight {
        background-color: yellow;
    }
</style>

<div id="inputText">
    The fox went over the fence
</div>

Answer 1

just use the textarea onkeyup event, when you enter a new char, just call the highlight the textarea content. So it is not about the button click event.