Pulsanti

**MonocoloreVerde** · 19-06-2006, 14:50

Scusate la domanda... ma come si fa a creare una pagina con dei pulsanti + e - che aumentano e diminuiscono il valore di un campo senza ricaricare la pagina?

Io vorrei fare una cosa simile a questa:

[+] "Valore1" [-]
[+] "Valore2" [-]
[+] "Valore3" [-]

"Punti rimanenti"

Aumentando o diminuendo valore1,2 o 3 "punti rimanenti" deve aumentare o diminuire...

La pagina contiene codice in php per leggere o in caso scrivere in banca dati i valori inseriti.
Solo che gia so ancora troppo poco di php... quindi figuriamoci di javascript ^^
Cmq vorrei mettere all'interno della pagina questi pulsanti + e -, e ogni volta, magari tramite un pulsante "stima punti rimanenti" calcolarmi il valore dei suddetti punti e aggiornare il tutto (o almeno quello che deve essere aggiornato), ma non so davvero da dove cominciare!

Scusate se sono stato poco chiaro o se mi sono dilungato troppo...
... Il caldo da alla testa!!!

)

**stiffa** · 19-06-2006, 17:06

io non ti ho capito molto....cosa intendi per aumentare il valore di un campo? intendi la label del campo? o cos'altro?

penso cmq che potrai operare con javascript riferendoti agli id dei tuoi tag...
document.getElementById()

ma ripeto...non ho capito molto cosa vuoi fare

**MonocoloreVerde** · 20-06-2006, 10:41

alla fine ho fatto confusione ^^
Provo ad iniziare dal principio!

Sto provando a scrivere un gioco su browser e vorrei una pagina per creare il personaggio.
Quindi voglio visualizzare le caratteristiche del personaggio che possono essere aumentate con dei punti esperienza che sono visualizzati nella stessa pagina.
Io voglio che accanto ad ogni caratteristica ci siano due pulsanti [+] e [-] che aumentano o diminuiscono la caratteristica desiderata e di conseguenza anche i punti esperienza rimanenti .

"Forza" [+] [-]
"Destrezza" [+] [-]
"Intelligenza" [+] [-]
...
"Punti esperienza"

Spero di esser stato più chiaro stavolta ^______^

**pierofix** · 20-06-2006, 11:26

Tipo una cosa così?

codice:

XHTML




   <label for="altezza">Altezza:</label> 
   <input id="altezza" name="altezza" value="170" />

   + |
   -
</p>


Javascript
function aumenta(elemento)
{
   var campo = document.getElementById(elemento);
   var valore = campo.value;
   valore = valore + 1;
   campo.value = valore;
}
function diminuisci(elemento)
{
   var campo = document.getElementById(elemento);
   var valore = campo.value;
   valore = valore - 1;
   campo.value = valore;
}

Gli esperti qui sapranno sicuramente ottimizzarlo, ma in teoria dovrebbe funzionare.

**pierofix** · 20-06-2006, 13:53

Ah! Per i 'punti rimanenti' si potrebbe fare una cosa del genere:

codice:

XHTML




   <label for="altezza">Altezza:</label> 
   <input id="altezza" name="altezza" value="170" />

   + |
   -
</p>


Punti rimanenti: <strong id="tot">[/b].</p>


Javascript

function totale()
{
   var altezza = document.getElementById('altezza');
   var val_altezza = parseInt(altezza.value);

   // Qui si ripete per tutti i campi in questione...

   var totale = val_altezza + qui gli altri valori;

   var campo_tot = document.getElementById('tot');
   campo_tot.innerHTML = totale;
}
function aumenta(elemento)
{
   var campo = document.getElementById(elemento);
   var valore = campo.value;
   valore = valore + 1;
   campo.value = valore;

   totale();
}
function diminuisci(elemento)
{
   var campo = document.getElementById(elemento);
   var valore = campo.value;
   valore = valore - 1;
   campo.value = valore;

   totale();
}

Spero di non aver fatto errori.

**MonocoloreVerde** · 23-06-2006, 14:19

Grazie mille!
Funziona

Solo che come l'ho messo io non mi funziona il totale ;_;
Posso postare il codice? ^^

**pierofix** · 23-06-2006, 16:36

Certo che puoi.

**MonocoloreVerde** · 23-06-2006, 17:14

ovviamente è tutto fatto molto alla "zozzona"... sto facendo delle prove, però i pulsanti + e - funzionano tutti... per non parlare di totale che messo così come me lo hai passato tu può solo incrementare...
Per il momento mi basta che funzioni tutto poi per fare tutte le cose giuste c'è tempo ^^ (ma quale tempo >,>')
Ad ogni modo essendo una frana totale in javascript e un niubbone in html... totale non vuole neanche saperne di farsi vedere!

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<link href="style.css" rel="stylesheet" type="text/css">

<?php
$forz = 0;
$inte = 0;
$des = 0;
$cos = 0;
$lotta = 0;
$taglio = 0;
$botta = 0;
$impalamento = 0;
$parata = 0;
$tiro = 0;

?>

<body>

</p>
<div style=position: absolute; width: 865px; height: 611px; z-index: 1; left: 10px; top: 15px id=livello1>

Razza:
<select name=razza onchange=document.modulo.submit() size=1>
<option>Umano</option>
<option>Elfo</option>
<? // altre razze
?>
</select>
Classe: <select name=classe onchange=document.modulo.submit() size=1>
<option>Guerriero</option>
<option>Mago</option>
<option>Ladro</option>
<? // altre classi
?>
</select></p>

Caratteristiche</p>

Forza
<font face=Book Antiqua>
<input name=for id=for value=<?php echo "$forz";?> type=text size=2>
<button onclick="aumenta('for')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('for')" title="Diminuisci valore">-</button>
Intelligenza
<input name=int id=int value=<?php echo "$inte";?> type=text size=2></font>
<font face=Book Antiqua>
<button onclick="aumenta('int')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('int')" title="Diminuisci valore">-</button>
</p>
Destrezza
<input id=des name=des value=<?php echo "$des";?> type=text size=2>
<button onclick="aumenta('des')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('des')" title="Diminuisci valore">-</button>

Costituzione
<input name=cos id=cos value=<?php echo "$cos";?> type=text size=2></font>
<font face=Book Antiqua> <button onclick="aumenta('cos')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('cos')" title="Diminuisci valore">-</button>

Abilità Base</font></p>

<font face=Book Antiqua> Lottare
<input id=lotta name=lotta value=<?php echo "$lotta";?> type=text size=2>
<button onclick="aumenta('lotta')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('lotta')" title="Diminuisci valore">-</button>

Armi a distanza
<input name=tiro id=tiro value=<?php echo "$tiro";?> type=text size=2></font>
<button onclick="aumenta('tiro')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('tiro')" title="Diminuisci valore">-</button>

<font face=Book Antiqua> Armi da taglio
<input name=taglio id=taglio value=<?php echo "$taglio";?> type=text size=2>
<button onclick="aumenta('taglio')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('taglio')" title="Diminuisci valore">-</button>

Armi da impalamento
<input name=impalamento id=impalamento value=<?php echo "$impalamento";?> type=text size=2> </font>
<button onclick="aumenta('impalamento')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('impalamento')" title="Diminuisci valore">-</button>

<font face=Book Antiqua> Armi contundenti
<input name=botta id=botta value=<?php echo "$botta";?> type=text size=2>
<button onclick="aumenta('botta')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('botta')" title="Diminuisci valore">-</button>

Usare Scudo
<input name=parata id=parata value=<?php echo "$parata";?> type=text size=2></font>
<button onclick="aumenta('parata')" title="Aumenta valore">+</button> |
<button onclick="diminuisci('parata')" title="Diminuisci valore">-</button>

<font face=Book Antiqua>

<font face=Book Antiqua>
Punti <strong id="tot">[/b]
</font>

<input name="entra" value="Entra" type="submit" style="font-family: Book Antiqua; font-weight:700"></a>
</div>

</body>
<script language=javascript type=text/javascript>
function totale()
{
var altezza = document.getElementById('elemento');
var val_altezza = parseInt(altezza.value); // QUI DOVREI METTERCI ELEMENTO.VALUE, MA POSSO?

// Qui si ripete per tutti i campi in questione...

var totale = val_altezza + 2;

var campo_tot = document.getElementById('tot');
campo_tot.innerHTML = totale;
}
function aumenta(elemento)
{
var campo = document.getElementById(elemento);
var valore = campo.value;
valore++;
campo.value = valore;
totale();
}
function diminuisci(elemento)
{
var campo = document.getElementById(elemento);
var valore = campo.value;
valore = valore - 1;
campo.value = valore;
totale();
}
</script>

Ho cambiato alcune cosine per accorciare il codice... però credo di aver messo quello che basta ^^

Discussione: Pulsanti

Strumenti discussione

Ricerca discussione

Visualizza

Pulsanti

Permessi di invio