PDA

Visualizza versione completa : [Javascript] Modificare caratteristiche testo secondo l'input

Alhazred
10-07-2008, 19.08.11
Rieccomi qua, risolte le difficoltà con l'altro problema faccio un passo avanti.
Ho una tabella con nomi di ingredienti e quantità residue.
Sotto ci sono un campo di input di tipo testo e un pulsante per la conferma.
La funzione deve fare questo, una volta premuto il pulsante prende il valore nel campo di input e tutti i campi della tabella sovrastante con valore nella colonna "Quantità" inferiore a tale numero devono cambiare colore, diciamo rosso.
Idee su come realizzare la cosa?
Mi bastano indicazioni per ora, il codice vedrò di scriverlo io.
Per ora la struttura è questa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Evidenzia soglia</title>

<script type="text/javascript">
<!--
function modifica(obj)
{

}
//-->
</script>

</head>

<body>
<form name="lista" action"">
<table border="0" width="auto">
<tbody>
<tr>
<td height="23" width="95">
<div align="left"><strong> Ingrediente </strong></div>
</td>
<td width="90">
<div align="left"><strong> Quantità </strong></div>
</td>
</tr>
<tr>
<td>Patate</td>
<td><input type="text" value="12" name="Patate" readonly /></td>
</tr>
<tr>
<td>Uova</td>
<td><input type="text" value="32" name="Uova" readonly /></td>
</tr>
<tr>
<td>Peperoni</td>
<td><input type="text" value="8" name="Peperoni" readonly /></td>
</tr>
<tr>
<td>Carciofi</td>
<td><input type="text" value="3" name="Carciofi" readonly /></td>
</tr>
<tr>
<td>Spaghetti</td>
<td><input type="text" value="56" name="Spaghetti" readonly /></td>
</tr>
<tr>
<td><input type="text" value="0" name="soglia" /></td>
<td><input type="button" value="Modifica soglia" onclick="modifica(this)" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>



Edit: corretti alcuni errori nel codice.
Alhazred
11-07-2008, 01.49.31
Ho provato a fare qualcosa e mi è venuto fuori questo, ma non funziona correttamente.
Ad esempio se si mette come input 40, i numeri 12, 32 e 3 diventano rossi, ma l'8 no, nonostante con un alert abbia visto che l'if controlla la disuguaglianza 8<40 che deve dare true, invece no, non esegue l'istruzione prevista dal true.
Da cosa dipende?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Evidenzia soglia</title>

<script type="text/javascript">
<!--
var ingredienti = new Array("Patate","Uova","Peperoni","Carciofi","Spaghetti");

function evidenzia(obj)
{
var i = 0;

for(i = 0; i < ingredienti.length; i++)
if(obj.form.elements[ingredienti[i]].value < obj.form.soglia.value)
document.getElementById(ingredienti[i]).style.color = "#FF0000";
else
document.getElementById(ingredienti[i]).style.color = "#000000";
}
//-->
</script>

</head>

<body>
<form name="lista" action="">
<table border="0" width="175">
<tbody>
<tr>
<td height="23" width="95"><div align="left"><strong>Ingrediente</strong></div></td>
<td width="80"><div align="left"><strong>Quantità</strong></div></td>
</tr>
<tr>
<td>Patate</td>
<td><input type="text" value="12" name="Patate" id="Patate" size="4" readonly /></td>
</tr>
<tr>
<td>Uova</td>
<td><input type="text" value="32" name="Uova" id="Uova" size="4" readonly /></td>
</tr>
<tr>
<td>Peperoni</td>
<td><input type="text" value="8" name="Peperoni" id="Peperoni" size="4" readonly /></td>
</tr>
<tr>
<td>Carciofi</td>
<td><input type="text" value="3" name="Carciofi" id="Carciofi" size="4" readonly /></td>
</tr>
<tr>
<td>Spaghetti</td>
<td><input type="text" value="56" name="Spaghetti" id="Spaghetti" size="4" readonly /></td>
</tr>
<tr>
<td><input type="text" value="0" name="soglia" size="4" /></td>
<td><input type="button" name="Controlla" value="Controlla" onclick="evidenzia(this)" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Alhazred
11-07-2008, 02.20.03
Allora, sembra di aver capito che il confronto lo fa solo con la prima cifra dei numeri ovvero: se metto 40 il confronto viene fatto solo usando il 4, quindi 8<4 da false, tant'è vero che se come input metto 9, anche 56 diventa rosso perché 5<9...
Come si risolve questa situazione?
Alhazred
11-07-2008, 02.24.12
Vabbè, ho fatto tutto da solo :)
E' bastato usare parseInt() :p