Question

我正在尝试从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>

Answer 1

您每次都会覆盖'output'div的内容。您可以尝试更改

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

到

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

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

*进一步更新*

您正在以某种时髦的方式使用阵列。您可能只想将数组声明为文字，然后使用push方法将条目附加到数组。对于迭代数组，您应该使用标准for循环[例如：for（var i = 0; i＆lt; 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];
...
}

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

Javascript循环遍历对象中的对象

1 个答案: