Невозможность изменения css с помощью JS

Я работаю над DJango, который также включает в себя JavaScript Мне нужно изменить цвет фона элемента после определенного действия, но я не могу этого сделать. Приведенный ниже код - единственный файл Javascript, используемый в проекте.

function create_email(email){
const element = document.createElement('div');
element.id = "email";
element.innerHTML= `<b>${email.sender}</b>: ${email.subject}<p id='right' ><button id ="view" 
onclick="view_mail(${email.id})"class="btn btn-primary">View</button>${email.timestamp}<button 
id="archive" onclick="archive(${email.id})" class="btn btn-secondary">Archive</button><p>`;
element.addEventListener('click', function() {
console.log(`This message is sent by ${email.sender}`)
});
document.querySelector('#emails-view').append(element);
}

Выше я создал элемент div с помощью Javascript и присвоил ему id email, позже я изменю свойство css этого элемента:-

function read(id){
fetch(`/emails/${id}`, {
method: 'PUT',
body: JSON.stringify({
    read: true
})
})
document.getElementById("email").style.backgroundColor="red";
}

В этой функции я пытался изменить цвет фона элемента, но ничего не меняется. Обратите внимание, что эта функция работает, так как я пробовал изменять свойства других элементов только в этой функции, и они работали. Элемент email div находится внутри div с id emails-view . И я могу изменить фон элемента emails-view div, но не email div, который находится внутри этого блока div.

Если вам нужно изменить css в view_mail функции:

const email = {
  id: 1,
  sender: 'John',
  subject: 'Message',
  timestamp: '13/09/2021'
}
function create_email(email){
  const element = document.createElement('div');
  element.id = "email";
  element.innerHTML = `<b>${email.sender}</b>: ${email.subject}
  <p id='right'>
  <button id ="view" onclick="view_mail(${email.id})"class="btn btn-primary">View</button>${email.timestamp}
  <button id="archive" onclick="archive(${email.id})" class="btn btn-secondary">Archive</button>
  <p>`;
  element.addEventListener('click', function() {
    console.log(`This message is sent by ${email.sender}`)
  });
  document.querySelector('#emails-view').append(element);
}
function view_mail(id) {
  document.getElementById("email").style.backgroundColor="red";
}

create_email(email)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div id="emails-view"></div>

Вернуться на верх