How do I change content of the bootstrap-5 popover using vanilla JS

Question

so i'm using bootstrap to create a popover, and I want to change the content of it through vanilla JavaScript by setting an Attribute "data-bs-content", it's changing in the code but the change is not visible on the site, and I do not have a clue what is going on, please help :). Maybe there is another way to change content of it using vanilla JS.

JS:

const score = document.querySelector(".score1");

HTML:

<button type="button" class="btn btn-none score1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Chance: 1 to 13 983 816" data-bs-trigger="hover">
example
</button>

Not so important line - just gives back a number from range of 0-6.

let x = randomArray.filter((n) => validArray.includes(n)).length;
    console.log(x);

The JS switch itself works just fine but the content is changing only in the code.

    switch (x) {
      case 6:
        score.setAttribute("data-bs-content", "Chance: 1 to 13 983 816");
        break;
      case 5:
        score.setAttribute("data-bs-content", "Chance: 1 to 54 201");
        break;
      case 4:
        score.setAttribute("data-bs-content", "Chance: 1 to 1 024");
        break;
      case 3:
        score.setAttribute("data-bs-content", "Chance: 1 to 57");
        break;
      case 2:
        score.setAttribute("data-bs-content", "Chance: 1 to 7,5");
        break;
      case 1:
        score.setAttribute("data-bs-content", "Chance: 1 to 2,4");
        break;
      case 0:
        score.setAttribute("data-bs-content", "Chance 1 to 2,3");
    }

    score.innerHTML = `You guessed ${x} numbers.`;

Answer 1

You must initialize popovers before they can be used. And rather than changing the HTML, you can get the popover instance instead and change its content in JavaScript.

Here's an example. It includes a switch(x) where x is a random number 0-6 just to show how it could work. I added comments on all the bits that are relevant. Should be straightforward to implement in your project.

// Enables the Bootstrap popover instance
new bootstrap.Popover(document.querySelector('#popover'), {
  title: 'Click the button',
  content: 'You can do it!',
  trigger: 'hover focus'
}); 

function changePopoverContent() {

  var x = Math.floor(Math.random() * 7);
  
  let chance = "";
  switch (x) {
    case 6:
      chance = "Chance: 1 to 13 983 816";
      break;  
    case 5:
      chance = "Chance: 1 to 54 201";
      break;
    case 4:
      chance = "Chance: 1 to 1 024";
      break;
    case 3:
      chance = "Chance: 1 to 57";   
      break;
    case 2:
        chance = "Chance: 1 to 7,5";
      break;
    case 1:
        chance = "Chance: 1 to 2,4";
      break;
    case 0:
        chance = "Chance 1 to 2,3";
      break;      
  }
  
  // Returns a Bootstrap popover instance
  const popover = bootstrap.Popover.getOrCreateInstance('#popover') 

  // Set the content of the popover instance
  popover.setContent({
    '.popover-header': 'Popover title - ' + x,
    '.popover-body': chance
  }) 
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<button type="button" id="popover" class="btn btn-lg btn-danger" onclick="changePopoverContent()">Click to change popover content</button>