在不同的选择中使用相同的javascript函数

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.

我需要在3个单独的选择中使用名为Cerca2的相同JavaScript函数。第一个可以工作,但其他人没有。我试图自己解决问题,但我找不到它的位置。

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

编辑:代码编辑,现在工作完美,tnx所有的建议和支持人^^这是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:

这是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;

2 个解决方案

#1

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

我不确定我完全理解这个问题,但在这段代码中,c5和c6都获得了cerca2输入:

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");

#2

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.

如果要从所有选择和输入元素中获取值,则需要明确地执行此操作,例如循环浏览菜单和casella数组,而不是仅选择其第一个项目。

Edit: Suggested approach to refactoring code

编辑:重构代码的建议方法

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

仔细看了一下你的代码,这是我认为你应该采取的方法:

In your HTML, add an ID attribute to each of your select elements.

在HTML中,为每个选择元素添加ID属性。

Add an attribute to your "cerca2", "cerca5", and "cerca6" input buttons that indicates the ID of the corresponding select element

将属性添加到“cerca2”,“cerca5”和“cerca6”输入按钮,指示相应选择元素的ID

You can then access the attribute in the cercagruppo() function and use it to select the corresponding select element.

然后,您可以访问cercagruppo()函数中的属性,并使用它来选择相应的select元素。

Your cercagruppo() function would look more like this:

你的cercagruppo()函数看起来更像是这样的:

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:

您的HTML最终会看起来更像这样:

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:

当然,您还应该修复@mgarant指出的错误:

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

#1