Changing content in multiple columns with a single button click

Question

I am trying to change multiple columns with a single button click, after a click the image should change, the title and a phrase. I am only able to apply this to the first column. I tried iterating the columns with querySelectorAll() and searched answers in other forums.?

Also is it possible to assign a different random image to each column with the same single button click? Thank you in advance!

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
    })
});

const row = document.querySelectorAll('.column'); var name is confusing here ;) — G-Cyrillus
– G-Cyrillus, Commented Sep 1, 2020 at 19:47

imvain2 · Accepted Answer · 2020-09-01 20:27:36Z

2

Instead of using a variable to refer to the image/name/phrase, you should reference them by col and queryselector in each iteration.

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
    })
});

edited Sep 1, 2020 at 20:27

answered Sep 1, 2020 at 19:42

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zoh Over a year ago

Thanks, but I am getting an error : app.js:26 Uncaught TypeError: Cannot set property 'src' of null at app.js:26 at NodeList.forEach (<anonymous>) at HTMLButtonElement.<anonymous> (app.js:24)

imvain2 Over a year ago

@Zoh I fixed it, I was referring to your image by a class when I was copying and pasting the code but its fixed now.

Zoh Over a year ago

Thanks that was very helpful! Anyone knows if it is possible to get a different image in each col from that button click, since the image is a random choice from an array?

imvain2 Over a year ago

@Zoh I have updated my answer for random images per row.

Zoh Over a year ago

@imavin2 Awesome, that is great, now I understand the mechanics of things.

Collectives™ on Stack Overflow

Changing content in multiple columns with a single button click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related