Блог

Я пытаюсь изменить несколько столбцов одним нажатием кнопки, после щелчка изображение должно измениться, заголовок и фраза. Я могу применить это только к первому столбцу. Я попытался выполнить итерацию столбцов с помощью querySelectorAll() и искал ответы на других форумах.?

Также возможно ли назначить другое случайное изображение для каждого столбца одним нажатием кнопки? Заранее благодарю вас!

 const images = ['sandwich', 'cookie', 'monster', 'telegram', 'gym']
const inputName = document.getElementById('input-name');
const inputPhrase = document.getElementById('input-phrase');
const btnSubmit = document.querySelector('.input-btn'); 
const btnClr = document.querySelector('.clr-btn'); 


const row = document.querySelectorAll('.column');
const image = document.querySelector('.column img'); 
const title = document.querySelector('.name');
const phrase = document.querySelector('.phrase');

randomImage = Math.floor(Math.random() * images.length);
logoImage = images[randomImage];

window.addEventListener('DOMContentLoaded', function() {
    // createLogo()
})


btnSubmit.addEventListener('click', function(e) {
    e.preventDefault()
    row.forEach(function(col) {
        col.classList.add('change');
        image.src =  `./images/${logoImage}.png`; 
        title.textContent = inputName.value
        phrase.textContent = inputPhrase.value
    })
});
  

Вместо того, чтобы использовать переменную для ссылки на изображение / имя / фразу, вы должны ссылаться на них через col и queryselector в каждой итерации.

 btnSubmit.addEventListener('click', function(e) {
    e.preventDefault()
    row.forEach(function(col) {
        randomImage = Math.floor(Math.random() * images.length);
        col.classList.add('change');
        col.querySelector("img").src =  './images/'   images[randomImage]   '.png'; 
        col.querySelector(".name").textContent = inputName.value
        col.querySelector(".phrase").textContent = inputPhrase.value
    })
});