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++;

        });

    });

}

JavaScript 2 forEach Schleifen?
Computer, HTML, Programmieren, JavaScript, JQuery, Spiele und Gaming
UL container geht nicht zurück?

Hey Leute,

ich habe hier ein nav-bar. Es um 100% nachrechts verschoben und wenn man auf den Burger-icon clickt sollte der ul- container wider zurück an also transform: translateX(0);.

Dafür habe ich eine Klasse active erstellt. (siehe unten).

Da Problem ist, dass es nicht zurück geht selbst wenn der icon gedrückt wird. wieso?

<!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">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/menu.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <nav class="nav-menu-container">
            <div class="logo-container">
                <img src="./img/logo.png" alt="" class="logo">
            </div>
            <div class="burger-icon-container">
                <img src="./img/burger-icon.svg" alt="" class="burger-icon">
                <!-- <img src="./img/burger-icon-cross.svg" alt="" class="cross"> -->
            </div> 
            <ul class="menu-item-container">
                <li class="menu-item"><a href="#" class="menu-link">Home</a></li>
                <li class="menu-item"><a href="#" class="menu-link">About</a></li>
                <li class="menu-item"><a href="#" class="menu-link">Location</a></li>
                <li class="menu-item"><a href="#" class="menu-link">Contact</a></li>
            </ul>
        </nav>
    </div>
    <script src="./script/menubar.js"></script>
</body>
</html>
let menu_item_container = document.querySelector(".menu-item-container");
let burger_icon = document.querySelector(".burger-icon");
let burger_cross = document.querySelector(".cross");
let nav = document.getElementsByClassName("nav-menu-container");

burger_icon.addEventListener("click", () => {
    menu_item_container.classList.toggle("active")
    console.log("pressed")
});

Ein Teil der CSS-Formatierunghabe ich gelöscht, weil zu viele Zeichen.
.wrapper .nav-menu-container .burger-icon-container {
    position: absolute;
    left: 20rem;
    top: 0.6rem;
}
.wrapper .nav-menu-container .burger-icon-container .cross {
    position: absolute;
    left: 0rem;
    display: none;
}
.wrapper .nav-menu-container .menu-item-container {
    background-color: #1A1D28;
    padding: 30px 0;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 5px;
    transform: translateX(100%);
    transition: all 0.3s linear;
}
.wrapper .nav-menu-container .menu-item-container .menu-item {
    list-style: none;
    padding-bottom: 1.3rem;
}

.wrapper .nav-menu-container .menu-item-container .menu-item .menu-link {
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 550;
}


.active {
    transform: translateX(0);
}

Danke im Voraus:)

UL container geht nicht zurück?
Website, HTML, CSS, JavaScript, Informatik, Webdesign, Webentwicklung
HTML | JavaScript | JS | Problem?

Hallo ich möchte 3 Uploadbars für Files auf meiner Seite einfügen.

Mit einer geht es auch, doch wenn ich den Code kopiere und die Var anpasse geht keine mehr. (Die Bar soll nicht den echten Status anzeigen, sondern immer gleich aussehen, wie im Code zusehen ist). Danke.

Script:

<script>
function _(el) {return document.getElementById(el);}function uploadFile() {var file = _("Datei").files[0];var formdata = new FormData();formdata.append("Datei", file);var ajax = new XMLHttpRequest();ajax.upload.addEventListener("progress", progressHandler, false);ajax.addEventListener("error", errorHandler, false);ajax.open("POST", "file_upload_parser.php");ajax.send(formdata);}function progressHandler(event) {_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;var percent = (event.loaded / event.total) * 100;}function errorHandler(event) {setTimeout(() =>  _("progressBar").value = Math.round("22"), 100);setTimeout(() =>  _("progressBar").value = Math.round("100"), 800);}
</script>

HTML:

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>

Code Bar2:
HTML:

 <progress id="progressBar2" value="0" max="100" style="width:300px;"></progress>

Script:

<script>
function _(el) {return document.getElementById(el);}function uploadFile() {var file = _("Datei2").files[0];var formdata2 = new FormData();formdata2.append("Datei2", file);var ajax = new XMLHttpRequest();ajax.upload.addEventListener("progress2", progressHandler, false);ajax.addEventListener("error", errorHandler, false);ajax.open("POST", "file_upload_parser.php");ajax.send(formdata);}function progressHandler(event) {_("loaded_n_total_2").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;var percent = (event.loaded / event.total) * 100;}function errorHandler(event) {setTimeout(() =>  _("progressBar2").value = Math.round("22"), 100);setTimeout(() =>  _("progressBar2").value = Math.round("100"), 800);}
</script>
Computer, HTML, Webseite, Programmieren, JavaScript, JS
Warum kommt dieser Fehler?

Hi, kann mir jemand sagen, warum dieser Fehler kommt. Ich find keine Lösung dafür.

der Code von index.ts:

require('dotenv').config();
import express, { Request, Response } from 'express';
import axios from 'axios';
import url from 'url';


const PORT = process.env.PORT || 3001;


const app = express();


app.get('/api/auth/discord/redirect', async (req: Request, res: Response) => {
    const { code } = req.query;
    if (code) {
        try {
            const formData = new url.URLSearchParams({
                client_id: '893524993781137459',
                client_secret: 'CKoM0Pq2VYL18bNz78Obo2SI4cr54hG4',
                grant_type: 'authorization_code',
                code: code.toString(),
                redirect_uri: 'http://localhost:3001/api/auth/discord/redirect',
            });
            const response = await axios.post(
                'https://discord.com/api/v8/oauth2/token',
                formData.toString(),
                {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                }
            );
            
            const { access_token } = response.data;            
            res.send(response.data);
        } catch (err) {
            console.log(err);
            res.sendStatus(400);
        }
    }
});


app.listen(PORT, () => console.log(`Running on Port ${PORT}`));

Folgender Fehler erscheint in der Konsole, nach ausführend des Kommands:

yarn start:dev

Der Fehler:

C:\Users\Dominik\AppData\Roaming\npm\node_modules\ts-node\src\index.ts:692
    return new TSError(diagnosticText, diagnosticCodes);
           ^
TSError: ⨯ Unable to compile TypeScript:
src/index.ts:31:21 - error TS2339: Property 'access_token' does not exist on type 'String'.
31             const { access_token } = response.data;

Jemand ne Idee warum? :)

Paar Randdaten:

das Ganze soll ein Discord Anmeldesystem per OAuth2 werden...

Tutorial dazu: https://www.youtube.com/watch?v=RP0P_zGdvj8

Internet, Website, HTML, JavaScript, node.js, TypeScript, discord
Javascript: Variable in verschachtelter Function ausgeben?

Hallo Leute,

hier kommt eine Noob Frage, leider bin ich viel zu müde, als dass ich noch einen klaren Kopf haben könnte, deshalb stelle ich die Frage auch nicht auf Stackoverflow, da man mich dort sofort kreuzigen würde.

Es geht um Folgendes: Ich habe mir eine API (zumindest so was in der Art) geschrieben und versuche nun mit JS die Werte, die ich bekomme auszugeben. Das funktioniert leider nicht so ganz, da die Function verschachtelt ist und deshalb nur "undefined" ausgibt.

Hier mal der Code:

function apicall(request,id){
		$.get( "php/rlapi.php?query="+request+"&id="+id, function( data ) { 
			return(data);
		});
	};

Wenn ich die Funktion nun über apicall("test","1") Aufrufe, gibt er mir wie gesagt nur "undefined" aus. Das liegt zum einen daran, dass ich in der Hauptfunktion gar kein Return habe, das weiß ich - Allerdings bin ich gerade so übermüdet, dass es mir nicht einfallen will, wie ich die Variable data ausgeben kann.

Wenn ich das "return(data)" mit "console.log(data)" oder einem Alert ersetze (also innerhalb der verschachtelten Funktion), gibt er alles perfekt aus, die Konsole loggt das richtige Ergebnis etc. Allerdings komme ich wie gesagt nicht mit einem Call der Funktion an die Werte ran und das macht mich verrückt.

Ich möchte also, dass wenn ich von irgendwo im Dokument

console.log(apicall("test","1"));

eingebe, das auch ordentlich in der Konsole geloggt wird. Aktuell kommt wie gesagt nur undefined raus.

Ich weiß, es ist wahrscheinlich eine Sache von <1 Minute, aber ich will gerade einfach nicht drauf kommen.

Vielen Dank schon mal!

Computer, Website, HTML, Programmieren, JavaScript, JS, Coding, Webdesign
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!

Website, HTML, JavaScript, JS, node.js, discord
Warum funktioniert das nicht?

Hi, auf einer Website soll es die Möglichkeit geben, sich per Discord anzumelden. Dafür habe ich auch schon eine Anleitung unter: https://discordjs.guide/oauth2/#a-quick-example gefunden. Leider ist die Anleitung dort ziemlich knapp gehalten und für mich auch etwas über dem was ich zum jetzigen Zeitpunkt kann. Leider ist mein Code zu lang um ihn hier hochzuladen, daher mache ich das über jsfiddle:

https://jsfiddle.net/Atrapfare/4bvt0fwd/

in die css section habe ich einfach die datei config.json gepackt :)

In meinen Website Einstellungen kann ich unter NodeJS die "Startdatei" auswählen. Dabei habe ich mal index.js ausgewählt. weiß net ob das richtig war :).

Ihr seht, bei dem Thema bin ich echt noch Einsteiger, von daher :D

So, jetzt mein Problem: Wenn ich den Link drücke um mich mit Discord anzumelden, werde ich auch an Discord weitergeleitet. Wenn ich dann auf autorisieren drücke, werde ich auch wieder auf die Seite weitergeleitet, welche ich bei der Discord Application als Redirect angegeben habe. Nur lädt die Seite dann halt einfach und nach kurzer Zeit kommt: Die Verbindung wurde abgelehnt. Komisch ist halt, dass ich mir das Repo von Discord selber zum Thema OAuth2 angeschaut und als Vorlage verwendet habe. Ich habe eigentlich nur die Daten geändert wie die client id und den secret code... und den link für die weiterleitung zu discord. warum also funktioniert das ganze nicht? was mach ich falsch?

Hier noch die Einstellungen in meiner Application:

Und noch eine Frage am Rande:

wie ist es nun möglich, Daten des Nutzers anzeigen zu lassen, also den Namen oder die Email adresse?

Vielen Dank für jede Antwort!

Warum funktioniert das nicht?
PC, Computer, Internet, Website, Technik, HTML, Webseite, JavaScript, JS, Technologie, discord
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

Meistgelesene Fragen zum Thema JavaScript