title: How can I access an object's property from within the same object?
body: <p>I'm sorry in advance, didn't know how to phrase the problem that I'm facing...</p>
  <p>My goal is to create a custom alert box. I know there are various plugins, but I want to learn how such a plugin was created.</p>
  <p>So here's what I tried... The problem is that I access the alerter object's properties:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let alerter = {
    status: false,
    title: "AlerterTitle",
    message: "This is a small alert!",
    snippet: `&lt;div id="alerter"&gt;
                          &lt;div class="alerter-title"&gt;${this.title}&lt;/div&gt;
                          &lt;div class="alerter-body"&gt;${this.message}&lt;/div&gt;
                          &lt;button id="alerter-close"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;`,
  
    show: function(message, title = "Alert") {
      if (this.status) {
        return true;
      }
  
      // set values for title and message
      this.status = true;
      this.title = title;
      this.message = message;
  
      document.body.innerHTML += this.snippet; // add alertBox to the body with changed values
  
      // event listener for close action
      const closeBtn = document.querySelector("#alerter-close");
      closeBtn.addEventListener("click", function() {
        let alertBox = document.querySelector("#alerter");
        document.body.removeChild(alertBox);
        alerter.status = false; //also can somebody explain why I cant use this.satus instead of alerter.status
      })
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#alerter{
              border: 1px solid red;
              padding: 10px;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="alerter.show('This is another alert')"&gt;Click me&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The message and the title of the alert box becomes undefined, but if I console log it, it logs the correct value.</p>
  <p>Thanks in advance.</p>