Visibility-Funktion geht nicht. Was ist falsch?

Auf meiner Website programmiere ich ein Loginsystem, bei dem ich eine "Visibility-Funktion" (show/hide password) implementiert habe.

Bild zum Beitrag

Immer wenn ich auf das Icon klicke, soll es die Eigenschaft: "display: none" annehmen, das andere Icon einblenden und den input-Tag auf: type="password" setzen, damit man das Eingegebene sieht.

Der Wechsel zwischen den zwei Icons funktioniert prima. Leider ändert sich der Input type nicht. Ich habe irgendeinen Fehler im Sourcecode, nur finde ich diesen nicht.

Bild zum Beitrag

HTML:

<div class="login_element password">
  <i class="fa fa-lock password_lock" aria-hidden="true"></i>
  <input type="password" placeholder="password*" class="inputpassword" />
  <i class="fa fa-eye" id="show" aria-hidden="true" onclick="pwdvison()"></i>
  <i class="fa fa-eye-slash" id="hide" aria-hidden="true" onclick="pwdvison()"></i>
</div>

JS:

<script type="text/javascript">
  function pwdvison() {
    var x = document.getElementsByClassName("inputpassword");
    
    if (x.type === "password") {
      x.type = "text";
      document.getElementById('hide').style.display = "inline-block";
      document.getElementById('show').style.display = "none";
    }
    else {
      x.type = "password";
      document.getElementById('hide').style.display = "none";
      document.getElementById('show').style.display = "inline-block";
    }
  }
</script>

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, JavaScript

06.03.2022, 01:58

Die getElementsByClassName-Methode liefert dir, wie es der Name an sich schon sagt, alle Elemente im Dokument, die die angegebene Klasse besitzen.

Das heißt, du bekommst in jedem Fall stets ein Array zurück. Da du am ersten Ergebnis interessiert bist, musst du dir dieses auch erst aus dem Array nehmen:

document.getElementsByClassName("inputpassword")[0];

Oder du verkürzt die Suche, indem du die querySelector-Methode einsetzt:

document.querySelector(".inputpassword");

Sie liefert stets nur den ersten Fund.

s3rp3nt

Fragesteller

06.03.2022, 13:47

Danke vielmals

Ähnliche Fragen

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

...zur Frage

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zur Frage

Custom 'Upload' Button?

Schönen guten Abend!

Ich baue derzeit eine kleine Website mit einer Upload Funktion für beispielsweise Videos und Bilder.

Dazu benötige ich das HTML-Element input mit dem Type file.

Während man beispielsweise normale Eingabefelder mit dem Type text etc. gut selbst 'darstellen' kann, fängt es beim type="file" schon an, dass man den Value des Buttons nicht selsbt bestimmen kann. Mal davon abgesehen, dass der im Button enthaltene Text von Browser zu Browser variiert.

Nun aber zur eigentlichen Frage:

Wie kann ich einen benutzerdefinierten File-Upload definieren?

...zur Frage

JS Funktion: display: none sichtbar machen?

Wie erstelle ich eine Funktion, die von einem input-Feld die Eingabe des Benutzers überprüft und wenn das Richtige eingegeben wurde dann ein verstecktes Element sichtbar macht? Ich habe das Element über display: none versteckt.

Bin blutiger Anfänger, also bitte einfach erklären ;)

...zur Frage

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zur Frage

Javascript: Funktion nur ausführen wenn bedingung stimmt?

ich habe dieses JS :

function Rechner(){
	var x=document.getElementById("laenge").value;
	var y=document.getElementById("breite").value;
	document.getElementById("flaeche").value = xy;
}

jedes input hat das Attribut :

oninput="Rechner(this.value)"

Doch er soll die flaeche im Input nur ausgeben wenn wirklich laenge und breite ausgefüllt sind. derzeit zeigt er erst noch 0 an wenn nur 1 stimmt.

wie geht das ? kann man da irgendwie noch sagen "if isset laenge & breite" ?

...zur Frage

C++ Funktionen als Parameter in Klassen Übergeben?

C++ Source Code zusammengefügt:

class Menu
{
private:


public:
	char input = '0';
	std::string options[4] = { "\n\nMAIN MENU\n\n", "Option 1\n", "Option2\n", "End\n\n" };
	// Options { TITLE, OPTION1, OPTION2, ..., END
	void printMenu();
	void Setup();
	void ChangeOptions(std::string title, std::string option1, std::string option2);
	char getUserInput();
	void Engine(void(*f1), void(*f2)); // <-- HIER
	void Error(std::string error);
};

// Die Funktion Engine:

void Menu::Engine(void (*f1), void (*f2))
{
	Game game;
	while (true)
	{
		system("cls");
		printMenu();
		input = getUserInput();


		if (input == '1')
		{
			(&f1);
		}
		else if (input == '2')
		{
			(&f2);
		}
		else if (input == '3')
		{
			break;
		}
		else
		{
			Error("Invalid Input");
		}
	}
}

// Die Funktion, die die Engine aufruft (In der Klasse Game):

void Game::chooseCar()
{
	menu.ChangeOptions("\n\nVehicle Picker\n\n", "Next Car\n", "Last Car\n");
	menu.Engine(NextCar(), LastCar()); // <-- PROBLEM HIER
}

/* Beide Funktionen die ich übergeben möchte werden Rot unterstrichen.
Außerdem steht dort:
"Das Argument von Typ ""void(Game::*)()"" ist mit dem Parameter vom Typ ""void*"" inkompatibel."
*/

Wie kann ich die Funktion aus der Klasse Game, in die Funktion Engine des Objekts menu übergeben?

...zur Frage

Guten Tag, ich suche einen HTML Code wo, verwendet werden kann zum Copyright wo sich das Jahr jedes Jahr logischerweise automatisch +1 ändert, wo finde ich so ein Code?

...zur Frage

Wieso ist dieser Python-Code falsch?

Hallo! Ich lerne gerade Python und bin bei der type-Funktion.

Folgender Code ist falsch:

Beispiel_Variable = input("Bitte geben Sie etwas ein: ")
datentyp = type(Beispiel_Variable)
print("Es handelt sich bei Ihrer Eingabe um den Datentyp: " + datentyp)

Und folgender ist richtig:

Beispiel_Variable = input("Bitte geben Sie etwas ein: ")
datentyp = type(Beispiel_Variable)
print("Es handelt sich bei Ihrer Eingabe um den Datentyp:")
print(datentyp)

Warum kann ich also die Variable ,,datentyp" nicht in der gleichen Print-Funktion ausgeben lassen, wie den Text ,,Es handelt sich bei Ihrer Eingabe um den Datentyp:" ?

...zur Frage

App aus HTML Code?

Hallo,

ich habe einen HTML-Code und möchte diesen Code zu einer IOS App machen. Diese App soll dann auf Schulgeräten installiert werden. Wie kann ich das machen?

...zur Frage

XHR nutzt GET anstatt POST?

Mit folgendem code versuche ich zweck logins auf meinen Server zuzugreifen

var r = new XMLHttpRequest();

r.open("POST", "/user/login", true);
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

r.onreadystatechange = function () {

    if (r.readyState != 4 || r.status != 200) return;

    console.log(r.responseText);
            
    if (r.responseText == '?incorrect') {

        console.log('wrong password');

    }
    else if (r.responseText == 'correct') window.location.replace('/user/');

};

r.send('pwd=' + document.querySelector('#pwd-input').value);

Wenn ich den Code ausführe, steht in der Console der Seitenquelltext als Ergebnis. Der Server (Express) registriert eine GET request und auch im Netzwerktab von Chrome wird die request Methode mit GET angegeben. Hat jemand eine Idee warum und was ich versuchen könnte, außer Alternativen zur XHR zu nutzen?

...zur Frage

Ist es möglich, die Photoshop-Funktionen durch eine Photopea-Website zu ersetzen? Ist es eine anständige Website? Kann sie genutzt werden?

...zur Frage

HTML Input verdecken?

Hallo! Ich habe in HTML einen Input von Typ Text. Man sieht den Text, aber ich möchte, das man ihn angezeigt bekommt, als wäre es ein Passwort. Also mit *****.Ich kann aufgrund meines Javascript Codes ihn aber nicht als Typ Password(also <Input type="Password"> geht nicht) abspeichern. Kann ich den Text trotzdem irgendwie verdecken?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen