CODEWITHSUNDEEP
javascripthtml
Refarth
Refarth

Reputation: 15

Use the same javascript function in different selects

I need to use the same JavaScript function called Cerca2 in 3 separated selects. The first one works, but the others do not. I've tried to fix the problem by myself but I can't find where it is.

EDIT: code edited, now work perfectly, tnx for all the suggestion and support guys ^^ This is the html:

  <body>

  Ricerca per Nome: <input type="text" maxlength="20"/>
  <input id="cerca1" type="button" value="Cerca" /><br/><br/>

Ricerca personaggi per Fazione:
<select id="factionSelect">
    <option>UNSC</option>
    <option>Covenant</option>
    <option>Flood</option>
    <option>Precursori</option>
</select>&nbsp;&nbsp;<input id="cerca2" selectid="factionSelect" type="button" value="Cerca"/>

<br/><br/>

Ricerca armi per tipo:
<select id="weaponSelect">
    <option>cinetiche</option>
    <option>plasma</option>
    <option>energia</option>
</select>&nbsp;&nbsp;<input id="cerca5" selectid="weaponSelect" type="button" value="Cerca"/>

<br/><br/>

Ricerca Veicoli per impiego:
<select id="vehicleSelect">
    <option>terrestri</option>
    <option>volanti</option>
    <option>Astronavi</option>
</select>&nbsp;&nbsp;<input id="cerca6" selectid="vehicleSelect" type="button" value="Cerca"/>

  <input id="cerca3" type="button" value="Mostra tutto"/>
  <input id="cerca4" type="button" value="Ricerca casuale"/><br/><br/>

  <hr id="barra"/><br/><p>Risultati ricerca:</p>

  <div id="risultati">
  <ol id="ricerca">
  <li class="vuoto"></li>
  </ol>

  </div>
</body>

This is the JavaScript:

function Profilo(nom, appar, prof, grup, img){

    this.nome = nom;
    this.apparizione = appar;
    this.profilo = prof;
    this.gruppo = grup;
    this.immagine = img;
}


function Archivio(){

    this.lista = [];

    this.inizializza = function(nodo){
        var schede = nodo.getElementsByTagName("scheda");

        for(var i = 0; i<schede.length; i++){

            var categoria = schede[i].getAttribute("categoria");
            var nomi = schede[i].getElementsByTagName("nome");
            var nome = nomi[0].firstChild.nodeValue;
            var apparizioni = schede[i].getElementsByTagName("apparizione");
            var apparizione = apparizioni[0].firstChild.nodeValue;
            var profili = schede[i].getElementsByTagName("profilo");
            var profilo = profili[0].firstChild.nodeValue;  
            var immagini = schede[i].getElementsByTagName("immagine");
            var immagine =  immagini[0].firstChild.nodeValue;

            var scheda = new Profilo(nome, apparizione, profilo, categoria,immagine);
            this.lista.push(scheda);
        }
    }

    this.cerca1 = function(testo){
        var risultato = [];
        var trovato = 0;
        var i = 0;

        while(i<this.lista.length && trovato == 0){
            if(this.lista[i].nome == testo)
            {
                trovato = 1;
                risultato.push(this.lista[i]);
            }
            else
                i++;
        }

        if(trovato == 1)
            return risultato;
        else
        {
            risultato[0] = null;
            return risultato;
        }
    }

    this.cerca2 = function(testo){
        var risultati = [];

        for(var i = 0; i<this.lista.length; i++){
            if(this.lista[i].gruppo == testo)
                risultati.push(this.lista[i]);
        }
        return risultati;
    }



    this.cerca3 = function(numero){
        var risultati = [];

        risultati.push(this.lista[numero]);

        return risultati;
    }

    this.genera = function(valori){  // genera la lista con gli elementi di xml
        var s = "";

        if(valori[0] == null)
            s = "Nessun risultato";
        else{   
            for(var i = 0; i<valori.length; i++)
                s = s + '<li><span class="trovato" onclick="mostra(this);">' + valori[i].nome + "  " + '</span><br/><ol class="nascosto"><li class="nopallino2"> <img src='+ valori[i].immagine+'> <br/><br/>Profilo: '+ valori[i].profilo +'<br/>Apparizione: ' + valori[i].apparizione +'</li></ol></li><br/><br/>';
        } 
        return s;   
    }

    this.nascondi = function(){
        var liste = document.getElementsByTagName("ol");

        for(var i = 0; i<liste.length; i++){
            if(liste[i].className == "nascosto")
                liste[i].style.display = "none";
        }
    }
}

function cercagruppo(){

    /*var elenco = document.getElementById("ricerca");
    var menu = document.getElementsByTagName("select");

    var scelta = menu[0];
    var gruppo = scelta.value;
    var schede = contenitore.cerca2(gruppo);
    elenco.innerHTML = contenitore.genera(schede);
    contenitore.nascondi(); */


    var elenco = document.getElementById("ricerca");
    var menu = document.getElementById(this.getAttribute("selectid"));
    var group = menu.value;
    var schede = contenitore.cerca2(group);
    elenco.innerHTML = contenitore.genera(schede);
    contenitore.nascondi();


}


function mostra(nome){

    var testo = nome.nextSibling.nextSibling;

    if(testo.style.display == "none")
        testo.style.display = "block"

    else
        testo.style.display = "none"
}

// funzione che cerca le schede relative all'oggetto cercato digitando il nome
function cercanome(){

    var casella = document.getElementsByTagName("input");
    var nome;
    var elenco = document.getElementById("ricerca");
    var scheda;

    nome = casella[0].value;

    scheda = contenitore.cerca1(nome);

    elenco.innerHTML = contenitore.genera(scheda);

    contenitore.nascondi();
}

// funzione per mostrare tutte le schede
function tutto(){

    var elenco = document.getElementById("ricerca");

    elenco.innerHTML = contenitore.genera(contenitore.lista);

    contenitore.nascondi(); 
}


function generaCasuale(){

    var numerogenerato = Math.floor(Math.random()*(parseInt(contenitore.lista.length-1)+1));

    if(numerogenerato == randomglobale){
        while(numerogenerato == randomglobale)
            numerogenerato = Math.floor(Math.random()*(parseInt(contenitore.lista.length-1)+1));
    }

    randomglobale = numerogenerato;
    return numerogenerato;
}

// funzione di ricerca casuale 
function casuale(){

    var elenco = document.getElementById("ricerca");
    var numero = generaCasuale();
    var scheda = contenitore.cerca3(numero);

    elenco.innerHTML = contenitore.genera(scheda);

    contenitore.nascondi();
}


var contenitore = new Archivio();
var randomglobale;

function inizializza(){

    var c1 = document.getElementById("cerca1");
    var c2 = document.getElementById("cerca2");
    var c3 = document.getElementById("cerca3");
    var c4 = document.getElementById("cerca4");
    var c5 = document.getElementById("cerca5");
    var c6 = document.getElementById("cerca6");


    c1.onclick = cercanome;
    c2.onclick = cercagruppo;
    c3.onclick = tutto;
    c4.onclick = casuale;
    c5.onclick = cercagruppo;
    c6.onclick = cercagruppo;


    var nodo = caricaXML("elenco.xml");
    contenitore.inizializza(nodo);
}

window.onload = inizializza;

Upvotes: 0

Views: 92

Answers (2)

Thriggle
Thriggle

Reputation: 7049

In several parts of your code, you select all elements of a certain type, but only use the first such element.

For example:

function cercagruppo(){
    ...
    var menu = document.getElementsByTagName("select"); // gets all "select" elements
    var scelta = menu[0]; // gets value of first "select" element
    ...
}

And also:

function cercanome(){
    var casella = document.getElementsByTagName("input"); // gets all "input" elements
    ...
    nome = casella[0].value; // gets value of first "input" element
    ...
}

If you want to get the values from all select and input elements, you'll need to do so explicitly, such as by looping through the menu and casella arrays instead of selecting only their first items.

Edit: Suggested approach to refactoring code

Having looked at your code a bit more, here's the approach I think you should take:

  1. In your HTML, add an ID attribute to each of your select elements.
  2. Add an attribute to your "cerca2", "cerca5", and "cerca6" input buttons that indicates the ID of the corresponding select element
  3. You can then access the attribute in the cercagruppo() function and use it to select the corresponding select element.

Your cercagruppo() function would look more like this:

function cercagruppo(){
    var ol = document.getElementById("ricerca");
    var selection = document.getElementById(this.getAttribute("selectid"));
    var group = selection.value;
    var tabs = contenitore.cerca2(group);
    ol.innerHTML = contenitore.genera(tabs);
    contenitore.nascondi();
}

Your HTML would end up looking more like this:

Ricerca personaggi per Fazione:
<select id="factionSelect">
    <option>UNSC</option>
    <option>Covenant</option>
    <option>Flood</option>
    <option>Precursori</option>
</select>&nbsp;&nbsp;<input id="cerca2" selectid="factionSelect" type="button" value="Cerca"/>
<br/><br/>
Ricerca armi per tipo:
<select id="weaponSelect">
    <option>cinetiche</option>
    <option>plasma</option>
    <option>energia</option>
</select>&nbsp;&nbsp;<input id="cerca5" selectid="weaponSelect" type="button" value="Cerca"/>
<br/><br/>
Ricerca Veicoli per impiego:
<select id="vehicleSelect">
    <option>terrestri</option>
    <option>volanti</option>
    <option>Astronavi</option>
</select>&nbsp;&nbsp;<input id="cerca6" selectid="vehicleSelect" type="button" value="Cerca"/>

Edit edit

And of course, you should also fix the error that @mgarant pointed out:

var c1 = document.getElementById("cerca1");
var c2 = document.getElementById("cerca2");
var c3 = document.getElementById("cerca3");
var c4 = document.getElementById("cerca4");
var c5 = document.getElementById("cerca5"); // fixed
var c6 = document.getElementById("cerca6"); // fixed

Upvotes: 1

mgarant
mgarant

Reputation: 585

I'm not sure I totally understand the question, but in this code, c5 and c6 are all getting the cerca2 inputs : 

var c1 = document.getElementById("cerca1");
var c2 = document.getElementById("cerca2");
var c3 = document.getElementById("cerca3");
var c4 = document.getElementById("cerca4");
var c5 = document.getElementById("cerca2");
var c6 = document.getElementById("cerca2");

Upvotes: 1

Related Questions