Zeige/Verstecke Funktion

-1

Dies ist wahrscheinlich eine wirklich dumme Frage, aber ich bin nicht vertraut mit JavaScript.Zeige/Verstecke Funktion

Ich habe zwei verschiedene Dropdown-Menüs. Wenn Sie die Option "Andere" auswählen, wird ein Textfeld zum Schreiben Ihrer Anfrage angezeigt.

Wenn ich für das erste Menü codiert, hat es funktioniert. Wenn ich für die zweite kodiere, funktioniert nur das zweite Menü, wodurch die Ein-/Ausblendfunktion für das erste Menü deaktiviert wird.

function showfield(name){ 
 
    if(name=='Other')document.getElementById('div1').style.display="block"; 
 
    else document.getElementById('div1').style.display="none"; 
 
    } 
 
    
 
function hidefield() { 
 
document.getElementById('div1').style.display='none'; 
 
} 
 

 
function showfield(name){ 
 
    if(name=='Other')document.getElementById('div2').style.display="block"; 
 
    else document.getElementById('div2').style.display="none"; 
 
    } 
 
    
 
function hidefield() { 
 
document.getElementById('div2').style.display='none'; 
 
}

<body onload="hidefield()"> 
 
    <table> 
 
    <tbody> 
 
      <tr> 
 
         <td> 
 
         <select onchange="showfield(this.options[this.selectedIndex].value)"> 
 
         <option value=" ">-- Please select --</option> 
 
         <option value="All">All</option> 
 
         <option value="Clipped">Clipped</option> 
 
         <option value="Per Post-It">Per Post-It</option> 
 
         <option value="Other">Other</option> 
 
         </select></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <div id="div1">Other: <input type="text" name="other" /></div> 
 
         </td> 
 
        </tr> 
 
     <tr> 
 
         <td> 
 
         <select onchange="showfield(this.options[this.selectedIndex].value)"> 
 
         <option value=" ">-- Please select --</option> 
 
         <option value="Binding Element">Binding Element</option> 
 
         <option value="Folder/Binder">Folder/Binder</option> 
 
         <option value="Tabs">Tabs</option> 
 
         <option value="Other">Other</option> 
 
         </select></td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
         <div id="div2">Other: <input type="text" name="other" /></div> 
 
         </td> 
 
        </tr> 
 
     </tbody> 
 
    </table> 
 
    </body>

Quelle

2016-04-19 AbbyF

Sie zweimal das gleiche Paar von Funktionen definieren. Natürlich kann nur einer von ihnen wirklich verwendet werden. –

Beide Funktionen haben den gleichen Namen? – Th0rndike

Können Sie erklären, was Ihr Code erreichen soll? –

Wenn Sie eine Variable (oder Funktion) sind deklarieren, können Sie nur mit jedem Namen eine Funktion haben. Andernfalls überschreibt der zuletzt definierte die anderen. In Ihrem Fall würde ich entweder die Namen der zweiten Gruppe ändern oder die Werte showField und hideField ändern, um einen anderen Parameter zu verwenden: id. Für die ersten, passiere "other1" und für die zweiten passiere "other2". Sie sollten Ihre other Felder auch in andere Namen umbenennen.

Quelle

2016-04-19 16:42:23

Mit 4 verschiedenen Funktionen scheinen ein wenig unnötiger (und illegal - Funktionen können keine doppelten Namen haben). Sie können eine einzige Methode zu kümmern versteckt und zeigt jedes Objekt schreiben:

function showObject (obj) { 
    obj.style.display = ""; 
} 

function hideObject (obj) { 
    obj.style.display = "none"; 
}

Dann, wenn das Verfahren von einem Objekt aufrufen, können Sie so etwas tun: < ... onchange="showfield(document.getElementById(this.options[this.selectedIndex].value));" .../>

Und natürlich eine Lösung für jQuery Fans:

function showObject (id) { 
    $("#" + id).show(); 
} 

function hideObject (id) { 
    $("#" + id).hide(); 
}

Und in t seinen Fall, der Name des Elements wird das Element selbst geführt und nicht sein: onchange="showfield(this.options[this.selectedIndex].value)" .../>

Quelle

2016-04-19 16:46:00

Vor allem die Funktion hidefield erklären tat zweimal, hat der Funktionsname eindeutig sein, so dass die zweite Funktion einen anderen Namen haben sollte.
Die zweite Sache ist, dass Sie keine Funktion haben, um div1 zu zeigen, da Ihre Showfunktion nur die div div2

Quelle

2016-04-19 16:46:16

Vielen Dank für Ihre Hilfe!

Ich habe die Funktionsnamen geändert, um eindeutig zu sein, und die verschiedenen Funktionen im onload-Ereignis im body-Tag hinzugefügt.

function showfield(name) { 
 
    if (name == 'Other') document.getElementById('div1').style.display = "block"; 
 
    else document.getElementById('div1').style.display = "none"; 
 
} 
 

 
function hidefield() { 
 
    document.getElementById('div1').style.display = 'none'; 
 
} 
 

 
function showBreak(name) { 
 
    if (name == 'Other') document.getElementById('div2').style.display = "block"; 
 
    else document.getElementById('div2').style.display = "none"; 
 
} 
 

 
function hideBreak() { 
 
    document.getElementById('div2').style.display = 'none'; 
 
}

<html> 
 
    <head> 
 
     <title>Job Ticket</title> 
 
     
 
    </head> 
 
    <body onload="hidefield(); showBreak();"> 
 
     <table class="webform" cellspacing="0" cellpadding="2" border="0"> 
 
      <tbody> 
 
       <tr> 
 
        <td> 
 
        <p>Copying/Scanning</p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <select onchange="showfield(this.options[this.selectedIndex].value)"> 
 
        <option value=" ">-- Please select --</option> 
 
        <option value="All">All</option> 
 
        <option value="Clipped">Clipped</option> 
 
        <option value="Per Post-It">Per Post-It</option> 
 
        <option value="Other">Other</option> 
 
        </select> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <div id="div1">Other: 
 
        <input type="text" name="whatever" /> 
 
        </div> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <p>Document Breaks</p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <select onchange="showBreak(this.options[this.selectedIndex].value)"> 
 
        <option value=" ">-- Please select --</option> 
 
        <option value="All">All</option> 
 
        <option value="Clipped">Clipped</option> 
 
        <option value="Per Post-It">Per Post-It</option> 
 
        <option value="Other">Other</option> 
 
        </select> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
        <div id="div2">Other: 
 
        <input type="text" name="whatever" /> 
 
        </div> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </body> 
 
</html>

Quelle

2016-04-19 19:24:29 AbbyF

Zeige/Verstecke Funktion

Antwort

Verwandte Themen