Несколько списков и кнопок, но ввод текста не сохраняется в правильном списке

Question

Я пытаюсь создать несколько списков на одной странице с несколькими кнопками «Добавить».

Ввод текста в текстовое поле 1 и нажатие кнопки1 должно только добавлять вещи в список1 (понедельник). Но button1 добавляет текст из текстового поля 2 в последний загруженный JS, который является list2 (вторник). Всего 8 списков, я только пытаюсь получить первые 2 списка рабочих атм.

Вот JSFiddle: https://jsfiddle.net/sarwech/vrn5s2ns/4/

Это похоже есть не правильное закрытие и я рассмотрел создание отдельных, локальных функций, но я не слишком уверен, что ...

Ниже работал, когда Я только хотел бы добавить элементы в каждом списке:.

document.getElementById ("add1") OnClick = функция() {

var node = document.createElement("Li"); 
var text = document.getElementById("user_input1").value; 
var textnode=document.createTextNode(text); 
node.appendChild(textnode); 
document.getElementById("list_item1").appendChild(node); 
localStorage.setItem('monday', JSON.stringify(list_item1)); 
show(); 

return false; } 

доку ment.getElementById ("add2"). OnClick = функция() {

var node = document.createElement("Li"); 
var text = document.getElementById("user_input2").value; 
var textnode=document.createTextNode(text); 
node.appendChild(textnode); 
document.getElementById("list_item2").appendChild(node); } 

Цените любую помощь!

Answer 1

Это происходит потому, что у вас есть два определения функций add. Из-за hoisting последнее определение будет подавлять первое. Вот почему вы на самом деле привязываете обработчик щелчка по времени к кнопкам добавления как в дневное, так и в понедельник.

Вы должны рассмотреть переписывать код для многократного использования компонентов, что-то вроде

function DayMeals(id, title) { 
    var self = this; 

    this.id = id; 

    this.$el = document.createElement('div'); 
    this.$el.classList.add('row'); 
    this.$el.innerHTML = '<h4>' + title + '</h4><input type="text"/><button>Add</button><ol></ol>'; 

    this.$list = this.$el.querySelector('ol'); 
    this.$input = this.$el.querySelector('input'); 
    this.$addButton = this.$el.querySelector('button'); 

    this.meals = this.getFromStorage(); 
    this.updateView(); 

    this.$addButton.addEventListener('click', function() { 
    self.add(self.$input.value); 
    }); 

    this.$el.addEventListener('click', function(e) { 
    if (e.target.dataset.remove) { 
     self.remove(e.target.dataset.remove) 
    } 
    }); 
} 

DayMeals.prototype.getFromStorage = function() { 
    var storage = localStorage.getItem(this.id); 
    return storage ? JSON.parse(storage) : []; 
}; 

DayMeals.prototype.putToStorage = function() { 
    localStorage.setItem(this.id, JSON.stringify(this.meals)); 
}; 

DayMeals.prototype.add = function(meal) { 
    this.meals.push(meal); 
    this.putToStorage(); 
    this.updateView(); 
}; 

DayMeals.prototype.remove = function(index) { 
    this.meals.splice(index, 1); 
    this.putToStorage(); 
    this.updateView(); 
}; 

DayMeals.prototype.updateView = function() { 
    var listContent = ''; 

    this.meals.forEach(function(meal, i) { 
    listContent += '<li>' + meal + '<button data-remove="' + i + '">x</button></li>'; 
    }); 

    this.$list.innerHTML = listContent; 
}; 

fiddle

Answer 2

У вас есть две функции с именем 'add', а последняя - первая. Назовите их правильно, т. Е. mondayAdd, tuesdayAdd. То же самое касается других функций, которые имеют одно и то же имя: «показать», «удалить».