Frank: Textfelder ein- bzw. ausblenden

SELF-Forum

Textfelder ein- bzw. ausblenden

Frank (Versionen)
– Informationen zu den Bewertungsregeln

Hallo ich fange nach 10 Jahren wieder an eine Seite zu erstellen. Komme aber nicht wirklich weiter. Ich möchte, das wenn ich im Selectfeld etwas auswähle gewisse Textfelder der Seite ein- bzw. ausgeblendet werden.

Mit diesem Code passiert nichts. Kann mir jemand helfen?

<!doctype html>
<html>
<head>
	<title>Testing</title>
</head>
<body>
<p><strong>Tester</strong></p>

<p>&nbsp;</p>
<form name="formular">
	<p>
		<select name="Anzahl Codes" ID="Label">
			<option selected="selected" value="1" onchange="Auswahl(this)">1 Datamatrix</option>
			<option value="2" onchange="Auswahl(this)">1 1D-Code</option>
			<option value="3" onchange="Auswahl(this)">2 1D-Code</option>
			<option value="4" onchange="Auswahl(this)">3 1D-Code</option>
			<option value="5" onchange="Auswahl(this)">1 Datamatrix &amp; 3 1d-Codes</option>
		</select>
	</p>

	<p>Datamatrix : <input maxlength="50" name="Datamatrix" size="50" type="text" ID="Datamatrix"></p>

	<p>1. 1D-Code : <input maxlength="20" name="1-1D-Code" size="20" type="text" ID="1-1D-Code"></p>

	<p>2. 1D-Code : <input maxlength="20" name="2-1D-Code" size="20" type="text" ID="2-1D-code"></p>

	<p>3. 1D-Code : <input maxlength="20" name="3-1D-Code" size="20" type="text" ID="3-1D-Code"></p>
			<script language="javascript" type="text/javascript">
			function Auswahl (element) 
			{
				// Ist das Element Value=1?
    		if (document.getElementById("Label").value == '1') 
    		{
    			document.getElementById("Datamatrix").style.display="block";
    			document.getElementById("1-1D-Code").style.display="hidden";
    			document.getElementById("2-1D-Code").style.display="hidden";	
    			document.getElementById("3-1D-Code").style.display="hidden";
    		}
    		// Ist das Element Value=2?
    		if (document.getElementById("Label").value == '2') 
    		{
    			document.getElementById("Datamatrix").style.display="hidden";
    			document.getElementById("1-1D-Code").style.display="block";
    			document.getElementById("2-1D-Code").style.display="hidden";	
    			document.getElementById("3-1D-Code").style.display="hidden";
    		}
    		// Ist das Element Value=3?
    		if (document.getElementById("Label").value == '3') 
    		{
    			document.getElementById("Datamatrix").style.display="hidden";
    			document.getElementById("1-1D-Code").style.display="block";
    			document.getElementById("2-1D-Code").style.display="block";	
    			document.getElementById("3-1D-Code").style.display="hidden";
    		}
    		// Ist das Element Value=4?
    		if (document.getElementById("Label").value == '4') 
    		{
    			document.getElementById("Datamatrix").style.display="hidden";
    			document.getElementById("1-1D-Code").style.display="block";
    			document.getElementById("2-1D-Code").style.display="block";	
    			document.getElementById("3-1D-Code").style.display="block";
    		}
    		// Ist das Element Value=5?
    		if (document.getElementById("Label").value == '5') 
    		{
    			document.getElementById("Datamatrix").style.display="block";
    			document.getElementById("1-1D-Code").style.display="block";
    			document.getElementById("2-1D-Code").style.display="block";	
    			document.getElementById("3-1D-Code").style.display="block";
    		}
			}
			</Script>
</Form>
<p>Script :</p>

<p><textarea cols="150" name="Script" rows="20" ID="6">//hier Script einf&uuml;gen//</textarea></p>
</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Textfelder ein- bzw. ausblenden

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Frank,

    nur ganz kurz: Namen, die in ID-Attributen verwendet werden, dürfen laut Spec nicht mit einer Ziffer beginnen, auch denn die Browser da gute Miene zum bösen Spiel machen. Außerdem notierst Du den Attribut-Namen besser als "id", also in Kleinbuchstaben.

    Liebe Grüße,

    Felix Riesterer.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Textfelder ein- bzw. ausblenden

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Felix Riesterer,

      nur ganz kurz: Namen, die in ID-Attributen verwendet werden, dürfen laut Spec nicht mit einer Ziffer beginnen,

      Das war mal.

      Außerdem notierst Du den Attribut-Namen besser als "id", also in Kleinbuchstaben.

      Warum?

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Textfelder ein- bzw. ausblenden

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Matthias Apsel

        nur ganz kurz: Namen, die in ID-Attributen verwendet werden, dürfen laut Spec nicht mit einer Ziffer beginnen,

        Das war mal.

        #oppaerzähltvomkriech

        Außerdem notierst Du den Attribut-Namen besser als "id", also in Kleinbuchstaben.

        Warum?

        Der Konsistenz wegen.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Textfelder ein- bzw. ausblenden

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    		<select name="Anzahl Codes" ID="Label">
			<option selected="selected" value="1" onchange="Auswahl(this)">1

    [...]

    			<script language="javascript" type="text/javascript">
			function Auswahl (element) 
			{
				// Ist das Element Value=1?
    		if (document.getElementById("Label").value == '1')

    hat ein select-Element eine value-Eigenschaft?

    Früher hat man den ausgewählten Wert über options[selectedIndex] aus dem select geholt …

    Ach ja, das Ergebnis von document.getElementById("Label") könntest Du auch in einer Variable zwischenspeichern, damit nicht n-Mal das DOM durchsucht werden muß. Oder auch gleich der value …

    cu,
    Andreas a/k/a MudGuard

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Textfelder ein- bzw. ausblenden

      Robert B.
      – Informationen zu den Bewertungsregeln

      Moin,

      hat ein option-Element ein change-Event?

      Viele Grüße
      Robert

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Textfelder ein- bzw. ausblenden

    Rolf B
    – Informationen zu den Bewertungsregeln

    Hallo Frank,

    du hast einige subtile Fehler drin. Öffne die Entwicklungswerkzeuge deines Browsers und es wird hageln :)

    • Dein Script steht HINTER den Elementen, von denen es verwendet wird, und darum funktioniert das Setzen der onchange-Attribute nicht. Verwende statt dessen einen DOMContentLoaded-Handler und ordne den Event-Handler für change darin mit addEventListener zu.
    • Du musst das change-Event auf dem select registrieren, nicht auf den Options.
    • Das zweite 1D-Code Element hat die ID 2-1D-code statt 2-1D-Code und wird darum von den getElementById nicht gefunden.
    • Wenn du mit addEventListener arbeitest, bekommt die Handler-Funktion ein event-Objekt mit. In event.target steht das HTML Element, für das der change ausgelöst wird. Du kannst also sofort event.target.value testen und musst es nicht mit getElementById suchen.
    • Statt einer if-Kette, in der Du jedesmal das Element neu suchst, könntest Du auch einen switch-Befehl verwenden.
    • display:hidden gibt's nicht. Das heißt display='none'
    • display:block ist schlecht für Input-Elemente. Nimm display='' um den Default wiederherzustellen.
    • Du brauchst noch eine Logik für den Anfangszustand. Du solltest die Auswahl-Funktion zerlegen, so dass Du eine eigene Funktion für die Sichtbarkeitssteuerung hast, die den aktuell ausgewählten Wert bekommt, keinen Verweis auf ein HTML Element. Dann kannst Du sie im Event-Handler mit dem Wert von event.target.value aufrufen und im ready-Handler mit dem aktuellen Wert des SELECT (bzw. mit "1", weil Du das ja voreinstellst)
    • Helper-Funktionen machen das Leben leichter. Mein JavaScript für dein HTML sieht so aus. Irgendwelche on-Attribute im HTML gibt's dann nicht mehr. Man nennt das unobtrusive JavaScript, d.h. der Script-Anteil ist im HTML komplett unsichtbar.
    document.addEventListener('DOMContentLoaded', function() {
   var selector = document.getElementById("Label");
   selector.addEventListener('change', function(evt) {Auswahl(evt.target.value)});
   Auswahl(selector.value);
})

function Auswahl (wert) 
{
   switch (wert) {
	 case '1': SteuereInput(true, 0);
             break;
	 case '2': SteuereInput(false, 1);
             break;
	 case '3': SteuereInput(false, 2);
             break;
	 case '4': SteuereInput(false, 3);
             break;
	 case '5': SteuereInput(true, 3);
             break;
   }
}

function SteuereInput(matrix, numId) {
   document.getElementById("Datamatrix").style.display = matrix ? "" : "none";
   document.getElementById("1-1D-Code").style.display = numId > 0 ? "" : "none";
   document.getElementById("2-1D-Code").style.display = numId > 1 ? "" : "none";
   document.getElementById("3-1D-Code").style.display = numId > 2 ? "" : "none";
}

    Rolf

    --
    Dosen sind silbern
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Textfelder ein- bzw. ausblenden

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Rolf B

      • display:hidden gibt's nicht. Das heißt display='none'

      Es gibt aber das hidden-Attribut. Dieses sollte man verwenden, nicht Stile direkt mit JavaScript ändern.

      • display:block ist schlecht für Input-Elemente. Nimm display='' um den Default wiederherzustellen.

      Dann braucht man sich darum auch überhaupt keine Gedanken zu machen.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Textfelder ein- bzw. ausblenden

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar,

        dann hab ich eben in meinem Fiddle irgendwelchen Blödsinn gemacht - da konnte ich nämlich hidden auf true setzen, aber der reset auf false zeigte keinen Effekt. Fand ich merkwürdig, hab's aber hingenommen und bin bei display geblieben.

        Ich hatte sogar überlegt, auf einem gemeinsamen Container der input-Elemente Klassen zu setzen und die Sichtbarkeit dann mit CSS zu steuern - aber irgendwie fand ich das auch nicht passend; entweder wären die Klassen dann GUI-Funktionalität geworden (zeigeMatrix, zeigeCode1, zeigeCode2, zeigeCode3) oder ich hätte für jede Auswahl eine Klasse setzen müssen und dann die GUI Steuerlogik im CSS aufgeschrieben. Gefiel mir beides nicht.

        Schick wäre vielleicht gewesen, wenn man über Selektoren den value des select einbeziehen könnte, aber value ist scheinbar ein Property, kein Attribut, und ich hab's nicht hinbekommen, auch nur die background-color des select über den value zu steuern. Für Fremd-Elemente hätte man dann noch eine andere DOM-Struktur gebraucht (damit der Sibling-Kombinator greift), oder CSS4 mit :has() )

        Rolf

        --
        Dosen sind silbern
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Textfelder ein- bzw. ausblenden

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Rolf B

          dann hab ich eben in meinem Fiddle irgendwelchen Blödsinn gemacht - da konnte ich nämlich hidden auf true setzen, aber der reset auf false zeigte keinen Effekt.

          Da hast du wohl Blödsinn gemacht. Geht doch.

          AFAIR funktioniert das mit Element.hidden in irgendwelchen älteren Browsern nicht, aber mit Element.setAttribute()/Element.removeAttribute().

          (Und noch ältere Browser bräuchten noch [hidden] { display: none } im Stylesheet.)

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln