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

Hallo,

ich habe zwei Fragen.

1) Ich habe ein Array mit Objekten. Der Anwender kann sich aus einer select-Auswahl eine ID auswählen und dann werden die Informationen dargestellt und er kann sie verändern.

Wie bekomme ich anhand eines Wertes von einem Objekt (die ID) das ganze Objekt zurück?

Beispiel:

arr: [{
  id: 123,
  wert: null
}, {
  id: 456
  wert: "Test"
}]

// User wählt Objekt anhand der ID
var choice = getSelectBox(); //Bsp. 456
var object = getObject(user); //das zweite Objekt
console.log(object.wert); //prints Test

2) Ich habe öfters auf meiner Seite einen Container mit display: block/none und schalte dann mit einer Funktion um auf das andere. Das Problem: Beim allerersten Mal muss das Element, auf dem diese Funktion gelegt ist, doppelt angeklickt werden. Danach nur noch einmal. Das liegt daran, dass JavaScript die Werte beim ersten Klicken offenbar nicht richtig geladen bekommt. Zumindest steht es so im Internet. Gibt es da irgendeinen Trick, den man da anwenden kann?

Beispiel-Methode:

showOptions function() {
  var opt = document.getElementById("notShown")

  if (opt.style.display != "none") {
    opt.style.display = "none"
  }
  else {
    opt.style.display = "block"
  }
}

HTML:

<p id="optional" onclick="showOptions()">Weitere optionale Wahlmöglichkeiten:</p>
<!-- ausgeblendeter Teil -->
<div id="notShown">
  <!-- Mehrere Container etc. -->
</div>

Ich hoffe, es ist verständlich, was ich erreichen möchte.

Computer, HTML, Programmieren, Coden, CSS, JavaScript, Informatik
1 Antwort
Vue - v-for und Index?

Hallo,

ich versuche seit geraumer Zeit den Index von der for Schleife zu ermitteln. Und zwar so, dass ich ihn dann In JavaScript nutzen kann. (Nicht im HTML Dokument).

Bsp:

<div id="wrapper">
<a class="event" v-bind:style="{order: e.order}" v-for="e, index in events" :href = "e.page"><img v-bind:src="image" v-bind:alt="alt" />
<p><b>{{ e.title }}</b> <br>
{{e.subtitle}} {{index}} </p>
</a>
</div>

Das meine ich mit nicht im HTML Dokument. Ich möchte diesen Index in JS verwenden können.

Kurze Erklärung meines Falles:

Es geht um das Weiterleiten zur nächsten Seite. Ich klicke auf ein Event und möchte zur Ansicht der Daten gelangen.

Nun gibt es zwei verschiedene Arten von Events:

ohne Code - Ich klicke auf Event und komme zur Ansicht - funktioniert bei mir einwandfrei.

mit Code - Ich klicke auf Event und muss erst einen Code eingeben - ist dieser richtig gehe ich auf die Ansicht-Seite. - funktioniert noch nicht.

Ich weiß nicht, wie man sowas allg löst, aber ich wollte es folgendermaßen lösen.

Ich klicke auf das Event und merke mir den Index. Durch diesen Index kann ich dann auf der Codeseite die Anweisung geben auf welche Seite weiterverlinkt werden soll.

Weiterer Code:

var allEvents = new Vue({
    el:"#wrapper",
    data:{
        events: [
        {
            image: "./assets/Website/VeranstaltungsIMG.png",
            alt:"VeranstaltungsIMG",
            page:"formular.html",
            order:"3",
            title:"3",
            subtitle:"Subtitel"
        },
        {    
            image: "./assets/Website/VeranstaltungsIMG.png",
            alt:"VeranstaltungsIMG",
            page:"code.html",
            url:"ansicht.html",
            order:"2",
            title:"2",
            subtitle:"Ball"
        }],
        methods:{
        getIndex: function(){
        //Der Code der mir nicht gelingen möchte
        }
        }
});

Ich hoffe ihr könnt mir sagen wie ich an den Index ran komme.

Mfg, werdas34

Computer, Programmieren, JavaScript, JS, Informatik, JavaScript-Code
1 Antwort