通過按鈕onclick傳遞多個值

Question

也有類似的帖子，但我找不到我的獨特案例的解決方案。

我有一個腳本，當用戶單擊突出顯示按鈕時突出顯示關鍵字。目前它只是突出顯示「狐狸」一詞，但我需要它來突出顯示其他詞語，在這種情況下，「圍欄」和「跳躍」。

這裏是HTML：

<div id="inputText"> 
The fox quickly jumped over the fence. 
</div> 
<button onclick="highlight('fox')">Highlight</button> 

我試圖改變'fox'到'+fox+','+fence+','+jumped+'但沒有運氣。

的JavaScript是：

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 
    } 

} 

和CSS：

.highlight 
{ 
background-color:yellow;} 

Answer 1

<button onclick="highlight('fox')+highlight('jumped')+highlight('fence')">Highlight</button> 

Answer 2

而是在您的標記使用onclick的，你應該儘量利用最佳實踐，並通過JavaScript事件綁定只因爲它是最將處理程序附加到DOM元素的不顯眼的方式。

此外，您可以在迭代突出顯示的代碼的數組中定義要突出顯示的單詞，如下面的小提琴。該highlight功能click事件的

(function() { 
 

 
    function highlight() { 
 
    var wordsToHighlight = ["fox", "fence", "jumped"]; 
 

 
    wordsToHighlight.forEach(function(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 
 
     } 
 
    }); 
 
    } 
 

 
    button = document.getElementById('btn-highlight'); 
 
    button.onclick = highlight; 
 
})();

.highlight { 
 
    background-color: yellow; 
 
}

<div id="inputText">The fox quickly jumped over the fence.</div> 
 
<br/> 
 
<button id="btn-highlight">Highlight</button>

請注意，在標記的id="btn-highlight"，並且綁定。

Answer 3

我們可以傳遞一個分隔字符串，然後將其拆分成一個數組。你可以使用任何你想要的分隔符，但我選擇了一個逗號。然後你可以遍歷這個數組來突出顯示單詞。

jsfiddle

<div id="inputText"> 
The fox quickly jumped over the fence. 
</div> 
<button onclick="highlight('fox,fence,jumped')">Highlight</button> 

<script> 

function highlight(text){ 

    var i, index, words = text.split(","); 
    var inputText = document.getElementById("inputText"); 
    var innerHTML = inputText.innerHTML; 

    for(i=0;i<words.length;i++){ 

     index = innerHTML.indexOf(words[i]); 
     if (index >= 0) { 
     innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+words[i].length) + "</span>" + innerHTML.substring(index + words[i].length); 
    inputText.innerHTML = innerHTML; 
     } 

    } 
}  

</script> 

Answer 4

正如script47說傳遞一個數組，或者如果你想要寫不好的代碼有你的函數接受多個參數。

function highlight(text1, text2, text3...) 

Answer 5

更好的方法將是使用預先製作的字典狀物體：

DEMO和來源：JSnippet DEMO

JS：

var dic = { 
    fox:['fox','jumped','fence'], 
    cat:['cat','happy'] 
}; 
function parse(target) { 
    var inputText = document.getElementById("inputText"); 
    inputText.innerHTML = inputText.innerHTML.replace(/(<([^>]+)>)/ig,""); 
    if (typeof dic[target] === 'object') 
     for (var i=0; i<dic[target].length; i++) 
      tokenize(dic[target][i]); 
} 
function tokenize(text) { 
    var inputText = document.getElementById("inputText"); 
    var inner = inputText.innerHTML; 
    var index = inner.indexOf(text); 
    if (index >= 0) { 
     inner = inner.substring(0,index) + 
       "<span class='highlight'>" + inner.substring(index, index + text.length) + "</span>" + 
       inner.substring(index + text.length); 
     inputText.innerHTML = inner; 
    } 
}