在不同的選擇中使用相同的JavaScript函數

我需要在3個獨立選項中使用名爲Cerca2的相同JavaScript函數。第一個工作，但其他人不工作。我試圖自己解決這個問題，但我找不到它在哪裏。在不同的選擇中使用相同的JavaScript函數

編輯：代碼編輯，現在完美，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>

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

來源

2015-05-12 Refarth

請花時間創建一個複製問題的最小示例。我懷疑需要所有代碼來證明這個問題。 –

那麼在運行時會出現什麼錯誤？這應該告訴你實際問題是什麼。打開瀏覽器的開發控制檯（通常爲F12，但取決於您使用的瀏覽器）並檢查「控制檯」選項卡。這是JavaScript（通常）記錄東西的地方。 – arkascha

我米不知道我完全理解這個問題，但在此代碼中，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");

來源

2015-05-12 17:20:17 mgarant

在您的代碼的幾個部分中，您選擇某個類型的所有元素，但只使用第一個這樣的元素。

例如：

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元素獲取值，你需要明確地這樣做，如循環遍歷menu和casella數組，而不是僅選擇其第一項。

編輯：建議的方法來重構代碼

你的代碼已經看了多一點，這是我認爲你應該採取的方法：

在HTML中，添加一個ID屬性你的每個select元素。
屬性添加到您的「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最終會尋找更多類似這樣的：

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"/>

編輯編輯

，當然還有，您還應該修復@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

來源

2015-05-12 17:38:18 Thriggle

嗯好吧ill'try，TNN的幫助 – Refarth

好吧，我已經嘗試過，但我不好，我怎麼能得到所有「選擇」元素？ – Refarth

@Refarth我用一個建議更新了我的答案。我在閱讀代碼的同時學習了一些意大利語...... Grazie！ – Thriggle

在不同的選擇中使用相同的JavaScript函數

回答

相關問題