2016-03-26 3 views
1

Я создаю небольшой список дел и хочу сделать следующее: каждый текстовый ввод (или фактически копия текстового ввода) должен быть добавлен в пустую строку (копировать, потому что он не должен исчезать при добавлении). Тогда у меня есть функция, которая вызывается, когда пользователь нажимает на кнопку, а затем я хочу выбрать случайную вещь todo. Я даже не дошел до точки, когда я выбираю случайную вещь todo, потому что мой код просто не работает. Кажется, что добавление действительно происходит, но вместо добавления вещи todo, которая добавляется: [object HTMLInputElement] Любой есть идея?todo list- пытается добавить входные данные в массив/не работает

Мой 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> 
+0

есть несколько ошибок: 1) checkBox.onclick = updatingItem; shoud be: checkBox.onclick = "updateItem()"; То же самое для item.onclick = addItem ;. 2) Переменная updateItem является частной в функции updateItem, и вы пытаетесь ее прочитать в функции addItem. Попробуйте исправить это. –

+0

Фактически я сделал это специально, потому что item.onclick = addItem(); неверно - если я это сделаю, функция сразу называется, это не то, что я хочу. Кроме того, весь код работает просто отлично, поэтому я не должен менять то, что вы упомянули, только часть, в которой я пытаюсь добавить входы в массив, не работает. – learningcoding

ответ

0

попробовать

var listOfItems=textItem.value; 

вместо

var listOfItems=textItem; 
+0

Большое спасибо! Это сработало :) – learningcoding

+0

Теперь все отлично работает, только когда я сменил свой код и хотел только добавить эти входные элементы в массив, который не был отключен, он прекратил работу .. – learningcoding

1

Функция randomItem() работает некорректно, так как вы пытаетесь создать String от Object непосредственно при использовании listOfItems. Используйте его значение или попробуйте использовать следующий код для правильного просмотра. Также добавьте один элемент списка в HTML с id="myList". ИТ будет работать нормально.

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> 
Смежные вопросы