JavaScript - display keys and values of an array -
i'm playing module object , trying create sort of blog (it's not going used in real life - me learning stuff). when user fills form , provides tag, checks whether tag exists in associative array, if not, adds value = 1. if tag exists, adds +1 value. want display on side how many entries each tag there are, eg:
cooking(3) sport(1)
it seems partially work when add tag, displays in keeps increasing count of categories/tags:
cooking(1) sport(1)
then
cooking(2) sport(2)
...not 1 user has added.
var myarticles = (function () { var s, articles; return { settings: { articlelist: "articles", // div generated articles articleclass: "article", // class of 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 , 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 unordered list, assign class , append div="sidebar" var ul = document.createelement('ul'); ul.classlist.add("ul-bare"); this.settings.sidebar.appendchild(ul); // iterate on array , append each element li (var i=0; i<cats.length; i++){ var li=document.createelement('li'); ul.appendchild(li); li.innerhtml=cats[i] + "(" + this.settings.taglist[tag] + ")"; } } }; }()); and 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>
i think line wrong
li.innerhtml=cats[i] + "(" + this.settings.taglist[tag] + ")";
it this.settings.taglist[cats[i]]
not this.settings.taglist[tag]
Comments
Post a Comment