Question

我正在构建一个小的待办事项列表，并希望执行以下操作：每个文本输入（或实际上是文本输入的副本）应添加到空字符串中（复制，因为它在添加时不应消失）。然后我有一个函数，当用户点击一个按钮然后我想选择一个随机的待办事项时调用。当我挑选一个随机的待办事项时，我甚至没有达到这一点，因为我的代码不起作用 - 似乎添加确实发生了，但不是添加一个待办事项，而是添加： [object HTMLInputElement] 有人有想法吗？

我的javascript代码：

var totalItems=0;
var listOf="";
function randomItem(){
    document.getElementById("randomArray").innerHTML=listOf;
}

function updatingItem() {

    var cbId = this.id.replace("cb_", "");
    var textItem = document.getElementById("item_" + cbId);
    if (this.checked) {
        textItem.style.textDecoration = "line-through";
        textItem.style.background="pink";
    }
    else {
        textItem.style.textDecoration = "none";
        textItem.style.background="white";
    }
}
function addItem() {
    totalItems++;

    var entry = document.createElement("li");
    var checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.id = "cb_" + totalItems;
    checkBox.onclick = updatingItem;

    var span = document.createElement("span");
    span.id = "item_" + totalItems;
    span.innerHtml = textItem;

    var textItem = document.getElementById("textItem");
    span.innerText = textItem.value;

    var location = document.getElementById("todoList");

    entry.appendChild(checkBox);
    entry.appendChild(span);
    location.appendChild(entry);
    var listOfItems=textItem;
    listOf+=listOfItems;
}

var item = document.getElementById("add");
item.onclick = addItem;
document.getElementById("lastButton").onclick=randomItem;

HTML：

<body>
    <div class="table">
        <h1>To Do List</h1>
    </div>
    <p>
        <input type="text" id="textItem"/>
        <button id="add"><b>Add</b></button>
    </p>
    <ul id="todoList"></ul>
    <h3>Pick a random to do thing to do for today</h3>
    <button id="lastButton">Go!</button>
    <p id="randomArray"></p>
</body>

Answer 1

您的randomItem()功能工作不正常，因为您在使用String时尝试直接从Object创建listOfItems。要么使用它的值，要么尝试使用以下代码来获得正确的视图。还可以使用id="myList"在HTML中添加一个列表元素。它会正常工作。

JS：

function randomItem(){
    var counter = 0;
    var textItems = document.getElementsByTagName("input");
    var done = [];

    for (var i=0; i<textItems.length; i++)
    {
        if(textItems[i].type == "checkbox")
        {
            if(textItems[i].checked)
            {
                document.getElementById("item_"+i);

                done.push(document.getElementById("item_"+i).innerHTML);

                var list = document.getElementById('myList');

                var data = document.createElement('li');
                data.appendChild(document.createTextNode(done[counter]));
                counter++;
                list.appendChild(data);
            }
        }
    }
}

HTML：

<ol id = "myList"></ol>

Answer 2

试

var listOfItems=textItem.value;

而不是

var listOfItems=textItem;

todo list-尝试向数组添加输入/不起作用

2 个答案: