Изменение диапазона нескольких флажков с одним javascript

Question

Я застрял на этом, я новичок в коде HTML / JavaScript. Я пытаюсь создать код HTML, в котором флажки должны изменить диапазон изображения (или заголовок) на «CORREGIDO». Таким образом, многие изображения имеют ссылочный номер на заголовке, но когда установлен флажок для этого изображения, необходимо изменить строку на «CORREGIDO». Мой код HTML пока выглядит следующим образом:

Пока он работает для одного изображения. Но JavaScript сделан для одного флажка «id». Этот JavaScript код я взял с этой веб-страницы. Сценарий, который я использую:

document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})

function changeDisplay() 
    {document.querySelectorAll('.spanTxt').forEach(function(elem) {elem.classList.toggle('hidden')})} 

Может быть, он не лучший подход для этого ...

Answer 1

Код JavaScript, который вы используете,

document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})

function changeDisplay() 
    {document.querySelectorAll('.spanTxt').forEach(function(elem) {elem.classList.toggle('hidden')})}

имеет только один document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()}), когда их должно быть два.

Вот исправление, которое включает их оба ,

document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay(e)})
document.getElementById('exp2').addEventListener('change', function(e) {changeDisplay(e)})

function changeDisplay(e) 
    {e.target.parentElement.nextElementSibling.children[1].classList.toggle('hidden')}

Я изменил функцию changeDisplay (e), потому что функция forEach() мешала при манипулировании обоими элементами. Код правильно скрывает «CORREGIDO», когда флажок снят, и показывает его, когда флажок установлен.