Incrementare quantità cliccando su bottone

**budwaiser4** · 21-01-2016, 02:13

Salve ragazzi, sto diventando scemo per una cosa semplice ma che non va perchè probabilmente sto sbagliando ma devo rispolverare javascript.Allora, devo fare in modo che cliccando sul bottone, come vedete nell'immagine, il valore cambi per ogni click. Quindi se clicco 1 volta al posto dello 0 si visualizza 1, se clicco 2 volte si visualizza 2 e se clicco 3 volte si visualizza 3. Il massimo di click che si può fare sul bottone è 3.

Screenshot_1.png

Ora il codice che sto usando io è questo (ovviamente ho messo come prova che il valore è uguale a 0 ma non funziona uguale)

codice:

<button class="btn" onClick="seleziona()" id="selectbutton">Selezionare il prodotto</button>
    <label id="risultato">0</label>    


function seleziona(){      
   var x = document.getElementById("risultato").value;   
 if(x == 0){        
document.getElementById("risultato").setValue = x + 1; 
   }    
}

Grazie a chiunque mi darà una mano!

**KillerWorm** · 21-01-2016, 03:14

Ciao, setValue non credo esista. Generalmente puoi usare la proprietà value su elementi che hanno tale attributo con cui impostarne, appunto, il valore. L'elemento label non possiede questo attributo, ma il valore è inserito direttamente come testo html all'interno dell'elemento stesso. In questo caso dovrai usare la proprietà innerHTML.

Una soluzione minimale può essere questa:

codice:

function seleziona(){
  document.getElementById("risultato").innerHTML++;   
}

Ad ogni click, il valore viene incrementato di 1 attraverso l'operatore ++.

Per limitare il valore a 3 puoi usare una cosa del genere:

codice:

function seleziona(){
  var e = document.getElementById("risultato");
  e.innerHTML = Math.min(3,+e.innerHTML+1);   
}

In sostanza viene preso il valore minimo fra 3 e il valore corrente + 1.
Fai attenzione anche al + posto prima di e.innerHTML. Questo equivale a scrivere Number(e.innerHTML). Questo converte il valore da stringa testuale a numero per poter eseguire correttamente la somma.

Sul precedente esempio non c'è il problema perchè l'operatore ++ converte automaticamente il valore in numero.

Se ti serve azzerare il valore al quarto click, puoi usare l'operatore modulo (%) in questo modo:

codice:

function seleziona(){
  var e = document.getElementById("risultato");
  e.innerHTML = (+e.innerHTML+1)%4;
}

**budwaiser4** · 21-01-2016, 03:39

Originariamente inviata da KillerWorm

Ciao, setValue non credo esista. Generalmente puoi usare la proprietà value su elementi che hanno tale attributo con cui impostarne, appunto, il valore. L'elemento label non possiede questo attributo, ma il valore è inserito direttamente come testo html all'interno dell'elemento stesso. In questo caso dovrai usare la proprietà innerHTML.

Una soluzione minimale può essere questa:

codice:

function seleziona(){
  document.getElementById("risultato").innerHTML++;   
}

Ad ogni click, il valore viene incrementato di 1 attraverso l'operatore ++.

Per limitare il valore a 3 puoi usare una cosa del genere:

codice:

function seleziona(){
  var e = document.getElementById("risultato");
  e.innerHTML = Math.min(3,+e.innerHTML+1);   
}

In sostanza viene preso il valore minimo fra 3 e il valore corrente + 1.
Fai attenzione anche al + posto prima di e.innerHTML. Questo equivale a scrivere Number(e.innerHTML). Questo converte il valore da stringa testuale a numero per poter eseguire correttamente la somma.

Sul precedente esempio non c'è il problema perchè l'operatore ++ converte automaticamente il valore in numero.

Se ti serve azzerare il valore al quarto click, puoi usare l'operatore modulo (%) in questo modo:

codice:

function seleziona(){
  var e = document.getElementById("risultato");
  e.innerHTML = (+e.innerHTML+1)%4;
}

Ciao, ho provato a cliccare sul bottone mettendo il codice che limita il valore a 3 ma non funziona, nel senso che mi rimane sempre 0.
Ti ringrazio comunque per la risposta

**KillerWorm** · 21-01-2016, 04:19

Ciao, posso assicurarti che lo script funziona, deduco che tu stia sbagliando qualcosa.
Bisognerebbe vedere il contesto in cui vai ad inserire quello script.

Qui un esempio perfettamente funzionante in base al codice HTML che hai indicato tu:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      function seleziona(){
        var e = document.getElementById("risultato");
        e.innerHTML = Math.min(3,+e.innerHTML+1);   
      }
    </script>
  </head>
  <body>
    <button class="btn" onClick="seleziona()" id="selectbutton">Selezionare il prodotto</button>
    <label id="risultato">0</label>
  </body>
</html>

**budwaiser4** · 21-01-2016, 04:23

Originariamente inviata da KillerWorm

Ciao, posso assicurarti che lo script funziona, deduco che tu stia sbagliando qualcosa.
Bisognerebbe vedere il contesto in cui vai ad inserire quello script.

Qui un esempio perfettamente funzionante in base al codice HTML che hai indicato tu:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      function seleziona(){
        var e = document.getElementById("risultato");
        e.innerHTML = Math.min(3,+e.innerHTML+1);   
      }
    </script>
  </head>
  <body>
    <button class="btn" onClick="seleziona()" id="selectbutton">Selezionare il prodotto</button>
    <label id="risultato">0</label>
  </body>
</html>

Ok ora va, grazie mille forse avevo sbagliato ad incollare qualcosa.
Un'altra domanda: se volessi ad esempio mettere un button X per rimuovere i prodotti che però si fermasse a 0? Perchè ho provato con value --x ma ovviamente escono i numeri negativi.
Grazie ancora

Edit: risolto

**KillerWorm** · 21-01-2016, 04:38

Ok ora va, grazie mille forse avevo sbagliato ad incollare qualcosa.

Capita

se volessi ad esempio mettere un button X per rimuovere i prodotti che però si fermasse a 0?

Edit: risolto

Gestirei tutto con la stessa funzione utilizzando opportunamente Math.min e Math.max.
Qui passo il valore -1 se voglio decrementare:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      function seleziona(i){
        i = i||1;
        var e = document.getElementById("risultato");
        e.innerHTML = Math.min(3,Math.max(0,+e.innerHTML+i));   
      }
    </script>
  </head>
  <body>
    <button class="btn" onClick="seleziona()" id="selectbutton">Selezionare il prodotto</button>
    <label id="risultato">0</label>
    <button class="btn" onClick="seleziona(-1)">X</button>
  </body>
</html>

PS: ti prego, non rispondere quotando l'intero messaggio se non serve. Grazie!

**budwaiser4** · 21-01-2016, 04:46

Ok, scusami e grazie mille!
Ci si becca in giro per il forum

Discussione: Incrementare quantità cliccando su bottone

Strumenti discussione

Ricerca discussione

Visualizza

Incrementare quantità cliccando su bottone

Permessi di invio