Salve a tutti sto lavorando ad un progetto , nello specifico dopo aver creato una lista sotto una text area ho bisogno che la text area sopra si popoli quando venga cliccata una voce della lista.
la text area si dovrebbe popolare con un attributo di un un oggetto del mio codice js.
qui il codice js
codice:
function caricaXML(nomeFile) {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", nomeFile, false);
xmlhttp.send();
return xmlhttp.responseXML;
}
function canzoniere () { // costruttore del canzoniere
this.lista = []; //questo č l'array che contiene l'elenco delle canzoni
this.aggiungi =
function (c) { //metodo per aggiungere alla lista del canzoniere tutte le canzoni
this.lista.push(c);
}
this.visualizza = // viasualizzare le canzoni dell canzoniere
function(l) {
var s = "";
for (var i in l) {
s += l[i].visualizza();
}
return s;
}
this.inizializza =
function (n) {
var nodo = n.getElementsByTagName("canzoniere")[0]; //carico tutti gli elementi dell xml (partendo dal primo)
var l = nodo.getElementsByTagName("canzone"); // prendo tutti gli elementi <canzone>
for (var i = 0; i < l.length; i++) {
var canzone = new Canzone(); //questa variabile č un nuovo oggetto Canzone
canzone.inizializza(l[i]);
this.aggiungi(canzone); //in alternativa uso "this.lista.push(canzone);" ed elimino il metodo this.aggiungi
}
}
this.elencoGeneri= // elenco dei generi che popoleranno la prima select
function (){
var o = "";
o += '<option value="0" selected="selected"> GENERE </option>';
var d=0;
for (var i=0; i<this.lista.length-6; i++) { // le prime 4 canzoni hanno 4 generi diversi quindi soddisferanno la select
var e="c"+d; //id dinamico
o += '<option value="' + this.lista[i].genere + '" id="' + e + '">' + this.lista[i].genere + '</option>';
d++;
}
return o;
}
this.elencodifficolta= // elenco delle difficolta che popoleranno la seconda select
function (){
var o2 = "";
o2 += '<option value="0" selected="selected"> DIFFICOLTA </option>';
var d2=0;
for (var i=0; i<this.lista.length -7; i++) { // le prime 3 canzoni hanno 3 difficolta diverse quindi soddisferanno la select
var e="c"+d2; //id dinamico
o2 += '<option value="' + this.lista[i].difficolta + '" id="' + e + '">' + this.lista[i].difficolta + '</option>';
d2++;
}
return o2;
}
this.elencotonalita= // elenco delle tonalita che popolerranno la terza select
function (){
var o3 = "";
o3 += '<option value="0" selected="selected"> TONALITA </option>';
var d3=0;
for (var i=0; i<this.lista.length-3; i++) { // le prime 7 canzoni hanno 7 tonalita diverse quindi soddisfano la select
var e="c"+d3; //id dinamico
o3 += '<option value="' + this.lista[i].tonalita + '" id="' + e + '">' + this.lista[i].tonalita + '</option>';
d3++;
}
return o3;
}
this.cercaTutto= // metodo ricerca tutto
function (a,b,c){
var l = [];
if (a==0 && b==0 && c==0){
for (i in this.lista){
l.push(this.lista[i]);
}
}else if (a==0 && b != 0 && c != 0){
for (i in this.lista){
if (this.lista[i].difficolta == b && this.lista[i].tonalita == c) {
l.push(this.lista[i]);
}
}
}else if(a==0 && b==0 && c!=0){
for (i in this.lista){
if (this.lista[i].tonalita == c) {
l.push(this.lista[i]);
}
}
}else if(a!=0 && b==0 && c==0){
for (i in this.lista){
if (this.lista[i].genere == a) {
l.push(this.lista[i]);
}
}
}else if(a!=0 && b!=0 && c==0){
for (i in this.lista){
if (this.lista[i].genere == a && this.lista[i].difficolta == b) {
l.push(this.lista[i]);
}
}
}else if(a!=0 && b==0 && c!=0){
for (i in this.lista){
if (this.genere[i] == a && this.lista[i].tonalita == c) {
l.push(this.lista[i]);
}
}
}else if(a==0 && b!=0 && c==0) {
for (i in this.lista){
if (this.lista[i].difficolta == b) {
l.push(this.lista[i]);
}
}
}else{
for (i in this.lista){
if (this.lista[i].genere==a && this.lista[i].difficolta==b && this.lista[i].tonalita == c) {
l.push(this.lista[i]);
}
}
}
return l;
}
}
function ricerca() { //funzione ricerca derivante da visualizza.onclick
var select1 = document.getElementById("selectGenere");
var select2 = document.getElementById("selectDifficolta");
var select3 = document.getElementById("selectTonalita");
var i=0; //selezione genere
while ((i<select1.options.length) && (!select1.options[i].selected)) {
i++;
}
var j=0; //selezione difficolta
while ((j<select2.options.length) && (!select2.options[j].selected)) {
j++;
}
var k=0; //selezione tonalita
while ((k<select3.options.length) && (!select3.options[k].selected)) {
k++;
}
var l = ilCanzoniere.cercaTutto(select1.options[i].value,select2.options[j].value,select3.options[k].value);
var nodo = document.getElementById("lista");
if (l == "") {
nodo.innerHTML = ("nessun risultato");
} else {
nodo.innerHTML = ilCanzoniere.visualizza(l);
}
}
function Canzone () { //costruttore dell oggetto canzone c
this.genere;
this.titolo;
this.difficolta;
this.tonalita;
this.origine;
this.testo;
this.visualizza =
function() {
return '<li>'+'<a id="canzone" href="java-script:void(0)" onclick="visualizzaTesti('+this.origine+')">'+this.titolo+'</a>' + '</li>' +'<br>'
}
this.inizializza =
function(nodo) {
var c = nodo.getAttribute("genere");
this.genere = c;
var lt = nodo.getElementsByTagName("titolo");
var t = lt[0].firstChild.nodeValue;
this.titolo = t;
var ld = nodo.getElementsByTagName("difficolta");
var d = ld[0].firstChild.nodeValue;
this.difficolta = d;
var lto = nodo.getElementsByTagName("tonalita");
var to = lto[0].firstChild.nodeValue;
this.tonalita = to;
var lori = nodo.getElementsByTagName("origine");
var ori = lori[0].firstChild.nodeValue;
this.origine = ori;
var ltesti = nodo.getElementsByTagName("testo");
var testi = ltesti[0].firstChild.nodeValue;
this.testo = testi;
}
}
var ilCanzoniere;
function inizializza() {
var nodo = caricaXML("js/canzoniere.xml");
ilCanzoniere = new canzoniere();
ilCanzoniere.inizializza(nodo);
var lista1 = document.getElementById("selectGenere");
var lista2 = document.getElementById("selectDifficolta");
var lista3 = document.getElementById("selectTonalita");
lista1.innerHTML = ilCanzoniere.elencoGeneri();
lista2.innerHTML = ilCanzoniere.elencodifficolta();
lista3.innerHTML = ilCanzoniere.elencotonalita();
lista1.onchange=ricerca;
lista2.onchange=ricerca;
lista3.onchange=ricerca;
}
window.onload = inizializza;
qui il codice html :
codice:
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="guida.html">La guida</a></li>
<li><a href="primipassi.html">Primi passi</a></li>
<li id="current"><a href="canzoniere.html">Canzoniere galattico</a></li>
<li><a href="chitarristi.html">Chitarristi</a></li>
<li><a href="contatti.html">Contatti</a></li>
</ul>
</div>
<div id="header">
<div id="header2">
</div>
</div>
<div id="divisore">
<h1>Canzoniere</h1>
</div>
<div id="contenuto">
<div id="subcontenuto">
<select id="selectGenere"></select>
<select id="selectDifficolta"></select>
<select id="selectTonalita"></select>
<input id="visualizza" type="button" value="VisualizzaCanzoni">
<br>
<br>
<h2> canzoni presenti nel nostro database </h2>
<h1> Aggiungi una canzone nella text area per visualizzare gli accordi e modificarla</h1>
<textarea rows="4" cols="50"> </textarea>
<br></br>
<div id="aumentatore"></div>
<ol id="lista">
<li></li>
</ol>
</div>
<div id="testida"> </div>
</div>
<div id="footer">
</div>
</body>
</html>
24-05-2013 20:12
