Incrementare quantità cliccando su bottone

**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: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!

Discussione: Incrementare quantità cliccando su bottone

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio