1

我试图只word从newEntry对象的每个新实例内部检索。每次我添加一个新单词时它都会显示在控制台中，但当我将它分配给.innerHTML. 任何人都可以帮忙吗？

完整代码：

    <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>
4

1 回答 1

1

您每次都在覆盖“输出”div 的内容。你可以尝试改变

            document.getElementById("Output").innerHTML = wordSet.word;

到

            document.getElementById("Output").innerHTML += wordSet.word;

然后您应该会看到正确的输出（当然，没有样式或换行符）。

* 进一步更新 *

你正在以一些时髦的方式使用你的数组。您可能只想将数组声明为文字，然后使用 push 方法将条目附加到数组中。对于遍历数组，您可能应该使用标准 for 循环 [例如：for (var i = 0; i < arr.length; ++i) 类型的语法，或数组 forEach 语法（如果您的浏览器支持）。for in 将遍历对象的所有属性，虽然在技术上对于数组是安全的，但在某种程度上是一种不建议的做法。

此外，如果您只是要将元素包装在 JSON 中并将它们填充到列表中，那么实际上没有理由将属性分配给“this”。

我会推荐如下内容：

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

然后在与您的单词列表交互时，您会说：

for (var i = 0; i < wordList.length; ++i) {
    var wordEntry = wordList[i];
...
}

啦啦：

/ 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;
            };
于 2012-06-26T17:44:38.827 回答