Funktion wird nicht erkannt

HTML 4 YOU · 29 Juni 2010

Hey Leute,

hab mal wieder ein Problem, und zwar habe ich eine Funktion, die bei einem Passwortfeld die Zeichen anzeigen bzw. zu ***** konvertieren soll, jedoch wird die Funktion nicht erkannt. In der Fehlerkonsole steht: "zeichen is not a function".

Hier mein Code:

Code:

function zeichen() {
                if(document.login.zeichen.checked == true) {
                    document.login.passwort.type = "text";
                } else {
                    document.login.passwort.type = "password";
                }

            }

und der HTML-Part:

HTML:

<form name="login" action="login.php" method="post" id="login">

                <table>
                    <tbody>
                        <tr>
                            <td width="100">
                                <p>Benutzername:</p>
                                <p style="margin-bottom: 10px;">Passwort:</p><br />
                            </td>

                            <td width="140">
                                <p><input type="text" size="20" maxlength="100" name="benutzer" /></p>
                                <p><input type="password" size="20" maxlength="100" name="passwort" /></p>
                                <p style="margin-top: 10px;"><input type="checkbox" name="zeichen" onclick="zeichen();" /> Zeichen anzeigen</p>
                            </td>
                        </tr>
                    </tbody>
                </table>

                    <input type="submit" value="Login" />

            </form>

Hoffe ihr könnt mir helfen

---------------------------------------------
HINWEIS: Ich habe versucht, onclick mit Javascript zuzuweisen, hab da aber einen Fehler. Und zwar erkennt der nicht den <input>, wenn ich ihn über document.getElementById() anzusprechen versuche. Wenn jemand da was weiß, dann bitte ebenfalls posten. Hier der Code:

Code:

var checkbox = document.getElementById('zeichen');

            checkbox.onclick = function() {
                zeichen();
            }

            function zeichen() {
                if(checkbox.checked == true) {
                    document.login.passwort.type = "text";
                } else {
                    document.login.passwort.type = "password";
                }

            }

HTML:

<form name="login" action="login.php" method="post" id="login">

                <table>
                    <tbody>
                        <tr>
                            <td width="100">
                                <p>Benutzername:</p>
                                <p style="margin-bottom: 10px;">Passwort:</p><br />
                            </td>

                            <td width="140">
                                <p><input type="text" size="20" maxlength="100" name="benutzer" /></p>
                                <p><input type="password" size="20" maxlength="100" name="passwort" /></p>
                                <p style="margin-top: 10px;"><input type="checkbox" id="zeichen" /> Zeichen anzeigen</p>
                            </td>
                        </tr>
                    </tbody>
                </table>

                    <input type="submit" value="Login" />

            </form>

Basti93 · 29 Juni 2010

Ich habe mir erlaubt, deinen HTML-Code etwas umzuschreiben:

HTML:

<html>
<head>
<script type="text/javascript">

function zeichen_anzeigen()
{
  
  if (document.getElementById('zeichen_anzeigen').checked)
  {
    document.getElementById('passwort').type = 'text';
  }
  else
  {
    document.getElementById('passwort').type = 'password';
  }
  
}

function dokument_geladen()
{
  
  document.getElementById('zeichen_anzeigen').onclick = function()
  {
    zeichen_anzeigen();
  }
  
}

</script>
</head>
<body onload="dokument_geladen();">

<form id="login" name="login" action="login.php" method="post">
  <table>
    <tr>
      <th><label for="benutzername">Benutzername</label>:</th>
      <td><input type="text" id="benutzername" name="benutzername" /></td>
    </tr>
    <tr>
      <th><label for="passwort">Passwort</label>:</th>
      <td><input type="password" id="passwort" name="passwort" /></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="checkbox" id="zeichen_anzeigen" name="zeichen_anzeigen" /> <label for="zeichen_anzeigen">Zeichen anzeigen</label></td>
    </tr>
  </table>
  <p><input type="submit" value="Login" /></p>
</form>

</body>
</html>

So funktioniert alles einwandfrei! :)

Getestet in folgenden Browsern:
- Firefox
- Safari
- Chrome
- Opera

Wichtig: Der IE lässt Änderungen am Type nur beim Anlegen des Elementes zu.
Ich werde mal schauen, ob ich ein Workaround programmieren kann ;)

(Der Beitrag darf gerne bewertet werden: http://www.html.de/reputation.php?do=addreputation&p=250285 ;))

Basti93 · 29 Juni 2010

Okay, ich habe einen Workaround für den IE programmiert:

1.) Ich lasse den Inhalt des Passwort-Feldes auslesen und speichern.
2.) Ich entferne das Passwort-Feld.
3.) Ich erzeuge ein neues Passwort-Feld mit angepasstem Type.
4.) Ich schreibe den ursprünglichen Inhalt in das Passwort-Feld.
5.) Zum Schluss passe ich noch das id- und das name-Attribut an.

Auf diese Weise konnte ich das Problem, das der IE keine Änderung des Type-Attributes zulässt, elegant umgehen ;)

HTML:

<html>
<head>
<script type="text/javascript">

function zeichen_anzeigen()
{
  
  var parent_id = 'td_passwort';
  var parent = document.getElementById(parent_id);
  var passwort_feld = document.getElementById(parent_id).firstChild;
  
  var inhalt = passwort_feld.value;
  
  parent.removeChild(passwort_feld);
  var neues_passwort_feld = document.createElement('input');
  
  if (document.getElementById('zeichen_anzeigen').checked)
  {
    neues_passwort_feld.type = 'text';
  }
  else
  {
    neues_passwort_feld.type = 'password';
  }
  
  neues_passwort_feld.value = inhalt;
  parent.appendChild(neues_passwort_feld);
  
  parent.firstChild.setAttribute('id', 'passwort');
  parent.firstChild.setAttribute('name', 'passwort');
  
}

function dokument_geladen()
{
  
  document.getElementById('zeichen_anzeigen').onclick = function()
  {
    zeichen_anzeigen();
  }
  
}

</script>
</head>
<body onload="dokument_geladen();">

<form id="login" name="login" action="login.php" method="post">
  <table>
    <tr>
      <th><label for="benutzername">Benutzername</label>:</th>
      <td><input type="text" id="benutzername" name="benutzername" /></td>
    </tr>
    <tr>
      <th><label for="passwort">Passwort</label>:</th>
      <td id="td_passwort"><input type="password" id="passwort" name="passwort" /></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="checkbox" id="zeichen_anzeigen" name="zeichen_anzeigen" /> <label for="zeichen_anzeigen">Zeichen anzeigen</label></td>
    </tr>
  </table>
  <p><input type="submit" value="Login" /></p>
</form>

</body>
</html>

(Der Beitrag darf gerne bewertet werden: http://www.html.de/reputation.php?do=addreputation&p=250290 ;))

HTML 4 YOU · 29 Juni 2010

Danke für deine Mühen, funktioniert alles wunderbar !

Nur eine Frage habe ich noch, was bringen die label? Ich check das iwie noch nicht was die bringen sollen.

Basti93 · 29 Juni 2010

Kein Problem :)

Mit Hilfe der label-Elemente kann man Beschriftungen eindeutig einzelnen Eingabefelden, Checkboxen, usw. zuordnen. Dies ist vor allem für Screenreader sehr nützlich.

HTML 4 YOU · 30 Juni 2010

Achso, man bin ich dumm.

Naja, danke

Funktion wird nicht erkannt

HTML 4 YOU

Neues Mitglied

Basti93

Blogger

Basti93

Blogger

HTML 4 YOU

Neues Mitglied

Basti93

Blogger

HTML 4 YOU

Neues Mitglied

Neueste Beiträge