时间戳

首页 > 解决方案 > 我想显示发布内容的id，目前是用变量表示的，所以我想用数组索引来显示

javascript - 我想显示发布内容的id，目前是用变量表示的，所以我想用数组索引来显示

问题描述

我是 javascript 的初学者。现在，我创建了一个列表应用程序。要显示的内容 id "id + element"。我想使用数组索引显示它，但现在使用变量。

预期的

1：第一个值 2：第二个值 3：第三个值 ...

这是代码。

html

<body>
  <h1>todo list</h1>
  <div>
    <input type="text" id="item">
    <button type="button" id='click-function'>Add</button>
  </div>
  <ul id="todoList"></ul>
  <script src="index.js"></script>
</body>

js

const myfunc = document.getElementById('click-function');
let i = 0;
myfunc.addEventListener('click',function(){
    let todoItems = [];
    let todoItem = document.getElementById('item').value;
    todoItems.push(todoItem);
    todoItems.forEach((element,index,array) => {
        let li = document.createElement('li');
        li.textContent = i + element;
        document.getElementById('todoList').appendChild(li);
        i++;
    }) 
})

标签： javascripthtml

解决方案

更新了您的代码片段，请参阅下面的工作演示：

const myfunc = document.getElementById('click-function');
let i = 0;
myfunc.addEventListener('click',function(){
    let todoItems = [];
    let todoInput = document.getElementById('item');
    let todoItem= todoInput.value;
    todoInput.value='';
    todoItems.push(todoItem);
    todoItems.forEach((element,index,array) => {
        let li = document.createElement('li');
        li.textContent = (i+1)+' ' + element;
        document.getElementById('todoList').appendChild(li);
        i++;
    }); 
})
<body>
  <h1>todo list</h1>
  <div>
    <input type="text" id="item">
    <button type="button" id='click-function'>Add</button>
  </div>
  <ul id="todoList"></ul>
</body>

解释：

Js Array 的起始索引为 0，因此每次要将其显示给用户时，都需要将当前索引增加 1。

建议：

我建议您不要通过代码打印索引，而是使用<ol>（有序列表）代替<ul>（无序列表），这将为您完成工作。

const myfunc = document.getElementById('click-function');
let i = 0;
myfunc.addEventListener('click',function(){
    let todoItems = [];
    let todoInput = document.getElementById('item');
    let todoItem= todoInput.value;
    todoInput.value='';
    todoItems.push(todoItem);
    todoItems.forEach((element,index,array) => {
        let li = document.createElement('li');
        li.textContent = element;
        document.getElementById('todoList').appendChild(li);
        i++;
    }); 
})
<body>
  <h1>todo list</h1>
  <div>
    <input type="text" id="item">
    <button type="button" id='click-function'>Add</button>
  </div>
  <ol id="todoList"></ol>
</body>

推荐阅读