javascript - 让按钮多次触发 onclick 事件

Question

我在页面上有一个文本区域和一个按钮，该按钮调用一个函数来突出显示页面上 div 中的文本。但是，如果我更改框中的文本，新文本不会突出显示。我如何让这个按钮多次运行该功能？代码如下:

<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

只需使用textarea的onkeyup事件，当输入新字符时，只需调用突出显示textarea内容即可。所以这与按钮点击事件无关。