A me non sembra che l'abbia scritto male, poi se c'è qualcosa che non vedo e un altro discorso. Adesso io spengo il pc, perché è una giornata che scrivo codice per creare questo programma per uso personale.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista della spesa</title>
</head>
<body>
<h1>Lista della spesa</h1>
<div id="container1">
<label>Supermercato:</label><br>
<input id="supermercato" type="text" placeholder="es: Conad"><br>
<button onclick="creaLista();">Crea lista</button>
</div>
<p id="messaggio_uno"></p>
<h2 id="messaggio_due"></h2>
<div id="container2">
<label>Aggiungi prodotti:</label><br>
<input id="inserisciProdotto" type="text" placeholder="es: Insalata"><button onclick="aggiungiProdotto();">+ Aggiungi</button>
<ol id="listaProdotti"></ol>
</div>
<p id="messaggio_tre"></p>
<button id="salvaLista" onclick="salvaLista();">Salva</button>
<p id="messaggio_quattro"></p>
<button onclick="ripristinaListe();">Riprendi liste salvate</button>
<script>
var messaggioUno = document.getElementById("messaggio_uno");
var messaggioDue = document.getElementById("messaggio_due");
var messaggioTre = document.getElementById("messaggio_tre");
var sezioneUno = document.getElementById("container1");
var sezioneDue = document.getElementById("container2");
var salvaButton = document.getElementById("salvaLista");
sezioneDue.style.display="none";
salvaButton.style.display="none";
function creaLista(){
var nomeSupermercato = document.getElementById("supermercato").value;
if(nomeSupermercato ==="" ){
messaggioUno.innerHTML="Inserisci il nome del supermercato per creare la lista.".fontcolor("red") ;
}else{
sezioneDue.style.display="block";
messaggioUno.style.display="none";
sezioneUno.style.display="none";
messaggioDue.innerHTML = "Supermercato: " + nomeSupermercato;
}
}
function aggiungiProdotto(){
var inserisciProdotti = document.getElementById("inserisciProdotto").value;
if(inserisciProdotti ===""){
messaggioTre.innerHTML ="Il campo di testo è vuoto.".fontcolor("red");
}else{
messaggioTre.style.display="none";
salvaButton.style.display="block";
var li = document.createElement("li");
li.inserisciProdotti=inserisciProdotti;
listaProdotti.appendChild(li);
li.textContent=inserisciProdotti;
li.classList.add("elementiLista");
var button = document.createElement("button");
button.inserisciProdotti=inserisciProdotti;
listaProdotti.appendChild(button);
button.textContent="X";
button.classList.add("rimuoviElemento");
button.addEventListener("click" , function(){
li.parentNode.removeChild(li);
});
button.addEventListener("click" , function(){
button.parentNode.removeChild(button);
});
}
}
function salvaLista(){
messaggio_quattro.innerHTML="Lista salvata!".fontcolor("green");
prodottoInMemoria(inserisciProdotti);
var prodotti =[];
var lista = document.getElementsByClassName("elementiLista");
for(var i=0; i<lista.length; i++){
prodotti.push(lista[i].textContent);
}
localStorage.setItem("listaSpesa" ,JSON.stringify(prodotti));
}
function ripristinaListe(){
var listaSalvata = localStorage.getItem("listaSpesa");
if(listaSalvata){
var prodotti = JSON.parse(listaSavata);
for(var i=0; i<prodotti.length; i++){
var li = document.createElement("li");
li.textContent = prodotti[i];
li.classList("elementiLista");
var button = document.createElement("button");
button.inserisciProdotti=inserisciProdotti;
listaProdotti.appendChild(button);
button.textContent="X";
button.classList.add("rimuoviElemento");
button.addEventListener("click" , function(){
li.parentNode.removeChild(li);
});
button.addEventListener("click" , function(){
button.parentNode.removeChild(button);
});
li.appendChild(button);
listaProdotti.appendChild(li);
}
}
}
</script>
</body>
</html>
@Giulio_M
