Я пытаюсь построить форму (больше для личного обучения), используя HTML, JS и локальное хранилище, чтобы:
- Получать данные от пользователя
- Отображать входные данные изпользователь
- Хранить данные в локальном хранилище
- Дать возможность пользователю наносить удар по предмету или наносить удар по всему
Вопросы:
- В локальном хранилище всегда хранится последнее введенное значение, а не весь массив.По какой-то причине массив push не добавляет все значения.Чего мне не хватает?
- Забастовка работает для всех сразу, но не для каждого варианта.Какой способ это сделать для каждого варианта?
function display(){
var master_list = [];
var data = document.getElementById('to_do').value;
master_list.push(data);
document.getElementById('form_data').innerHTML += "<li>"+ data +"</li>";
console.log("data is "+ data);
console.log("master list is "+ master_list);
// storeData(master_list);
}
function remove(){
var list = document.getElementById('form_data').innerText;
// console.log("the data is " + list);
document.getElementById('form_data').innerHTML = list.strike();
}
function storeData(master_list){
localStorage.setItem("master_list", JSON.stringify(master_list));
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The To-do Application</title>
<script src="to_do_app.js" charset="utf-8"></script>
</head>
<body>
<h1>Welcome to the To-Do application</h1>
<label>Enter your to-do item: </label>
<input type="text" id="to_do" placeholder="eg: groceries">
<button onclick=display()> Add </button>
<h3>Added Items are:</h3>
<div id="form_data"></div>
<br>
<button onclick=remove()> Clear All </button>
<!-- <h6>Note: To remove please click on the item</h6> -->
</body>
</html>