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;

次に、適切な出力が表示されるはずです (もちろん、スタイルや改行はありません)。

* さらに更新 *

いくつかのファンキーな方法で配列を使用しています。配列をリテラルとして宣言し、プッシュ メソッドを使用してエントリを配列に追加することもできます。配列を反復処理するには、おそらく標準の for ループ [例: for (var i = 0; i < arr. length; ++i) のような構文] または配列 forEach 構文 (ブラウザーでサポートされている場合) を使用する必要があります。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 に答える