理想情况下,代码是在提交表单后在网页上显示一些数据:
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。我无法获得代码的最后一部分......只是从类似的问题线程中获取它。