0

I am trying to as the title suggests, randomise the typeface of my h1 titles throughout the site. All of these are assigned an individual ID using php count so they take the format project-title-1, project-title-2 etc.

I have repurposed this code from a similar question I found on here but tried to apply it so it works on multiple elements.

Currently, if I remove the All from querySelector it works on the first element on the page but no others, so the code kind of works but there is a problem somewhere.

Any insight would be greatly appreciated! Cheers

var fonts = ['hauser', 'helvetica', 'times'];
var rand = fonts[Math.floor(Math.random() * fonts.length)];
console.log(rand);

var bodyElement = document.querySelectorAll("[id^='project-title']");
bodyElement.className = rand;

Basic working example here: https://jsfiddle.net/psvu78aq/2/

practical
  • 69
  • 7

2 Answers2

1

An ideal approach would be to apply the class on a parent element so that it applies on all the children of it.

But, just to fix your code, the following should work:

var bodyElement = document.querySelectorAll("[id^='project-title']");
bodyElement.forEach(elem => elem.classList.add(rand));

The reason is (as you already know), document.querySelectorAll returns a collection of elements. So you need to go through each of it and then individually apply the class.

31piy
  • 23,323
  • 6
  • 47
  • 67
  • Thanks, this sorted by problem. I thought it was something to do with that and didn't really understand why but do know from your explanation! – practical Aug 03 '18 at 22:26
0

Your code has some problems :

  • You only call the random fonts array once at the beginning
  • As 31piy said, you have to loop over the elements returned by the querySelectorAll
  • In your example on jsfiddle, you named the class 'Arial' with an uppercase 'A' but put a lowercase 'a' in the array, which did not work.

Here is a snippet which seems to work :

const fonts = ['Arial', 'helvetica', 'times'];

function getRand() {
 return fonts[Math.floor(Math.random() * fonts.length)];
}

const bodyElements = document.querySelectorAll("[id^='project-title']");
for (let bodyEl of bodyElements) {
    bodyEl.className = getRand();
}

https://jsfiddle.net/psvu78aq/9/

Anthony BONNIER
  • 355
  • 2
  • 8