Estoy trabajando en DJango, que también involucra JavaScript. Necesito cambiar el color de fondo de un elemento después de una determinada acción, pero no puedo hacerlo. El siguiente código es el único archivo Javascript utilizado en el proyecto.
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); }Arriba, creé un elemento div usando Javascript y asigné el correo electrónico de identificación. Más tarde, cambiaré la propiedad css de estos elementos: -
function read(id){ fetch(`/emails/${id}`, { method: 'PUT', body: JSON.stringify({ read: true }) }) document.getElementById("email").style.backgroundColor="red"; }En esta función, intenté cambiar el color de fondo del elemento pero no cambia nada. Tenga en cuenta que esta función se está ejecutando ya que he intentado cambiar la propiedad de otros elementos solo en esta función y funcionó. El elemento email div está dentro del div con id emails-view . Y puedo cambiar el fondo del div de vista de correo electrónico pero no del div de correo electrónico que está dentro de este bloque div.
Si necesita cambiar css en la función 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>