How to get the French tooltip text button to work? It works in English and German

HTML Newbie here

I want a button that uses the normal encoding, and also displays French. However, there are also some apostrophes (French altert texts is: Dans l'envelope.), so naturally I escaped them using ' - but this did not work either. And now I have no more ideas.

TEST in Englisch: Where was the letter? <button onclick="alert('In the envelope.')">Solution</button>
<br /> Button is working. 
<br /> 
<br />
 TEST in French: O&ugrave; se trouvait la lettre? <button onclick="alert('Dans l&#39;enveloppe')">Solution</button>
<br /> Button is <strong> not </strong> working.
<br />
<br />

TEST in German: Worin befand sich der Brief? <button onclick="alert('Der Umschlag')">Solution</button> 
<br />Button is also working.

Thank you for all suggestions!

PS: And, I am very new to HTML, so please help me if this wording is not clear/wrong.

Solution

The apostrophe broke the script

It could be fixed using a third kind of quote:

"alert('Dans l´enveloppe')"

Here is a more elaborate version using delegation and more than one sentence - I fixed the German too ;)

// Lookup table for translations (multiple texts per language)
const translations = {
    en: ["In the envelope.", "It was mailed."],
    fr: ["Dans l'enveloppe.", "Il a été envoyé par la poste."], // the single quote inside double quotes works here
    de: ["Im Umschlag.", "Es wurde verschickt."]
  },
  output = document.getElementById("output");

// Function to display message based on language and message ID
const showSolution = (lang, messageId) => {
  // Convert messageId to number for array indexing
  const id = parseInt(messageId, 10);
  // Check if language and message exist
  const messages = translations[lang];
  const message = messages && Number.isInteger(id) && id >= 0 && id < messages.length ?
    messages[id] : "Translation not available."; // statement ? true : false;  is called a ternary
  output.textContent = message;
};

// Event delegation: Listen for clicks on the static container
document.getElementById("container").addEventListener("click", (event) => {
  // Check if the clicked element is a button with data-lang and data-message-id
  const button = event.target.closest("button[data-lang][data-message-id]");
  if (!button) return; // not a button
  const lang = button.getAttribute("data-lang");
  const messageId = button.getAttribute("data-message-id");
  showSolution(lang, messageId);
});

<!-- Static container for event delegation -->
<div id="container">
  <div class="language-section">
    <p lang="en">English: Where was the letter?</p>
    <button data-lang="en" data-message-id="0">Solution 1</button>
    <button data-lang="en" data-message-id="1">Solution 2</button>
  </div>
  <div class="language-section">
    <p lang="fr">French: Où se trouvait la lettre?</p>
    <button data-lang="fr" data-message-id="0">Solution 1</button>
    <button data-lang="fr" data-message-id="1">Solution 2</button>
  </div>
  <div class="language-section">
    <p lang="de">German: Worin befand sich der Brief?</p>
    <button data-lang="de" data-message-id="0">Solution 1</button>
    <button data-lang="de" data-message-id="1">Solution 2</button>
  </div>
</div>
<hr />
<!-- Output element for displaying messages -->
<div id="output">Click a button to see the solution.</div>