JavaScript:过滤后的数据不会显示在DOM上

时间:2017-03-06 11:05:12

标签: javascript dom

理想情况下,代码是在提交表单后在网页上显示一些数据:

HTML:

<form>
    <input id="label" type="text">
    <button id="label_btn" type="button">Submit</button>
</form>

<div id="plate"></div>

JavaScript的:

const all_levels = [{"word": "花", "label": "は", "english": "flower"}, {"word": "八", "label": "は", "english": "eight"}, {"word": "七", "label": "な", "english": "seven"}, {"word": "六", "label": "ろ", "english": "six"}]

const label = document.querySelector('#label'),
      labelBtn = document.querySelector('#label_btn'),
      plate = document.querySelector('#plate');

labelBtn.addEventListener('click', () => {
    let words = [];
    if (label.value == "") 
        words = all_levels;
    else {
        const inputValue = label.value.split(', ')
        for (input of inputValue) 
          words.push(...all_levels.filter(word => word.label == input))
        // console.log(words)
        return words;
    }

    plate.innerHTML = words.map(word => 
        `<p class="word">
            ${word.word}
            <span>${word.english}</span>
        </p>`
    ).join("");
});

感谢Andreas的建议,解决了一些问题。剩下的是,虽然多个标签的文字在控制台中显示正确,但它们并没有在网页上显示。我也试过下面没有工作的代码:

else {
    words = all_levels.filter(word, i => {
      return this.keys.indexOf(i.word.label) > -1;
    }, {
      "keys" : ["は", "な"]
    }
}

PS。我无法获得代码的最后一部分......只是从类似的问题线程中获取它。

0 个答案:

没有答案