Esercizio Javascript
Ciao a tutti.
dovrei fare una cosa del genere:
dove le tre opzioni sono task, stories, bugs.
voglio che se viene inserito un input di tipo task ,l'input appaia nello spazio sottostante di colore verde,
bugs rosso e stories blu.
Chi mi da una mano?
Io ho fatto il codice che permette di appendere nello spazio sottostante gli input ma tutti di colore nero. Immagino ci vorrà un ciclo if ma non so che condizione mettere.
parte html:
parte java
Un'altra domanda:
io nel form non ho messo method=POST. Se lo facessi come dovrei modificare il resto del codice?
Grazie
dovrei fare una cosa del genere:
dove le tre opzioni sono task, stories, bugs.
voglio che se viene inserito un input di tipo task ,l'input appaia nello spazio sottostante di colore verde,
bugs rosso e stories blu.
Chi mi da una mano?
Io ho fatto il codice che permette di appendere nello spazio sottostante gli input ma tutti di colore nero. Immagino ci vorrà un ciclo if ma non so che condizione mettere.
parte html:
<body> <div id="header"> <h1>ToDo</h1> </div> <div id="barra"> <table> <tr> <td> <select name="item"> <option value="task">Task <option value="bugs">Bugs <option value="stories">Stories </select> </td> <td> <form > <input type="text" value="Enter your item" name="items"></input> </form> </td> <td> <button>Add</button> </td> </tr> </table> </div> <div id="contenitore"> </div> </body>
parte java
$(document).ready(function(){
$("button").click(function(){
var toAdd=$("input[name=items]").val();
$("#contenitore").append("<p>"+toAdd+"</p>");
});
});Un'altra domanda:
io nel form non ho messo method=POST. Se lo facessi come dovrei modificare il resto del codice?
Grazie
Risposte
Ho provato a capire la tua richiesta ma ti giuro che non riesco. Inoltre, non vedo nessun codice java nei tuoi esempi.
Si tratta di Javascript.. I due linguaggi sono MOLTO diversi e non hanno alcun legame tra di loro. Cerca di non confonderli.
Non mi sono però chiare diverse cose:
1. Stai usando JQuery? Dal codice sembrerebbe di sì, ma nel file che hai postato sembrano mancare molte cose..
2. Dove hai inserito quel codice? Si tratta di un file separato? È inserito in un tag script? Altro?
3. Non ho capito cosa tu stia cercando di fare.. ma immagino sarebbe immediato con i CSS (ma credo che sia stato richiesto l'uso di Javascript).
[xdom="apatriarca"]Ho modificato il titolo della discussione in modo contenesse il linguaggio corretto.[/xdom]
Non mi sono però chiare diverse cose:
1. Stai usando JQuery? Dal codice sembrerebbe di sì, ma nel file che hai postato sembrano mancare molte cose..
2. Dove hai inserito quel codice? Si tratta di un file separato? È inserito in un tag script? Altro?
3. Non ho capito cosa tu stia cercando di fare.. ma immagino sarebbe immediato con i CSS (ma credo che sia stato richiesto l'uso di Javascript).
[xdom="apatriarca"]Ho modificato il titolo della discussione in modo contenesse il linguaggio corretto.[/xdom]
Si scusate, è Javascript, non Java!!!
Sto usando jQuery, il codice completo è:
parte html
parte css
parte javascript
Devo ottenere una cosa come questa:
Se il bottone a sinistra è impostato su Task, voglio che l'input che gli do compaia nello spazio sotto il form di colore verde, se è su Bugs lo voglio blu, se su Stories rosso.
Ho modificato il codice rispetto a quello postato prima, ma non funziona lo stesso...
Non si può fare senza javascript..
Sto usando jQuery, il codice completo è:
parte html
<!DOCTYPE html>
<html>
<head>
<!-- Here goes the metadata -->
<meta charset="utf-8">
<title> Catch it!</title>
<link rel="stylesheet" href="css/styles.css">
<script src="lib/jquery-2.1.0.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="header">
<h1>ToDo</h1>
</div>
<div id="barra">
<table>
<tr>
<td>
<select name="item">
<option value="task">Task
<option value="bugs">Bugs
<option value="stories">Stories
</select>
</td>
<td>
<form >
<input type="text" value="Enter your item" name="items"></input>
</form>
</td>
<td>
<button>Add</button>
</td>
</tr>
</table>
</div>
<div id="contenitore">
</div>
</body>
</html>parte css
#header{
background-color:black;
color:white;
}
#barra{
background-color:#C8DADA;
}
span{
display:inline;
}
.green{
color:green;
}
.red{
color:red;
}
.blue{
color:blue;
}parte javascript
$(document).ready(function(){
$("button").click(function(){
var toAdd=$("input[name=items]").val();
var valore = $('select[name=item]').val();
if($valore=="task"){
$("#contenitore").addClass("green");
$("#contenitore").append("<p>"+toAdd+"</p>");
}else{
if($valore=="bugs"){
$("#contenitore").addClass("blue");
$("#contenitore").append("<p>"+toAdd+"</p>");
}else{
$("#contenitore").addClass("red");
$("#contenitore").append("<p>"+toAdd+"</p>");
}
}
});
});Devo ottenere una cosa come questa:
Se il bottone a sinistra è impostato su Task, voglio che l'input che gli do compaia nello spazio sotto il form di colore verde, se è su Bugs lo voglio blu, se su Stories rosso.
Ho modificato il codice rispetto a quello postato prima, ma non funziona lo stesso...
Non si può fare senza javascript..
Ad una occhiata veloce noto che stai associando la classe al contenitore, ma dovresti aggiungerlo al nuovo paragrafo aggiunto. Inoltre credo sarebbe meglio usare direttamente "task", "bugs" e "stories" come nomi delle classi invece dei colori. Qualcosa come segue insomma:
$(document).ready(function(){
$("button").click(function(){
var toAdd=$("input[name=items]").val();
var valore = $('select[name=item]').val();
$("#contenitore").append("<p class=\"" + valore + "\">" + toAdd + "</p>");
});
});
"apatriarca":
Ad una occhiata veloce noto che stai associando la classe al contenitore, ma dovresti aggiungerlo al nuovo paragrafo aggiunto. Inoltre credo sarebbe meglio usare direttamente "task", "bugs" e "stories" come nomi delle classi invece dei colori. Qualcosa come segue insomma:
$(document).ready(function(){ $("button").click(function(){ var toAdd=$("input[name=items]").val(); var valore = $('select[name=item]').val(); $("#contenitore").append("<p class=\"" + valore + "\">" + toAdd + "</p>"); }); });
Ma in questo modo non sto associando le classi green,red e blue!! Sbaglio?
Inoltre
$("#contenitore").append("<p class=\"" + valore + "\">" + toAdd + "</p>"); cosa fa? Non ho ancora molta domestichezza con javascript..
Quel codice fa quello che dicevo nel testo che lo precede, associa una classe che si chiama come il valore ("task", "bugs" o "stories") al paragrafo che hai inserito alla fine del contenitore. Non ha senso complicarsi la vita usando nomi per le classi come "red", "green" o "blue". Queste classi non hanno alcun significato se non quello di indicare il colore usato dal testo. Ma a quel punto non ha senso usare una classe, tanto vale inserire direttamente lo stile. Al contrario, usare nomi come "task", ha senso perché rappresenta il tipo di paragrafo che stai considerando. Se decidessi di cambiare il colore delle task o aggiungere un nuovo tipo di contenuto non hai bisogno in questo caso di andare a modificare il codice javascript, ma solo la pagina html e il CSS.
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo