Login

TecMec · 18.07.2024, 11:32

Hallo Zusammen - ich bins schon wieder.

Mein erstes Projekt ist fertig und jetzt stecke ich im zweiten an einer eigentlich ganz simplen Aufgabe:

Wenn ein HTML-Button gedrückt wird, rufe ich eine Funktion auf.
Diese Funktion blendet mir abhängig von der ID des Buttons Bilder ein und ändert den Hintergrund des Buttons.
Soweit, sogut - Funktioniert!

Code:
punkte = 0;

aktiv = 0;

function auswahl(zutat){

    var pressbutton = (zutat.id);

    console.log (pressbutton);

    var bild = "img"+[zutat.id];

    punkte = punkte + parseInt(zutat.value);

    document.getElementById(bild).style.visibility = "visible";

    document.getElementById(zutat.id).style.backgroundColor="rgba(0, 255, 255, 0.219)";

}

Code:
<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <title>Ratespiel</title>

    <script src="script.js"></script>

    <link rel="stylesheet" href="style.css">

</head>

<body>

<main>

    <img class="clzutat" id="imgTeig1" style="visibility: hidden;" src="teig1.png" alt="">

    <img class="clzutat" id="imgTeig2" style="visibility: hidden;" src="teig2.png" alt="">

</main>

<aside>

    <button onclick="auswahl(this)" class="btzutat" id="Teig1" value="5"> <img class="icon" src="btteig1.png" alt="Teig1">Variante 1: Klassicher Pizzateig aus Weizenmehl, konventionell erzeugt</button> 

    <button onclick="auswahl(this)" class="btzutat" id="Teig2" value="9"> <img class="icon" src="btteig2.png" alt="Teig2">Variante 2: Mal was anderes: Teig mit "alten" Getreidesorten aus extensiven Anbau</button>

</aside>

</body>

<footer>

</footer>

</html>

Jetzt soll aber zusätzlich eine Variable gesetzt werden (z. b. auf 0 oder 1), damit ich auswerten kann, ob der Button gedrückt ist.
Wird er nämlich nochmal gedrückt, soll das ganze Spiel umgekehrt laufen (Punkte Subtrahieren, und Bilder wegnehmen).

Ich finde aber nirgends, wie ich sozusagen eine Variable aus einer Variablen erzeuen kann.
Ich möchte ja abhängig von der ID des Buttons die Variable benennen und ihr dann den Wert 0 oder 1 zuweisen.

Werde im www nicht fündig, aber das kann doch nicht so schwer sein?

Kann mir da bitte jemand helfen?

Dank Euch!

Sempervivum · 18.07.2024, 12:31

Zitat:Ich finde aber nirgends, wie ich sozusagen eine Variable aus einer Variablen erzeuen kann.

Diese Frage wird häufig gestellt. Das ist zwar machbar aber in den wenigsten Fällen empfehlenswert.
Besser: Die Info entweder in einem data-Attribut oder einem getrennten Objekt ablegen, dann hast Du den Vorteil, dass Du sie mit einer Schleife abarbeiten kannst.

Code:
        let

            punkte = 0,

            aktiv = 0,

            zutaten = {};

        function auswahl(zutat) {

            const idButton = zutat.id;

            console.log(idButton);

            var bild = "img" + zutat.id;

            punkte = punkte + parseInt(zutat.value);

            document.getElementById(bild).style.visibility = "visible";

            document.getElementById(zutat.id).style.backgroundColor = "rgba(0, 255, 255, 0.219)";

            // Entweder so, den Status in einem data-Attribut ablegen:

            zutat.dataset.isActive = true;

            // Dann kannst Du so auf den Status zugreifen:

            console.log(document.getElementById(idButton).dataset.isActive);

            // Oder so, dann sind alle Zutaten in einem Objekt versammelt:

            zutaten[idButton] = true;

            // Und Du kannst so auf den Status zugreifen:

            console.log(zutaten[idButton]);

        }

TecMec · 18.07.2024, 14:00

Wow Danke, Du bist ja echt wahnsinn.
Ich blicke da momentan noch nicht ganz durch bei Deinem Vorschlag, werde ihn aber die Tage gleich mal ausprobieren und dann versuchen das Ganze zu verstehen.
Gebe dann nochmal eine Rückinfo.

Tschau

Ja sauber. Habs eben probiert, funktioniert ja wunderbar.

Habe dann gleich probiert den Zustand mit einer IF-Abfrage abzufragen, aber er gibt mir hier immer "ist wahr" aus, auch wenn ich den Zustand auf "false" setze.

function auswahl(zutat){
const idButton = zutat.id;
console.log (idButton);
zutat.dataset.isActive = false;
console.log(document.getElementById(idButton).dataset.isActive);
let zustand = (document.getElementById(idButton).dataset.isActive);
if (zustand=true){
console.log ("ist wahr");
}

var bild = "img"+[zutat.id];
punkte = punkte + parseInt(zutat.value);
document.getElementById(bild).style.visibility = "visible";
document.getElementById(zutat.id).style.backgroundColor="rgba(0, 255, 255, 0.219)";
}

Sempervivum · 18.07.2024, 23:12

Das liegt daran, dass das "true" in eine Stringdarstellung umgewandelt wird, wenn man es in ein data-Attribut einträgt. Fragst Du auf den String "true" ab, sollte es funktionieren. Außerdem musst Du bei der Abfrage ein doppeltes Gleichheitszeichen == verwenden:

Code:
if (zustand == 'true'){

    console.log ("ist wahr");

}

TecMec · 19.07.2024, 09:41

Danke. Hatte ich auch schon versucht, aber nicht zusammen mit den Gänsefüschen und dem doppelten =.

Jetzt funktionierts.
Sag mal Du hast ja auf jede Frage ne Antwort. Machst Du das beruflich?

Schöne Grüße
TecMec

Sempervivum · 19.07.2024, 09:46

Nein, ich mache das nicht beruflich, Webentwicklung nur auf der Hobby-Schiene. Ich habe aber früher beruflich Softwareentwicklung gemacht, nicht für das Web sondern mit C(++), Pascal, Java und Oracle-SQL. Wir haben Leittechnik für Nah- und Fernverkehr gemacht, U-Bahn und so. Seit einigen Jahren bin ich in Rente und habe mir das Wissen über Webentwicklung selbst erarbeitet. Mein beruflicher Hintergrund hat mir natürlich den Einstieg erleichtert, vor allem in Javascript.

TecMec · 19.07.2024, 18:25

Ah interessant. Dann bist Du also einer der wirklich weiß wovon er redet. "Hut-Ab" vor Deinem KnowHow.
Und nochmal Danke für Deine Hilfe.
Alles Gute und ne gesunde Rentenzeit!!!!

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken