javascript - 我无法让我的待办事项列表正常工作

Question

出于某种原因，我无法让我的待办事项列表正常工作。首先，我有一个名为“list”的全局变量，它存储: document.getElementById('GList'); “Glist”是我拥有的有序列表元素的 id。然后，我有一个带有名为“goal”的 id 的文本区域和一个名为 AddGoal() 的函数。正如您将在下面看到的，该函数所做的第一件事是获取 id 名为“goal”的文本区域的值，并将其存储到一个也名为“goal”的变量中。创建另一个名为“entry”的变量，它存储创建的 li 元素，如下所示 var entry = document.createElement('li'); 该变量“entry”也使用 entry 赋予属性。设置属性。它被赋予一个类和类名“MyList”。下面的代码发生的情况是，我在文本区域中输入文本，文本被添加到我的列表中，一切都很好，直到我尝试将另一个项目添加到我的列表中。一旦我添加另一个项目，它就会替换第一个项目并添加其他 li 元素，但所有元素都包含相同的替换文本。我将非常感谢您的帮助。

函数的最后一部分最终将在文本区域中键入的文本添加到我的有序列表和具有“MyList”类的 li 元素中。

entry.appendChild(document.createTextNode(goal));
list.appendChild(entry);

这是我尝试获取带有“MyList”类的 li 元素，并使其成为一个 p 元素，其类将添加我想要的图像以及一个 div 类名为“goalTxt”，包装变量 goal，其中包含来自 textarea 元素的文本以及我用此 div 包装 goal 变量的原因有了一个类，我就可以确保它始终处于 CSS 的某个位置。

document.getElementsByClassName('MyList')[0].innerHTML = "<p class='bulletp'></p>" + "   <div class='goalTxt'>" + goal + "</div>";

完整代码如下:

<style>
.bulletp {
    position:relative;
    top:-2px;
    left:5px;
    height: 30px;
    width: 20px;
    background-image:url('images/point_03.png');
}
</style>
<ol id="GList"></ol>
<textarea id="goal"></textarea> 
<script>
var list = document.getElementById('GList');

function AddGoal() {
    var goal = document.getElementById('goal').value;
    var entry = document.createElement('li');
    entry.setAttribute("class", "MyList");
    entry.appendChild(document.createTextNode(goal));
    list.appendChild(entry);
    document.getElementsByClassName('MyList')[0].innerHTML = "<p class='bulletp'></p>" +
        "<div class='goalTxt'>" + goal + "</div>";
}
</script>
<input type='button' onclick='AddGoal()' value='Submit' />

Answer 1

您正在使用 getElementsByClassName('MyList')[0].innerHTML 进行更新。 [0]意味着它将始终用 class='MyList' 更新第一个元素因此你的第一个 li值也在更新。

你根本不需要那条线。只需将其删除即可。这是一个示例 fiddle 。我已经注释掉了整行。

编辑: 或者，如果您希望为所有 li 实现以下结构，使用这个fiddle .

预期结构:

<li class="MyList">
    <p class="bulletp"></p><div class="goalTxt">abcd</div>
</li>

对应代码:

function AddGoal() {
    var goal = document.getElementById('goal').value;
    var entry = document.createElement('li');
    entry.setAttribute("class", "MyList");

    var bulletp = document.createElement('p'); // to add <p> tag
    bulletp.setAttribute("class", "bulletp");
    entry.appendChild(bulletp);

    var goalTxt = document.createElement('div'); // to add <div> tag
    goalTxt.setAttribute("class", "goalTxt");
    goalTxt.appendChild(document.createTextNode(goal));

    entry.appendChild(goalTxt);
    list.appendChild(entry);
   //console.log(list.innerHTML);

}

注意:我强烈建议不要使用 <p>或<div> <li> 内的标签标签。