[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

Answer 1

[regex9]

Wie kann ich ein Element von Anfang an unsichtbar machen?

Indem du es von Beginn an unsichtbar setzt.

<input id="key">
<a href="#" id="download">Download</a>
<button type="button" onclick="checkKey()">Login</button>
<script>
  const downloadElement = document.getElementById("download");
  downloadElement.style.display = "none";

  // function checkKey ...
</script>

Deine Funktion kann nicht funktionieren, da dieser Ausdruck:

visible;

dein Element nicht wieder sichtbar macht.

In dieser Zeile:

var visible = document.getElementById("download").style.display = "visible";

wird erst der rechte Ausdruck ausgewertet. Das heißt, das display-Property des Elements #download wird zu visible geändert (übrigens ein ungültiger Wert). Danach wird der Wert von display ausgelesen und in der Variable visible gespeichert.

Deine Funktion sollte viel eher so aussehen:

const downloadElement = document.getElementById("download");
downloadElement.style.display = "none";

const inputKeyField = document.getElementById("key");

function checkKey() {
  const key = "abc1";
  const inputKey = inputKeyField.value;

  if (key === inputKey) {
    downloadElement.style.display = "inline-block";
    alert("r");
  }
  else {
    downloadElement.style.display = "none";
    alert("w");
  }
}

Wie du sicherlich bereits bemerkt hast, habe ich die Funktion umbenannt. Der vorherige Name hat ihre Funktion nicht beschrieben. Auch ein anderer Name wie showOrHideDownloadLink wäre denkbar und wohl noch aussagekräftiger.

Das #download-Element ermittle ich hier bereits vor der Funktion. Es ändert sich innerhalb des Handlers nie, daher braucht es nur einmal im DOM gesucht werden. Das Gleiche gilt für das Eingabefeld (und an sich ebenso für den Key, doch da ist der Aufwand, den String zu erzeugen, um einiges geringer).

Bei Klick werden die Keys verglichen und der Zustand des #download-Elements geändert (ob nun zu block, inline-block, o.ä. ist fallabhängig).

Noch etwas eleganter wäre die Lösung mit einem CSS-Selektor, der je nach Zustand nur angefügt oder wieder entfernt wird. So werden Styles, Logik und Markup klarer voneinander getrennt.

CSS:

.hidden { display: none }

HTML:

<input id="key">
<a class="hidden" download id="download-link" href="#">Download</a>
<button id="login-button" type="button">Login</button>

JavaScript:

function checkKey() {
  const key = "abc1";
  const inputKey = inputKeyField.value;

  if (key === inputKey) {
    downloadElement.classList.remove("hidden");
    alert("r");
  }
  else {
    downloadElement.classList.add("hidden");
    alert("w");
  }
}

const downloadElement = document.getElementById("download-link");
const inputKeyField = document.getElementById("key");
document.getElementById("login-button").addEventListener("click", checkKey);

Zuletzt noch eine Anmerkung (sicherheitshalber): Dir ist hoffentlich bewusst, dass diese Form der Prüfung deinen Downloadlink nur gegen Nutzer schützt, die nicht viel mit Webtechnologien vertraut sind bzw. nichts mit den Entwicklertools des Browsers anfangen können.

Comments

[verreisterNutzer]

document.getElementById("login-button").addEventListener("click", checkKey);


Uncaught TypeError: Cannot read property 'addEventListener' of null
  at index.html:31

Der will Probleme.

[regex9]

@verreisterNutzer

Der Fehler weist daraufhin, dass das Element mit der ID login-button nicht gefunden wurde. Stelle sicher, dass es in deinem Dokument vorhanden ist und das Skript erst danach ausgeführt wird. Letzteres kannst du erreichen, indem du den script-Tag erst nach dem Element einbindest (z.B. kurz vor dem schließenden body-Tag).

[verreisterNutzer]

@verreisterNutzer

Hat funktioniert, habe dummerweise was anderes noch im Code drin gehabt, was das ganze blockiert hatte🤦‍♂️Naja, ich schiebe die Schuld auf 3:00 Uhr

[verreisterNutzer]

Ich habe das mal alles(der elegantere Teil) 1:1 in eine andere Datei rauskopiert, weil es so nicht funktionierte, aber es funktioniert wohl an sich nicht 🤔

JavaScript ist selbstverständlich aktiviert.

[verreisterNutzer]

Zuletzt noch eine Anmerkung (sicherheitshalber): Dir ist hoffentlich bewusst, dass diese Form der Prüfung deinen Downloadlink nur gegen Nutzer schützt, die nicht viel mit Webtechnologien vertraut sind bzw. nichts mit den Entwicklertools des Browsers anfangen können.

Dies ist mir bewusst, ja 🙂

Answer 2

[FaTech]

Es gibt kein display: visible; Es gibt aber display: block; oder visibility: visible; Je nach dem welchen du in CSS benutzt musst du nehmen

Answer 3

[kleinschwendi]

Indem du die erstellte Funktion ausgibst. Viel einfacher wäre es mit jquerry.

Übrigens sollte man das mit css machen. Danach mit JS / jquerry wieder einblenden. Sonst gibts da flicker beim laden.

Comments

[verreisterNutzer]

Das mit visibility: hidden; in CSS ist mir im Nachhinein auch wieder eingefallen😅

Aber was habe ich eigentlich falsch gemacht, sodass es durch das Script, wenn man den Key richtig hat, nicht wieder eingeblendet wird und noch nicht mal die alert()-Methode kommt?

[kleinschwendi]

@verreisterNutzer

Weil du die Funktion erstellt hast, aber diese nicht ausführst.

getKey();

[verreisterNutzer]

@kleinschwendi

<button type="button" onclick="getKey()">Login</button>

Doch, wird es🤔

[FaTech]

@verreisterNutzer

Schau dir mal event listener an, das onclick im HTML macht man eigentlich nicht mehr

[verreisterNutzer]

@FaTech

JavaScript:

document.getElementById("key").onclick = function() {


    var visible = document.getElementById("download").style.display = "visible";
    var login = document.getElementById("login");
    var logininvisible = login.parentNote.removeChild(login);


    var key = "abc1";


    var keY = document.getElementById("key").value;


    if (key == keY) {
      visible
      logininvisible
      alert("r")


    } else {
      alert("w")
    }

HTML:

<form id="login">
    <input type="text" id="key" required placeholder="Key">
    <button type="button">Login</button>
    </form>
  <script type="text/javascript" src="main.js"></script>

Aber es passiert nichts😐

[FaTech]

@verreisterNutzer

Ja, schau dir mal bitte meinen Post dazu an, dass ist eventuell das Problem

[verreisterNutzer]

@FaTech

Meinst du das .addEventListener?

element = document.getElementById('key');


element.addEventListener("click", function() {


  var visible = document.getElementById("download").style.display = "visible";
  var login = document.getElementById("login");
  var logininvisible = login.parentNote.removeChild(login);


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible
    logininvisible
    alert("r")


  } else {
    alert("w")
  }
});

machts auch nicht :/

[FaTech]

@verreisterNutzer

Du hast dir immernoch nicht meinen Post angeschaut ... Es geht um display

[kleinschwendi]

Ach ja. Wenn es um ein Login geht, müsste man es mit php einblenden. Nicht mit JS. Das heisst element mit echo hinzufügen. Sonnst kann jeder in chrome das css von none auf visible stellen.