Esercizio Javascript

Messaggioda Oo.tania » 21/04/2014, 14:27

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:
Codice:
<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
Codice:
$(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
Oo.tania
Junior Member
Junior Member
 
Messaggio: 227 di 490
Iscritto il: 04/03/2012, 11:58

Re: Esercizio Java

Messaggioda burm87 » 23/04/2014, 08:28

Ho provato a capire la tua richiesta ma ti giuro che non riesco. Inoltre, non vedo nessun codice java nei tuoi esempi.
Avatar utente
burm87
Senior Member
Senior Member
 
Messaggio: 995 di 1969
Iscritto il: 15/11/2009, 11:03
Località: Trieste

Re: Esercizio Java

Messaggioda apatriarca » 23/04/2014, 08:36

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).

Moderatore: apatriarca

Ho modificato il titolo della discussione in modo contenesse il linguaggio corretto.
apatriarca
Moderatore
Moderatore
 
Messaggio: 3393 di 10436
Iscritto il: 08/12/2008, 20:37
Località: Madrid

Re: Esercizio Javascript

Messaggioda Oo.tania » 23/04/2014, 10:15

Si scusate, è Javascript, non Java!!!
Sto usando jQuery, il codice completo è:
parte html
Codice:
<!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
Codice:
#header{
   background-color:black;
   color:white;
}
#barra{
   background-color:#C8DADA;
}
span{
   display:inline;
}
.green{
   color:green;
}

.red{
   color:red;
}

.blue{
   color:blue;
}

parte javascript
Codice:
$(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:
Immagine

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.. :?
Oo.tania
Junior Member
Junior Member
 
Messaggio: 228 di 490
Iscritto il: 04/03/2012, 11:58

Re: Esercizio Javascript

Messaggioda apatriarca » 23/04/2014, 10:49

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:
Codice:
$(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
Moderatore
Moderatore
 
Messaggio: 3396 di 10436
Iscritto il: 08/12/2008, 20:37
Località: Madrid

Re: Esercizio Javascript

Messaggioda Oo.tania » 23/04/2014, 13:02

apatriarca ha scritto: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:
Codice:
$(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
Codice:
 $("#contenitore").append("<p class=\"" + valore + "\">" + toAdd + "</p>");
cosa fa? Non ho ancora molta domestichezza con javascript..
Oo.tania
Junior Member
Junior Member
 
Messaggio: 229 di 490
Iscritto il: 04/03/2012, 11:58

Re: Esercizio Javascript

Messaggioda apatriarca » 23/04/2014, 13:09

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.
apatriarca
Moderatore
Moderatore
 
Messaggio: 3397 di 10436
Iscritto il: 08/12/2008, 20:37
Località: Madrid


Torna a Informatica

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite