JavaScript - шаблон модуля - проблемы с добавлением divs

Я пытаюсь понять шаблон модуля в JavaScript. Я взял базовый скелет из учебника и попытался адаптировать его к моим потребностям. Есть кнопка, которая должна добавить div с некоторым текстом.JavaScript - шаблон модуля - проблемы с добавлением divs

Вот JavaScript часть:

// 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; 
    } 
};

HTML часть:

<body> 
    <h1>My articles</h1> 
    <div id="article-list"></div> 
    <button onclick="myArticles.init()">Add Article</button> 

    <script src="script.js"></script> 
    </body>

CSS Часть:

.article { 
    weight: 500px; 
    height: 300px; 
    background-color: red; 
    display: block; 
    margin: 10px 0 0 10px; 
}

ли вы помочь мне получить его работу? Кроме того, в разделе настроек изначально значения были окружены $(). Он бросил мне ошибки, поэтому я их удалил.

спасибо.

редактировать: это учебник, я имел в виду: https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

источник

2016-01-18 Wasteland

Ссылка на исходный учебник поможет, так как есть несколько шаблонов модулей. – ShaneQful

Добавил его выше. – Wasteland

Вы ссылаетесь на 'статьи' в методе' createArticle', но объявили его как локальную переменную в 'init'. 'articles' будет неопределенным в контексте' init' –

Есть несколько другой вопрос с указанным кодом:

$(), который вы удалили, имел в виду JQuery
div.setAttribute ("class", this.settings.articleClass); не будет работать должным образом, как ваши настройки класс к селектору запроса .article, а не класс article
статьи является локальным для инициализации, но вы пытаетесь получить к нему доступ в createArticle

Вам нужно сделать что-то как изменения ниже:

JS:

var myArticles = (function() { 
    var s, articles; 
    return { 

     settings: { 
      articleList: "article-list", 
      articleClass: "article", 
      articleIndex: 0 
     }, 

     init: function() { 
      // kick things off 
      s = this.settings; 
      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; 
     } 
    }; 
}());

HTML:

<body> 
    <h1>My articles</h1> 
    <div id="article-list"></div> 
    <button onclick="myArticles.init()">Add Article</button> 
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script src="script.js"></script> 
    </body>

источник

2016-01-18 23:25:59 ShaneQful

Это также лучший пример определения модуля в JS. Вы можете иметь «частные» методы и переменные в анонимной функции, а «публичные» члены могут быть открыты, возвращая объект из функции, содержащей этих членов; как показано здесь. –

Спасибо. У меня есть ошибка: Uncaught TypeError: Невозможно прочитать свойство appendChild из null – Wasteland

Извините, что JQuery/Vanilla JS извинилось, что это должно работать. Примечание. Если вы пытаетесь использовать скрипт JS, вам нужно будет изменить 'var myArticles =' на 'window.myArticles =', чтобы сделать модуль глобальным, чтобы его можно было увидеть JS в событии click. – ShaneQful

Я думаю, что вам нужно сделать что-то подобное, и только заметил, переменная статьи не установлен для «createarticles» Вы должны сделать «статьи "публичная переменная или получить его снова внутри„функции createarticles“

var myArticles = (function(){ 
var s; 
var articles; 
//any methods here are private 
return{ //anything in return method is a public function 
    settings: { 
     articleList: "article-list", 
     articleClass: ".article", 
     articleIndex: 0 
    }, 

    init: function() { 
     // kick things off 
     s = this.settings; 
     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; 
    } 
}; 
})();

источник

2016-01-18 23:17:39 Rosenumber14

Пришлось отредактировать его, потому что я также заметил проблему с переменной «articles», ее набор был локальным для функции init, поэтому функция creatarticle() не увидит ее, это может быть вашей проблемой. – Rosenumber14

Настройки закрытия скобок должны быть завершены символом a, not;. В противном случае ваше решение будет идентичным вашему решению.Я получаю ошибку, упомянутую в комментариях к другому ответу: Uncaught TypeError: Не могу прочитать свойство appendChild из null – Wasteland

Получил это. Я должен был удалить # из списка статей – Wasteland

JavaScript - шаблон модуля - проблемы с добавлением divs

ответ

Смежные вопросы