javascript - 输入值 - 未定义或未显示

Question

我正在编写待办事项列表应用程序，但 JavaScript 代码有一些错误。所以问题是，当 Li 出现时，它是“未定义”的，有时甚至是空白HTML

    <section>
    <div class="list-app">
        <ul id="list">
            <li>Hell</li>
        </ul>
        <div class="bottom">
            <input type="text" name="game"  placeholder="Type Your List">
            <img src="add.png" id="add">
            <img src="trash.jpg" id="remove">

        </div>
    </div>
</section>

和javascript

var remove = document.querySelector('#remove');
var add = document.getElementById('add');
var textPlace = document.querySelector('input');
var listSingle = document.querySelector('LI');
var input = document.getElementsByName('game');
var items = [''];

add.addEventListener('click', function() {
  items.push = [input.value];

document.getElementById('list').innerHTML = '<li>' + items + '</li>';


})

不介意其他代码，它只是添加按钮的复制版本

Answer 1

我认为问题出在下面的代码上。这将返回 NodeList 的集合 ( MDN Ref ) document.getElementsByName('游戏')

话虽如此，如果您需要获取输入的值，则必须使用以下代码

items.push(input[0].value);

但是，我认为这不是使用 getElementsByName 的好习惯，我更喜欢使用 getElementById 并将 id 属性添加到 输入元素。

此外，如果您想将输入值作为单独的列表项列出，请使用以下代码。

document.getElementById('list').innerHTML = items.map(item => '<li>' + item + '</li>');

希望这有帮助!