Javascript 待办事项列表-尝试向数组添加输入/不起作用
我正在构建一个小的待办事项列表,并希望执行以下操作:每个文本输入(或者实际上是文本输入的一个副本)都应该添加到一个空字符串中(复制,因为添加时它不应该消失)。然后我有一个函数,当用户点击一个按钮时调用,然后我想随机选择一个待办事项。 我甚至没有提到我随机挑选一个待办事项的要点,因为我的代码根本不起作用-似乎添加确实发生了,但没有添加一个待办事项,而是添加了:Javascript 待办事项列表-尝试向数组添加输入/不起作用,javascript,html,Javascript,Html,我正在构建一个小的待办事项列表,并希望执行以下操作:每个文本输入(或者实际上是文本输入的一个副本)都应该添加到一个空字符串中(复制,因为添加时它不应该消失)。然后我有一个函数,当用户点击一个按钮时调用,然后我想随机选择一个待办事项。 我甚至没有提到我随机挑选一个待办事项的要点,因为我的代码根本不起作用-似乎添加确实发生了,但没有添加一个待办事项,而是添加了:[object htmlinputten] 有人有主意吗 我的javascript代码: var totalItems=0; var lis
[object htmlinputten]
有人有主意吗
我的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:
待办事项清单
添加
随机挑选一件今天要做的事情
走!
试试看
而不是
var listOfItems=textItem;
您的randomItem()
函数工作不正常,因为您试图在使用listOfItems
时直接从对象创建字符串。使用它的值,或者尝试使用以下代码,以获得正确的视图。还可以使用id=“myList”
在HTML中添加一个列表元素。它会很好用的
JS:
函数随机项(){
var计数器=0;
var textItems=document.getElementsByTagName(“输入”);
var done=[];
对于(var i=0;有两个错误:1)checkBox.onclick=updateingItem;应该是:checkBox.onclick=“updateingItem()”;与item.onclick=addItem;相同。2)updateingItem变量在updateingItem函数中是私有的,您正在尝试在addItem函数中读取它。尝试修复此问题。实际上,我是故意这样做的,因为item.onclick=addItem();是错误的-如果我这样做,函数将立即被调用,这不是我想要的。此外,我的整个代码工作正常,因此我不应该更改您提到的内容,只有我尝试向数组添加输入的部分不起作用。现在一切都很好,只是当我更改代码并且只想添加这些内容时将未签出的项输入到数组中,该数组将停止工作。。
var listOfItems=textItem.value;
var listOfItems=textItem;
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);
}
}
}
}
<ol id = "myList"></ol>