Why is a javascript script not running on one wordpress page, but working fine on another?

Question

I've made a dice roller, implementing the code I wrote here.

I added it to a shortcut function in wordpress functions.php , and was all working fine. Just checked it again, and it works perfectly on one page (scroll to the bottom), but doesn't on another, and I've got no idea why!

Any thoughts?

HTML:

    <div class="dicerollingwrapper">
  <div class="dicebox dicetransform">
    <svg id="dicesvg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <style> .dicetextsecond {font: 70px serif; fill: white; fill-opacity:0;} 
      .dicetextfirst {font: 70px serif; fill: white;}    
      </style>
    <path class="dicetospin"  d="M38.8,-69C44.4,-64,38.9,-41.6,40.7,-27.2C42.6,-12.8,51.8,-6.4,52.6,0.5C53.4,7.3,45.7,14.6,39,20.7C32.3,26.7,26.6,31.5,20.3,38.2C14,45,7,53.6,0.2,53.2C-6.5,52.9,-13.1,43.4,-21.5,37.9C-30,32.4,-40.4,30.9,-45.6,25.2C-50.8,19.6,-50.9,9.8,-48.4,1.4C-45.8,-6.9,-40.8,-13.8,-37.7,-23C-34.5,-32.2,-33.2,-43.8,-27.3,-48.5C-21.3,-53.3,-10.7,-51.2,3,-56.4C16.6,-61.6,33.2,-73.9,38.8,-69Z" transform="translate(100,100)" />
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextsecond">13</text>
      <text x="50%" y ="60%" text-anchor="middle" class="dicetextfirst">?</text> 
      
  </svg>
</div>

CSS:

.dicebox {
  /* background-color: #ff8D9B; */
  height: 300px;
  width: 300px;
}

.dicetransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetransform-active {
  animation-name: rotate;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  100% {transform:rotate(4320deg); }
} 

.dicetexttransform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.dicetexttransform1-active {
  animation: hidecolor 4s forwards;
}

@keyframes hidecolor {
  0% { fill: white; }
  100% {fill-opacity:0;}
}

.dicetexttransform2-active {
  animation: showcolor 4s forwards;
}

@keyframes showcolor {
  0% {fill-opacity:0;}
  100% {fill-opacity:1;fill: white;}
}

#dicebutton {width:300px; height:50px; background-color:#ff8888; font-size: 24px; border:none; border-radius: 15px;transition-duration: 0.4s; font-weight:bold;}
#dicebutton:hover {background-color:#000; color:#ff8888}

JS:

$("#dicebutton").click(function() {
$('.dicetransform').toggleClass('dicetransform-active'); 

  // generate random
  let x = Math.floor((Math.random() * 13) + 1);
  //find SVG elements
  var numberdiceSVG = document.querySelector('#dicesvg .dicetextsecond');
  var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');
  //set number
  numberdiceSVG.textContent = x;
  // reset if animated already done
  if(numberdiceSVG.getAttribute('class') === "dicetextsecond dicetexttransform dicetexttransform2-active") {
    numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform');
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform');
  }
  else {
    hidediceSVG.setAttribute('class', 'dicetextfirst dicetexttransform dicetexttransform1-active');

numberdiceSVG.setAttribute('class', 'dicetextsecond dicetexttransform dicetexttransform2-active');
  }
  
var hidediceSVG = document.querySelector('#dicesvg .dicetextfirst');

  });

Answer 1

On your second page you have the same element with the same id twice on the page:

<input type="button" id="dicebutton" value="Roll a d13!"></input>

Both have the same id: dicebutton.

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

If you want the input multiple times on the page use different id's for each one: eg: dicebutton1 and dicebutton2 and then add the event handler:

$("#dicebutton1, #dicebutton2").click(function()

Of assign the input a class "dicebutton" instead. And add the event handler like this:

$(".dicebutton1").click(function()