Сравните два массива и вернитесь с условным стилем CSS, используя javascript

Question

Желаемый результат:

Я не эксперт в JavaScript и учусь. Я знаю, что мой код взломан, но я застрял на этом уровне и мне нужна помощь. Я пробовал искать похожие решения, но безуспешно добирался до экспертов. У меня есть два массива:

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

Я хотел бы сравнить «начальный» с «apiSuggestion» и вернуть исходный к HTML со словами «с ошибками» со стилями CSS, цвет фона : черный и цвет: красный; Я могу сделать это:

<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>

Вместо создания нового тега p и id = Suggesstion я хотел бы использовать map () и изменить начальное значение с помощью вышеупомянутых стилей. Это то, что я делал с map () до сих пор, и это неправильно

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 !!!!!!

Answer 1

Исправлен некорректный синтаксис объявления css стилей. Атрибуты должны содержать всю строку стиля css. Вы можете использовать синтаксис шаблона, чтобы вставить переменную word в желаемую строку HTML.
Используйте индекс (idx), чтобы получить позицию в массиве apiSuggestion, с которым вы сравниваете.

// grab text content and split into array with ' ' as delimiter
let initial = document.getElementById('initial').textContent.split(' ');

// your output suggests that "bonker" was a typo for "bonkers"?
let apiSuggestion = ["something", "else", "went", "bonkers"];

let matchMaker = initial.map(function(word, idx){
 if( word !== apiSuggestion[idx] ){
    return `
        <span style="background-color:black; color:red">
         ${word}
        </span>
          `
   } else {
         return word;
         }
});

// escaped space (&nbsp;) because spaces will get collapsed between HTML elements
document.getElementById("suggestion").innerHTML = matchMaker.join('&nbsp;');

<div> Initial:<p id="initial">somthng else wnet bonkers</p></div>
<div> Fix this typo: <p id="suggestion">somthng wnet</p></div>

style = " background-color: black; color: red; >

Незакрытая цитата, и вам больше не нужен этот стиль, так как вы выделяете слова индивидуально

style = "background-color: black"; color: "red">

Это интерпретируется как атрибуты:

• style = «цвет фона: черный»
• ;
• color:"red"

Надеюсь, код сопоставления не требует пояснений. Вы не возвращали значение, которому каждый элемент должен быть «сопоставлен» (или, другими словами, преобразован).