JavaScript: Wie bekomme ich ein Object anhand einer ID zurück und display: none / block-Problem?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

1) Verwende die find-Funktion:

var result = arr.find(obj => obj.id === yourId);

2) Ich weiß zwar, was du meinst, doch anhand deines Beispiels wäre es nicht reproduzierbar (Demo), denn du prüfst ja, ob der Wert von display ungleich none ist.

Damit der Wert initial gesetzt ist, müsstest du dies entweder explizit im Markup oder via JS bei Laden der Seite tun.

<div id="notShown" style="display:none"></div>

Noch besser wäre es aber, wenn du nicht auf das style-Objekt zugreifst, sondern stattdessen die classList änderst (CSS-Klassenselektoren, die die Sichtbarkeit definieren, hinzufügen/entfernen) und das Element via CSS initial ausblendest. So hast du auch wieder eine saubere Trennung zwischen Styling, Logik und Markup.

Dropdown Menu Buttons nebeneinander?

Ich habe für meine Website ein Dropdown Menu gemacht,dass aus einem Button besteht,der,wenn man draufklickt eine neue Liste unterhalb des Buttons öffnet,die Links enthält.Um eine Navigtionsleiste zu erstellen,die übersichtlich ist,will ich mehrere Buttons nebeneinander positionieren.Das hat soweit auch geklappt und das erste Menü öffnet sich perfekt,wenn ich aber den anderen Button anklicke,öffnet sich nur das Menü des ersten Buttons.

Hier der Code,bestehend aus html,css und JavaScript (die entsprechende Stellen) :

HTML

<div class="dropdown">    <button onclick="myFunction()" class="dropbtn">Charaktere</button>    <div id="myDropdown" class="dropdown-content">      <a href="#">1</a>      <a href="#">2</a>      <a href="#">3</a>  </div> </div> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Charaktere</button> <div id="myDropdown" class="dropdown-content">  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a> </div>   </div>

CSS

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

JavaScript

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

...zur Frage

Was möchtest Du wissen?