JavaScript - 显示数组的键和值

JavaScript - display keys and values of an array

本文关键字：键和值 数组 显示 JavaScript      更新时间：2023-09-26

我正在玩一个模块对象并尝试创建一种博客（它不会在现实生活中使用 - 只是我在学习东西）。当用户填写表单并提供标签时，它会检查该标签是否存在于关联数组中，如果不存在，则将其添加为值 = 1。如果标记已存在，则会在值中添加 +1。现在我想在一侧显示每个标签有多少个条目，例如：

烹饪（3）运动（1）

当我添加另一个标签时，它似乎部分工作，它会显示在但不断增加所有类别/标签的数量：

烹饪（1）运动（1）

然后

烹饪（2）运动（2）

。不仅仅是用户刚刚添加的那个。

var myArticles = (function () {
    var s, articles;
    return {
        settings: {
            articleList: "articles", // div with generated articles
            articleClass: "article", // class of an article
            articleIndex: 0,
            sidebar: document.getElementById("sidebar"),
            tagList: {},
            // cats: Object.keys(this.settings.tagList)
        },
        init: function() {
            // kick things off
            s = this.settings;
            articles = document.getElementById(this.settings.articleList);
        this.createArticle();
        },
        createArticle: function() {
            var div = document.createElement("div");
        var getTag = document.getElementById("tag").value;
        var getTitle = document.getElementById("title").value;
        // Add classes
        div.classList.add(this.settings.articleClass, getTag);
        // Add title / content
        var title = document.createElement("h2");
        var textNode = document.createTextNode(getTitle);
        title.appendChild(textNode);
        div.appendChild(title);
        // Add category
        div.innerHTML += "Article" + this.settings.articleIndex;
            articles.appendChild(div);
            this.settings.articleIndex +=1;
        this.updateCategories(getTag);
        },
    updateCategories: function(tag) {
         // Create header
        this.settings.sidebar.innerHTML = "<h3>Categories</h3>";
        // Create keys and count them
        if (tag in this.settings.tagList) {
        this.settings.tagList[tag] += 1;
        } else {
        this.settings.tagList[tag] = 1;
        }
        var cats = Object.keys(this.settings.tagList);
        // Create an unordered list, assign a class to it and append to div="sidebar"
        var ul = document.createElement('ul');
        ul.classList.add("ul-bare");
        this.settings.sidebar.appendChild(ul);
        // iterate over the array and append each element as li
        for (var i=0; i<cats.length; i++){
        var li=document.createElement('li');
        ul.appendChild(li);
        li.innerHTML=cats[i] + "(" + this.settings.tagList[tag] + ")";
        }
    }
    };
}());

和 HTML：

 <body>
    <div id="container">
    <h1>My articles</h1>
    <div id="genArticle" class="left">
      <form id="addArt" method="post">
    <div>
          <label for="title">Title</label>
          <input type="text" id="title" class="forma" placeholder="Title" required />
    </div>
    <div>
          <label for="tag">Tag</label>
          <input type="text" id="tag" class="forma" placeholder="Tag" required />
    </div>
    <div>
          <label for="art">Article</label>
          <textarea id="art" class="forma" required /></textarea>
    </div>
    <input type="button" onclick="myArticles.init()" value="Add Art">
    <input type="reset" value="Reset Form">
    <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">
      </form>
      <div id="articles"></div>
    </div> <!-- end of genArticle -->
    <aside id="sidebar" class="right">
    </aside>
    </div> <!-- end of container -->

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

我认为这一行是错误的

li.innerHTML=cats[i] + "(" + this.settings.tagList[tag] + ")";

这是this.settings.tagList[cats[i]]

不this.settings.tagList[tag]

相关文章：