0

出于某种原因，我无法让我的待办事项列表工作。首先，我有一个名为“list”的全局变量，它存储：document.getElementById('GList');“Glist”是我拥有的有序列表元素的 id。然后，我有一个名为“goal”的 id 和一个名为AddGoal(). 正如您将在下面看到的，该函数所做的第一件事是获取 id 名为“goal”的 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 元素并将其设为pinnerHTMLdiv从textarea元素和我用这个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' />
4

1 回答 1

3

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

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

编辑：li或者，如果您希望为所有.

预期结构：

<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>

于 2013-10-06T14:01:05.360 回答