I’m not sure why I cant change the .value, value of my Class objects using .forEach()

I store all the dice objects in the diceArray array (I’ve tested this and know that they are properly stored).
I don’t know why I can’t cycle through the array and change the .value, value of each object.
I checked the id of the button and I know that it is correct, so I don’t see what I am missing here.
ps~ I am currently getting no console errors.

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
diceArray  = [];
const body = document.body;

class Die {
  constructor() {
    this.value = this.roll();
    this.div = `<div class="a-die d-flex align-items-center justify-content-center mx-4"><h1 class="die-text">${this.value}</h1></div>`;
    diceArray.push(this);
    $('#diceHolder').append(this.div);
  }
  roll = () => {
    return randomNumber(1, 7);
  }
  rollAll = () => {
    $(this.value).replaceWith(randomNumber(1, 7));
  }
}

$('#genDice').on('click', () => { let thisDie = new Die() });
$('#yahtzee').on('click', () => $('.die-text').text(randomNumber(1, 7)));

$('#rollDice').on('click', diceArray.forEach(val => {
  val.value = randomNumber(1, 7);
}));

Answer

You expect this template…

this.div = `
<div class="a-die d-flex align-items-center justify-content-center mx-4">
  <h1 class="die-text">${this.value}</h1>
</div>`;

… to be ‘live’, refreshing itself whenever value of this.value changes. But that’s now how HTML works – and that’s exactly why all those data-binding frameworks and libraries came alive in the recent years.

So, unless you want to start digging into those, you’d have to implement this ‘liveliness’ on your own. One (rather direct) approach is modifying your class to store the reference to DOM object (and not just a plain string as is):

this.value = this.roll();
this.$div = $(`<div class="a-die d-flex align-items-center justify-content-center mx-4"><h1 class="die-text">${this.value}</h1></div>`);
$('#diceHolder').append(this.$div);
diceArray.push(this);

… then enriching Die class with a method that forces DOM to be updated with current value:

refreshView = () => {
  this.$div.find('h1').text(this.value);
}

After that you can just call this method after changing value in your click handler directly (note that it should be a proper function; right now you’re calling forEach just once):

$('#rollDice').on('click', () => diceArray.forEach(val => {
  val.value = randomNumber(1, 7);
  val.refreshView();
}));

This is how it all might look:

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
const diceArray  = [];
const body = document.body;

class Die {
  constructor() {
    this.value = this.roll();
    this.$div = $(`<div class="a-die d-flex align-items-center justify-content-center mx-4"><h1 class="die-text">${this.value}</h1></div>`);
    diceArray.push(this);
    $('#diceHolder').append(this.$div);
  }
  roll = () => {
    return randomNumber(1, 7);
  }
  refreshView = () => {
    this.$div.find('h1').text(this.value);
  }
  rollAll = () => {
    this.value = randomNumber(1, 7);
    this.refreshView();
  }
}

$('#genDice').on('click', () => { let thisDie = new Die() });
$('#yahtzee').on('click', () => $('.die-text').text(randomNumber(1, 7)));

$('#rollDice').on('click', () => diceArray.forEach(val => {
  // console.log(val);
  val.value = randomNumber(1, 7);
  val.refreshView();
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="diceHolder"></div>
<button id="genDice">Gen Dice</button>
<button id="rollDice">Reroll</button>

You can get more creative, and organize your code so that updating value always triggers refreshView (for example, by using Proxy). Or you can track any events, and recheck each value bound to DOM, triggering rerender in case of changes. Finally, you can force users of your code to avoid modifying objects directly, and only call specific function to update it (connecting ‘refreshView’ to that function).

In this case, however, you essentially start reimplementing those frameworks on your own. ) This might be a good idea when you’re learning the ropes – yet starting studying at least one of those might be a solid alternative, too.