比较两个数组并使用javascript返回条件CSS样式

期望输出：

我不是JavaScript方面的专家，我正在学习。我知道我的代码是黑客，但我被困在这个水平，需要一些帮助。我试图寻找类似的解决方案，但没有找到专家。 我有两个阵列：

let initial = ["somthng", "else", "wnet" , "bonkers"];
let apiSuggestion = ["something", "else", "went", "bonker"];

我想比较一下“首字母”和“apiSuggestion”，并用CSS样式的“拼写错误”单词将首字母还原为HTML，背景颜色：黑色，颜色：红色； 我能够做到这一点：

<div> Initial:<p id="initial">somthng else wnet bonkers</p></div>
<div> Fix this typo: <p id="suggestion" style="background-color:black; color:red;>somthng wnet</p></div>

<script>
  let matchMaker = initial.filter(function(word){
        return apiSuggestion.indexOf(word) === -1;
})
document.getElementById("suggestion").innerHTML = matchMaker.join(' ');

//Initial: somthng else wnet bonkers 
//Fix this typo: somthng wnet

</script>

Initial:
somthng else-wnet-bonkers
修复此打字错误：声明css样式的语法不正确已修复。属性应该能够包含整个css样式字符串。您可以使用模板语法将单词变量插入到所需的HTML字符串中。

使用索引（idx）获取要与之进行比较的apiSuggestion数组中的位置


//获取文本内容并拆分为以“”作为分隔符的数组
让initial=document.getElementById（'initial'）.textContent.split（''）；
//您的输出表明“bonker”是“bonkers”的拼写错误？
let apiSuggestion=[“某物”、“其他”、“去了”、“疯了”]；
让matchMaker=initial.map（函数（word，idx）{
if（word！==apiSuggestion[idx]）{
返回`
${word}
`
}否则{
返回词；
}
});
//转义空间（），因为空间将在HTML元素之间折叠
document.getElementById（“建议”）.innerHTML=matchMaker.join（“”）
Initial:
somthng else-wnet-bonkers
修正这个错误：
somthng wnet
你能发布一张你想要达到什么效果的图片吗？@RoboRobok这是图片，希望这对你有帮助这很好谢谢你解释我犯了什么错误。
let matchMaker = initial.map(function(word){
 if( word !== apiSuggestion ){
    return `
        <span style="background-color:black"; color:"red">
         document.getElementById("initial").innerHTML = matchMaker.join(' ');
        </span>
          `
   } else {
         document.getElementById("initial").innerHTML = matchMaker.join(' ');
         }
});

Any help will be appreciated thank you so much !!!!!!