Was ist da schief (JS)?

Starte ich das Programm so beginnt es so wie ich es will. Irgendwann wird dann aber ein Fehler gezeigt

("main.js:27 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

  at ClickIt (main.js:27)

  at clickvol2 (main.js:21)

  at HTMLParagraphElement.<anonymous> (main.js:30))

und mehrere Flächen farbig markiert und man muss manchmal doppelt klicken. Wo liegt hier der Fehler?

JS:
"use strict";

let genNum = function() {

    let gen = Math.random() * 9;

    let num = Math.round(gen);

    let numers = ["null", "eins", "zwei", "drei", "vier", "fünf", "sechs", "sieben", "acht", "neun"];

    let final = (numers[num]);

    if(final === "zehn") {

        genNum()

    }

    return final;

};

let i = 0;

document.getElementById("Punkteanzahl").textContent = i;

let clickvol2 = function() {

    if (document.querySelector("#eins", "#zwei", "#drei", "#vier", "#fünf", "#sechs", "#sieben", "#acht", "#neun").hasAttribute("class")) {

        console.log(".")

    } else {

        ClickIt(genNum())

    }};

let ClickIt = function(num) {

    let hash = "#";

    let ident = hash.concat(num);

    document.querySelector(ident).setAttribute("class", "click");

    document.querySelector(ident).addEventListener("click", function() {

    document.querySelector(ident).removeAttribute("class");

    clickvol2();

    i++;

})

};

ClickIt(genNum());

console.log(document.getElementById("Punkteanzahl").textContent)

Computer, HTML, programmieren, CSS, JavaScript
JavaScript 2 forEach Schleifen?

Hi,

ich bin dabei mein eigenes Schachspiel als Webseite zu programmieren. Ich hänge aber leider gerade beim spawnen der Figuren fest. Ich will diese ja so kompakt wie möglich im Code formulieren.

Die Frage ist jetzt beim letzten Bild. Warum kann ich keine 2 for each schleifen so wie im bild durchlaufen lassen. es kommt das hier als fehler

Ich will in der ersten for each alle 6 objekte nacheinander aufrufen, dann jeweils pro durchlauf soll zu z.b den bauern alle 16 positionen auf dem schachfeld belegt werden. ich hoffe jemand kann mir helfen.

Hier nochmal die wichtigsten teile des codes als text:

function Figur(name, position, bild)

{

    this.Name = name;

    this.Position = position;

    this.Bild = bild;

    this.Bewegen = bewegen;

}

var f_namen = ["bauer","springer","laeufer","turm","dame","koenig"];

var bauer = new Figur("bauer", ["1_2","2_2","3_2","4_2","5_2","6_2","7_2","8_2","1_7","2_7","3_7","4_7","5_7","6_7","7_7","8_7"], "Media/Bilder/Schachfiguren/Bauer.png");

var springer = new Figur("springer", ["2_1","7_1","2_8","7_8"], "Media/Bilder/Schachfiguren/Springer.png");

var laeufer = new Figur("laeufer", ["3_1","6_1","3_8","6_8"], "Media/Bilder/Schachfiguren/Läufer.png");

var turm = new Figur("turm", ["1_1","8_1","1_8","8_8"], "Media/Bilder/Schachfiguren/Turm.png");

var dame = new Figur("dame", ["4_1","4_8"], "Media/Bilder/Schachfiguren/Dame.png");

var koenig = new Figur("koenig", ["5_1","5_8"], "Media/Bilder/Schachfiguren/König.png");

function spielstart()

{

    //Alle Felder leeren

    $(".figur").remove();

    //Figurenzähler auf 1

    f_nummer = 1;

    //Figuren spawnen

    f_namen.forEach(element_name => {

        element_name.Position.forEach(element => {

            $("<div/>",{

                id: koenig.Name + "_" + f_nummer,

                class: "figur",

                "height" : "100px"

            }).appendTo("#feld_" + element);

           

            $("<img/>",{

                class: "l_bild",

                "src" : koenig.Bild

            }).appendTo("#koenig_" + f_nummer);

            f_nummer++;

        });

    });

}

Bild zum Beitrag
Computer, HTML, programmieren, JavaScript, JQuery, Spiele und Gaming
Warum kommt da dieser Fehler?

Hi, ich habe bereits eine Frage zu dem Thema gestellt, und möchte bei dieser hier nur mehr ins Detail gehen. Ich bin gerade dabei ein Discord Login auf einer Seite zu implementieren. Dabei kommt aber die ganze Zeit ein Fehler und ich weiß nicht, wie ich diesen beheben kann... Die Konsole sagt, dass dieser Fehler in Zeile 49 ist, und in dieser Zeile befindet sich folgendes:

fetch('https://discord.com/api/oauth2/token', {
        method: "POST", body: data_1
    })
        .then(response => response.json())
        .then(data => { // Make a request to the Discord API with the form data, convert the response to JSON, then take it and run the following code.
            axios.get("https://discord.com/api/users/@me", make_config(data.access_token)).then(response => { // Make a request yet again to the Discord API with the token from previously.
                res.status(200).send(response.data.username); // Send the username with a status code 200.
            }).catch(err => { // Handle any errors in the request (such as 401 errors).
                console.log(err); // Log the error in the console
                res.sendStatus(500); // Send a 500 error.
            });
        });

Fehleranzeige in der Konsole:

TypeError: fetch is not a function
    at C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\oauth.js:49:5
    at Layer.handle [as handle_request] (C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\express\lib\router\index.js:275:10)
    at C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\body-parser\lib\read.js:130:5
    at invokeCallback (C:\Users\Dominik\Documents\Development\Websites\Norvex\ucp.norvex.eu\node_modules\raw-body\index.js:224:16)

Wie man aus dem Fehler erkennen kann, bemengelt die Konsole, dass "fetch" keine Funktion ist. Ich habe aber den Syntax von fetch gegoogelt und es nochmal überprüft aber keinen Fehler gefunden. Vielleicht sieht einer von euch einen Fehler im Code.

Ganzer Code:

https://jsfiddle.net/Atrapfare/zLedj3pf/

Danke für jede Antwort!

HTML, Webseite, JavaScript, node.js, Discord, npm
Wie gebe ich Dictionary einer Funktion in Javascript mit?

Hallo, ich kriege folgende Fehlermeldung bei meinem Code: "Uncaught SyntaxError: Unexpected identifier" und weiß nicht wie ich mein dict meine onclick so übergebe, dass ich anschließend damit weiterarbeiten und iterieren kann. Als Beispiel für mein Problem habe ich folgende kleine anwendung geschrieben:

script.js:

function geklickt(dictionary){
$('#Entries').text(dictionary);
}


var dict =
{'lizens':
    {'Apache License 2.0':
        {'value': 23,
         'paths': ['Bernd', 'Hans'],
         'id': '342345'}},
'rechte':
        {'Copyright (c) 2013-2020 the original author or authors': 3},
'authoren':
        {'Bexter': 6, 'senior': 6},
'fileTypes': [0, 21, 0, 0, 0, 0, 0, 0, 44],
}


 $("#buttons").append(`<button href="#"onclick="geklickt(${dict})">drücken</a></button>`);



test.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>
</head>
<body >

<ul id="buttons"></ul>
<p id="Entries"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='assets/js/scripts.js') }}"></script>
</body>
</html>

Also meine Frage ist wie ich jetzt mein dict der onclick übergebe damit es am ende ausgegeben werden kann. In meiner eigentlichen Anwendung will ich damit natürlich noch weiterarbeiten, also vlt auch so dass ich es anschließend noch iterieren kann. Ich bin recht neu und kenne den Zusammenhang zwischen String und Dictionary noch nicht richtig, kann ich bei einem Dictionary iterieren wenn es als string vorliegt oder ist Dictionary eine art eigene Datenstruktur?
Danke schonmal im Voraus.
Computer, Technik, HTML, programmieren, Java, JavaScript, Technologie, Frontend
JavaScript: Preise aus mehreren Dropdown-Listen addieren?

Liebe*r Leser*in,

ich würde gerne in vier (4) Dropdown-Listen verschiedene Produkte mit teils verschiedenen Preisen auflisten. Je nach Auswahl soll dann eine Summe aus einem vorher festgelegtem Wert und zusätzlich die Summe aus jeweils einem Wert von jedem der vier Dropdown-Listen ausgegeben werden.

Also: Wert+Drop1+Drop2+Drop3+Drop4=Summe

Insgesamt habe ich 16 Produkte, die auf die Dropdown-Listen aufgeteilt sind, und einen Festwert, der als Startpunkt dient.

Mein Niveau ist als "totaler Anfänger" zu beschreiben. Daher bitte ich darum, nicht allzu viel vorauszusetzen. :)

Hier mal meine Zeilen:

        <div class="auswahlliste">
  			<select id="produktliste1">
  				<option value="0.60">Produkt1 (0,60 €)</option>
  				<option value="0.60">Produkt2 (0,60 €)</option>
  				<option value="0.60">Produkt3 (0,60 €)</option>
  				<option value="0.50">Produkt4 (0,50 €)</option>
  			</select>
  		</div>
  	
  		<div class="auswahlliste">
  			<select id="produktliste2">
  				<option value="1.10">Produkt1 (1,10 €)</option>
  				<option value="0.70">Produkt2 (0,70 €)</option>
  				<option value="0.65">Produkt3 (0,65 €)</option>
  				<option value="0.65">Produkt4 (0,65 €)</option>
  				<option value="0.60">Produkt5 (0,60 €)</option>
			</select>
		</div>
		
		<div class="auswahlliste">
			<select id="produktliste3">
				<option value="0.95">Produkt1 (0,95 €)</option>
				<option value="0.55">Produkt2 (0,55 €)</option>
				<option value="0.25">Produkt3 (0,25 €)</option>
			</select>
		</div>
		
		<div class="auswahlliste">
			<select id="produktliste4">
				<option value="0.60">Produkt1 (0,60 €)</option>
				<option value="0.60">Produkt2 (0,60 €)</option>
				<option value="0.60">Produkt3 (0,60 €)</option>
				<option value="0.50">Produkt4 (0,50 €)</option>
			</select>
		</div>

Die Summe soll dabei immer automatisch als Text ausgegeben und bei veränderter Auswahl auch neu berechnet und angezeigt werden.

Ich würde mich sehr freuen, wenn mir jemand helfen möchte!

Beste Grüße
4n0nym3r

Computer, Technik, HTML, programmieren, JavaScript, Technologie, Spiele und Gaming
Js loop?
 <script>
       let alarm = new Audio('alarm.mp3');
       let timerStarted = false;
       function startTimer() {
           if (!timerStarted) {
               let startTime = new Date().getTime();
               let fiveMinutes = 1000 * 60 * 5;
               let endTime = startTime + fiveMinutes;
               setInterval(function() {
                   let timeLeft = endTime - new Date().getTime();
                   if (timeLeft > 0) {
                       let minutes = timeLeft / (1000 * 60);
                       minutes = Math.floor(minutes);
                       let seconds = (timeLeft / 1000) % 60;
                       seconds = Math.round(seconds);
                       seconds = ('0' + seconds).slice(-2);
                       let text = '0' + minutes + ' : ' + seconds;
                       timer.innerHTML = text;
                   } else {
                       alarm.play();
                       timer.innerHTML = '00 : 00';
                   }
               }, 1000);
               timerStarted = true;
           }
       }
   </script>

Ich möchte diese Aktion gerne loopen (dass der timer immer neu startet nach dem Alarm) wie geht das?

Computer, HTML, programmieren, JavaScript
Javascript Cookie beim neu laden verhindern?

Hallo,

Wie kann ich verhindern, dass der Cookie beim neu Laden der Seite verhindert wird? Denn immer, wenn ich am Anfang den Namen des Besuchers abfrage, wird dieser nicht nur immer beim neuen betreten der Website gezeigt, sondern auch, wenn man die Seite neu lädt. Wie kann ich das verhindern?

Vielen Dank!

Hier mein Code:

<!DOCTYPE html>


<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body onload="checkCookie()">
        <input type = "button" onclick = "setCookie('anwender','',-1)" value = "Cookie
        l&ouml;schen">
        <h1>Website Test-Cookie</h1>
        <script>
        function setCookie(cookieName,inhalt,dauer) {
            let datum = new Date();
            datum.setTime(datum.getTime() + (dauer*24*60*60*1000));
            let ablaufdatum = "expires=" + datum.toGMTString();
            document.cookie = cookieName + "=" + inhalt + ";" + ablaufdatum;
        }


        function getCookie(cookieName) {
            cookieName += "=";   
            let decCookie = decodeURIComponent(document.cookie);          
            let arr = decCookie.split(';');
            for(let i = 0; i < arr.length; i++) {
                let inhalt = arr[i];
                while (inhalt.charAt(0) == ' ') {
                    inhalt = inhalt.substring(1);
                }
                if (inhalt.indexOf(cookieName) == 0) {
                    return inhalt.substring(cookieName.length);
                }
            }
            return "";
        }


        function checkCookie() {
            let anwender = getCookie("anwender");
            if (anwender != "") {
                alert("Hallo " + anwender + "!");
                $("h1").hide();
            }
            else {
                anwender = prompt("Geben Sie bitte Ihren Namen ein:");
                $("h1").show();
                if (anwender != "" && anwender != null) {
                    setCookie("anwender", anwender, 180);
                }
            }
        }
        </script>
    </body>
</html>


HTML, programmieren, JavaScript, Cookies

Meistgelesene Beiträge zum Thema JavaScript