I'm trying to retrieve only word from inside each new instance of the newEntry object. It displays in the console every time I add a new word, but not when I assign it to .innerHTML. Can anyone help?
Full code:
<style type="text/css" media="screen">
#output { height: auto;}
</style>
<script type="text/javascript">
// Array to contain words
var wordList = Array();
// word list constructor
function addWord(word) {
this.word = word;
this.description = "a description of the word";
this.entryDate = "01.02.2012";
this.userName = "John Doe";
var newEntry = {
word: word,
description: description,
entryDate: entryDate,
userName: userName
};
wordList[wordList.length] = newEntry;
};
// collect data from form
function getFormData() {
var results = document.getElementById("textbox").value;
addWord(results);
var data = '<ul>';
var numObjects = "Number of words = " + wordList.length;
for (var x in wordList) {
var wordSet = wordList[x];
for (var item in wordSet.word[x]) {
console.log(wordSet.word);
data += "<li><a href='#'>" + wordSet.word + "</a></li>";
};
};
data += "</ul>";
document.getElementById("Objects").innerHTML = numObjects;
document.getElementById("Output").innerHTML = data;
// console.log(wordList);
};
</script>
</head>
<body>
<form id="form_id" name="form_name" action="" method="post">
<p><label for="text">Enter words:<br/></label>
<input type="textarea" id="textbox" />
<input type="button" value="Go" onclick="getFormData()"
</form>
<ul id="Output"></ul>
<div id="Objects"></div>
</body>
1 Answer 1
You're overwriting the content of the 'output' div each time. You could try changing
document.getElementById("Output").innerHTML = wordSet.word;
to
document.getElementById("Output").innerHTML += wordSet.word;
Then you should see the proper output (sans styling, or line breaks, of course).
* Further update *
You're using your arrays in some funky ways. You might want to just declare your array as a literal and then use the push method to append the entry to the array. For iterating over the array you should probably use the standard for loop [eg: for (var i = 0; i < arr. length; ++i) kind of syntax, or the array forEach syntax (if supported by your browser). for in will iterate over all the properties of the object, and while technically safe for an array, is somewhat of an advised-against practice.
Also, there's really no reason to assign properties into 'this' if you are just going to wrap the elements in JSON and stuff them in the list.
I'd recommend something like the following:
// Array to contain words
var wordList = [];
// append word to word list
function addWord(word) {
var newEntry = {
word: word,
description: "a description of the word",
entryDate: "01.02.2012",
userName: "John Doe"
};
wordList.push(newEntry);
};
Then when interacting with your word list you would say:
for (var i = 0; i < wordList.length; ++i) {
var wordEntry = wordList[i];
...
}
a la:
/ collect data from form
function getFormData() {
var results = document.getElementById("textbox").value;
addWord(results);
var data = '<ul>';
for (var i = 0; i < wordList.length; ++i) {
var wordEntry = wordList[i];
// I removed the inner for loop here, as you were iterating over all
// the proerties of the word string. This would loop for all the
// individual characters, as well as all the methods on the string
// (e.g. charAt, indexOf, etc.) It could have been a source of
// problems for you, and given the original following line, would
// have shown duplicate entries in the list.
data += "<li><a href='#'>" + wordEntry.word + "</a></li>";
};
data += "</ul>";
document.getElementById("Output").innerHTML = data;
};
7 Comments
+= wordSet.word to print results as <li> items, but it seems to be repeating the object contents and adding them, rather than updating the list. New code is in the original post above...word seems to hang after 4 or 5 are added into the <ul>. I can see the Object wordList is actually functioning fine by displaying the length of wordList.