Fatal编程技术网
  • javascript/
  • 在不同的选择中使用相同的javascript函数

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

javascript html

在不同的选择中使用相同的javascript函数,javascript,html,Javascript,Html,我需要在3个单独的选择中使用相同的JavaScript函数Cerca2。第一个有效，但其他无效。我试图自己解决这个问题，但找不到它在哪里 编辑：代码编辑，现在工作完美，tnx为所有的建议和支持的家伙^^ 这是html： <body> Ricerca per Nome: <input type="text" maxlength="20"/> <input id="cerca1" type="button" value="Cerca" /><b

我需要在3个单独的选择中使用相同的JavaScript函数
Cerca2
。第一个有效，但其他无效。我试图自己解决这个问题，但找不到它在哪里

编辑：代码编辑，现在工作完美，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>


每名Ricerca：



Ricerca personaggi per Fazione：
安理会
协议
泛滥
前兆



Ricerca armi per tipo：
电影
等离子体
能源



Ricerca Veicoli per impiego：
陆地
沃兰蒂
阿斯托纳维





Risultati ricerca：


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

    函数Profilo（nom、appa、prof、grup、img）{
this.nome=nom；
this.apparizione=appa；
this.profilo=prof；
this.gruppo=grup；
this.immagine=img；
}
函数Archivio（）{
this.lista=[]；
this.zza=函数（nodo）{
var schede=nodo.getElementsByTagName（“scheda”）；

    对于（var i=0；i我不确定我是否完全理解这个问题，但在这段代码中，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");

    

    在代码的几个部分中，您选择了特定类型的所有元素，但只使用第一个这样的元素
    
例如：
    

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

    
而且：
    

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

    
如果要从所有
    select
    和
    input
    元素中获取值，则需要显式地执行此操作，例如通过
    菜单
    和
    casella
    数组循环，而不是只选择它们的第一项
    
编辑：重构代码的建议方法
    
在进一步研究了代码之后，我认为您应该采取以下方法：
    

  • 在HTML中，为每个
    select
    元素添加一个ID属性
    • 

  • 向“cerca2”、“cerca5”和“cerca6”输入按钮添加一个属性，该属性指示相应
    select
    元素的ID
    • 

  • 然后，您可以访问
    cercagruppo（）
    函数中的属性，并使用它选择相应的
    select
    元素
    • 
您的
    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();
}

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

    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();
}

    

    Ricerca perfazione人物：
安理会
协议
泛滥
前兆


    
Ricerca armi per tipo：
电影
等离子体
能源


    
Ricerca Veicoli per impiego：
陆地
沃兰蒂
阿斯托纳维

    
编辑编辑
    
当然，您还应该修复@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 

    

    请花点时间创建一个复制问题的最小示例。我怀疑是否需要所有代码来演示该问题。那么在运行时会出现什么错误？这应该可以告诉您实际问题是什么。打开浏览器的开发控制台（通常是F12，但取决于您使用的浏览器）并选中“控制台”tab.这就是javascript（通常）记录内容的地方。嗯，好吧，我会试试，tnx的帮助。好吧，我试过了，但我不太好，我怎么能得到所有的“选择”元素？@Refarth我更新了我的答案，并提出了一个建议。我在阅读你的代码时学会了一些意大利语…Grazie！tnx我现在就试试！很抱歉xD周围的意大利语单词