JS: problema che non riesco a vedere da solo, entrate...

😈╰•ALBERTO•╯😈

Praticamente nella funzione aggiungiProdotto, verifica se il campo è vuoto, se è vuoto deve stampare il messaggio all'interno di if, ma non me lo stampa quando clicco sul pulsante aggiungi.

<!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><input id="supermercato" type="text" placeholder="es: Conad"><br>
    <button onclick="creaLista();">Crea la lista</button>
</div>
    <p id="messaggio_uno"></p>
    <h2 id="messaggio_due"></h2>

<div id="container2">
    <label>Inserisci i prodotti:</label><input id="inserisciProdotto" type="text" placeholder="es: Insalata"><button onclick="aggiungiProdotto();">+ Aggiungi</button>
    
    <ol></ol>
    
</div>

    <script>
        
        
        var messaggioUno = document.getElementById("messaggio_uno");
        var messaggioDue = document.getElementById("messaggio_due");
        var sezioneUno = document.getElementById("container1"); 
        var sezioneDue = document.getElementById("container2"); 
        sezioneDue.style.display="none";


        function creaLista(){

            var nomeSupermercato = document.getElementById("supermercato").value;

            if(nomeSupermercato ==="" ){
               messaggioUno.innerHTML="Inserisci il nome del supermercato per creare la lista." ;
            }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 ===""){
                messaggioUno.innerHTML ="Compila il campo di testo.";
            }
        }
    </script>
   
</body>
</html>

@Giulio_M

Giulio_M

😈╰•ALBERTO•╯😈 sto facendo alcune prove ma non compare neanche a me l'output... A vedere così il codice (un po' incasinato XD) non trovo l'errore. Faccio qualche modifica, eventualmente se risolvo ti aggiorno con la risposta 😉

😈╰•ALBERTO•╯😈 Aggiornamento: ti posso dire che il problema riguarda comunque la stringa messaggioUno.innerHTML="Compila il campo di testo."; anche se di per sé è corretta (semplicemente l'output non viene stampato). Se invece scrivi ad esempio console.log("Compila il campo di testo.");, questo viene mostrato nella Console, significa quindi che il resto è corretto.

Ho trovato un modo per risolverlo: avendo sempre messaggioUno.innerHTML="Compila il campo di testo."; significa che accedi sempre allo stesso elemento, con ID "messaggioUno". Quindi ti consiglio prima di tutto, due cose:

al posto di P, H2, definisci i blocchi come <div>, quindi:
- <div id="messaggio_uno"></div>
- <div id="messaggio_due"></div>

Poi se vuoi che l'output (all'interno di questo blocco <div> predisposto) sia all'interno di un <p> piuttosto che <h2>, questo lo puoi fare gestendo l'output quindi del tipo ...innerHTML="<h2>testo</h2>";

Quindi, all'interno della funzione aggiungiProdotto(), il messaggio lo mostri per l'altro blocco ovvero: messaggioDue.innerHTML="Compila il campo di testo.";. Ho sostituito messaggioUno con messaggioDue, dove ovviamente avevi già definito tu per semplicità:

var messaggioUno = document.getElementById("messaggio_uno");
var messaggioDue = document.getElementById("messaggio_due");

Quindi in conclusione, evita sovrapposizioni del tipo funzioni diverse che scrivono su un blocco con lo stesso ID. Meglio creare blocchi separati, con ID separati e quindi una funzione diversa scrive su un blocco diverso, così eviti problemi 🙂

😈╰•ALBERTO•╯😈 Ma io non voglio stampare in console

certo, queste cose si fanno solo come verifica, per identificare un eventuale errore, è in questo mdoo che poi ho potuto capire l'origine del problema e quindi risolverlo 🙂

😈╰•ALBERTO•╯😈

Giulio_M OK grz

😈╰•ALBERTO•╯😈

Giulio_M

Ma io non voglio stampare in console

😈╰•ALBERTO•╯😈

Giulio_M

Praticamente ho capito che usando lo stesso paragrafo non va bene, quindi ne ho creato un altro e funziona, ma mi compare sopra il textbox invece che comparire giù

<!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><input id="supermercato" type="text" placeholder="es: Conad"><br>
    <button onclick="creaLista();">Crea la lista</button><br>
</div>
    <p id="messaggio_uno"></p>
   <h2 id="messaggio_due"></h2>
   <p id="messaggio_tre"></p>

<div id="container2">
    <label>Inserisci i prodotti:</label><input id="inserisciProdotto" type="text" placeholder="es: Insalata"><button onclick="aggiungiProdotto();">+ Aggiungi</button>
    
    <ol></ol>
    
</div>

    <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"); 
        sezioneDue.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");
            }
        }
    </script>
   
</body>
</html>

Apple Lover - I am Kenough

Lascia stare perché queste cose non ti fanno guadagnare soldi. Vattene a fare il cameriere piuttosto

Giulio_M

😈╰•ALBERTO•╯😈 ah beh, chiaramente per come è impostato 😅

   <p id="messaggio_uno"></p>
   <h2 id="messaggio_due"></h2>
   <p id="messaggio_tre"></p>
<div id="container2">
    <label>Inserisci i prodotti:</label>

Scritto così, se lavori nel blocco con ID "messaggio_uno" ovviamente ti va ad inserire l'elemento in quel blocco quindi per esempio che sta sopra <label>Inserisci i prodotti:</label>.

In pratica quello che devi fare, i vari blocchi li metti semplicemente sotto (subito prima del tag </script>). Appunto che la predisposizione del blocco si trovi posizionato sotto "inserisci i prodotti" e non sopra.

😈╰•ALBERTO•╯😈

Giulio_M

L'ho sistemato, me ne sono accorto tardi, piccoli inciampi, fino alla fine avrò problemi ahahaha