Question

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

函数的最后一部分最后将textarea中输入的文本添加到我的有序列表中，并将li元素添加到类“MyList”中。

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

这是我尝试使用“MyList”类获取li元素并使其innerHTML成为p元素，其中的类将添加我想要的图像以及带有div的{{1}}包含来自textarea元素的文本的变量目标的类名“goalTxt”以及我用这个div包含目标变量的原因是这样我可以确保它总是与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>标记。

我无法让我的待办事项清单正常工作

1 个答案: