Siento que tengo este derecho, pero por alguna razón, addEventListener no funciona como yo quiero. Cuando trato de cambiar el img.src a continuación, solo muestra el img 'images/expand.jpeg'. He confirmado que la ruta a la imagen es correcta, ya que muestra 'images/collapse.png' cuando cambio el src original del botón a 'images/collapse.png'.
document.querySelectorAll('.title').forEach(function(){ let button = document.createElement('img'); button.classList.add('smallbutton'); button.src = "images/expand.jpeg"; eachTitleDiv.append(button); button.addEventListener('click', function(){ if (button.src === "images/expand.jpeg") { button.src = "images/collapse.png"; } else if (button.src === "images/collapse.png") { button.src = "images/expand.jpeg"; }; }); });src , es el valor DOM calculado, y su enlace relativo estaba computando para el enlace absoluto. (https://yourwebsite.com/images/expand.jpeg === "images/expand.jpeg") devuelve falsoalt en sus imágenes, como en este caso donde no se cargan, por discapacidad visual, ¡SEO por muchas razones! Aquí hay un fragmento de trabajo donde se usa alt para verificar el estado en lugar de src :
document.querySelectorAll('.title').forEach(function(eachTitleDiv){ let button = document.createElement('img'); button.classList.add('smallbutton'); button.src = "images/expand.jpeg"; button.alt = "expand" eachTitleDiv.append(button); button.addEventListener('click', (e) => { if (button.alt === "expand") { button.src = "images/collapse.png"; button.alt = "collapse" } else if (button.alt === "collapse") { button.src = "images/expand.jpeg"; button.alt = "expand" }; }); }); <h1 class="title">Title 1</h1> <h2 class="title">Title 2</h2> <p>Not a title</p>