title: JavaScript - module pattern - problems with adding divs
body: <p>I'm trying to understand a module pattern in JavaScript. I've taken a basic skeleton from a tutorial and tried to adapt it to my needs. There's a button that should add a div with some text.</p>
  
  <p>Here's the JavaScript part:</p>
  
  <pre><code>// The module
  var s,
      myArticles = {
  
      settings: {
          articleList: "#article-list",
          articleClass: ".article",
          articleIndex: 0
      },
  
      init: function() {
          // kick things off
          s = this.settings;
          var articles = document.getElementById(this.settings.articleList);
          this.createArticle();
      },
  
      createArticle: function() {
          var div = document.createElement("div");
          div.setAttribute("class", this.settings.articleClass);
          div.innerHTML = "Article" + this.settings.articleIndex;
          articles.appendChild(div);
          this.settings.articleIndex +=1;
      }
  };
  </code></pre>
  
  <p>HTML part:</p>
  
  <pre><code>&lt;body&gt;
      &lt;h1&gt;My articles&lt;/h1&gt;
      &lt;div id="article-list"&gt;&lt;/div&gt;
      &lt;button onclick="myArticles.init()"&gt;Add Article&lt;/button&gt;
  
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>CSS Part:</p>
  
  <pre><code>.article {
      weight: 500px;
      height: 300px;
      background-color: red;
      display: block;
      margin: 10px 0 0 10px;
  }
  </code></pre>
  
  <p>Would you help me get it work?
  Also, in the settings section, originally the values were surrounded by $( ). It threw errors for me so I removed them.</p>
  
  <p>Thank you. </p>
  
  <p>edit: this is the tutorial I was referring to:
  <a href="https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/" rel="nofollow">https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/</a></p>