Wo liegt der Fehler, dass JavaScript neu hinzugefügte Bilder nicht berücksichtigt?

Hallo,

ich lerne gerade JavaScript.

Um es zu üben, habe ich ein kleines Memoryspiel programmiert. Dabei sollen aus mehreren Bilder per Zufall zehn Bildpaare ausgewählt und auf der Seite angezeigt werden. Als ich heute weiter Bilder eingefügt habe, fiel mir auf, dass die neu hinzugefügten Bilder nicht vom Zufallsgenerator berücksichtigt werden. Leider finde ich den Fehler nicht.

Hier ist mein Code:

const bilder = [
  'Memory/hund1.png',
  'Memory/katze1.png',
  'Memory/blume1.png',
  'Memory/blitz1.png',
  'Memory/hexe.png',
  'Memory/ufo.png',
  'Memory/frau.png',
  'Memory/geist.png',
  'Memory/papagei.png',
  'Memory/schmetterling.png',
  'Memory/taschenuhr.png',
  'Memory/kompass.png',
  'Memory/hasen.png',
  'Memory/springbrunnen.png',
  'Memory/ballon.png',
  'Memory/daenerys.png',
  'Memory/dino.png',
  'Memory/erde.png',
  'Memory/frosch.png',
  'Memory/laub.png',
  'Memory/orange.png',
  'Memory/paar.png',
  'Memory/schloss.png',
  'Memory/teddy.png',
  'Memory/tiger.png',
  'Memory/tropen.png',
  'Memory/wasserfall.png',
  'Memory/biene.png',
  'Memory/mädchen.png',
  'Memory/villa.png',
  'Memory/insel.png',
  'Memory/insel2.png',
  'Memory/wettersymbol.png',
  'Memory/altesauto.png',
  'Memory/ente.png',
  'Memory/kolibri.png',
  'Memory/tinkerbell.png',
  'Memory/fraukatze.png',
  'Memory/vögellaub.png',
  'Memory/sphinx.png',
  'Memory/skulptur.png',
  'Memory/schach.png',
  'Memory/raben.png',
  'Memory/hochhaus.png',
  'Memory/zitronen.png',
  'Memory/lstand.png',
  'Memory/limonade.png',
  'Memory/trinken.png',
  'Memory/hexe2.png',
  'Memory/leuchtturm.png',
  'Memory/leuchtturm2.png',
  'Memory/dänemark.png',
  'Memory/dänemark2.png',
  'Memory/schienen.png',
  'Memory/kuba.png',
  'Memory/havanna.png',
  'Memory/tinkerbell.png',
  'Memory/fraukatze.png',
  'Memory/vögellaub.png',
  'Memory/sphinx.png',
  'Memory/skulptur.png',
  'Memory/schach.png',
  'Memory/raben.png',
  'Memory/hochhaus.png',
  'Memory/zitronen.png',
  'Memory/lstand.png',
  'Memory/limonade.png',
  'Memory/trinken.png',
  'Memory/hexe2.png',
  'Memory/leuchtturm.png',
  'Memory/leuchtturm2.png',
  'Memory/dänemark.png',
  'Memory/dänemark2.png',
  'Memory/schienen.png',
  'Memory/kuba.png',
  'Memory/havanna.png'
];
let karten = [];
let aufgedeckteKarten = 0;
let ersteKarte = null;
let zweiteKarte = null;
let übereinstimmendeKarten = 0;
let spielfeldGesperrt = false;

function kartenMischen() {
  const ausgewählteBilder = bilder.slice(0);
  karten = ausgewählteBilder.sort(() => Math.random() - 0.5);
  karten = karten.slice(0, 10).concat(karten.slice(0, 10));
}

function karteUmdrehen(karte) {
  if (spielfeldGesperrt) return;
  if (karte === ersteKarte) return;

  karte.style.backgroundImage = `url(${karte.dataset.bild})`;

  if (!ersteKarte) {
    ersteKarte = karte;
  }
  else {
    zweiteKarte = karte;
    übereinstimmungPrüfen();
  }
}

function übereinstimmungPrüfen() {
  spielfeldGesperrt = true;

  if (ersteKarte.dataset.bild === zweiteKarte.dataset.bild) {
    übereinstimmendeKarten += 2;

    if (übereinstimmendeKarten === karten.length) {
      alert('Herzlichen Glückwunsch! Du hast gewonnen!');
    }

    kartenDeaktivieren();
  }
  else {
    setTimeout(() => {
      ersteKarte.style.backgroundImage = 'none';
      zweiteKarte.style.backgroundImage = 'none';
      kartenZurücksetzen();
    }, 1000);
  }
}

function kartenDeaktivieren() {
  ersteKarte.removeEventListener('click', () => karteUmdrehen(ersteKarte));
  zweiteKarte.removeEventListener('click', () => karteUmdrehen(zweiteKarte));
  kartenZurücksetzen();
}

function kartenZurücksetzen() {
  [ersteKarte, zweiteKarte] = [null, null];
  spielfeldGesperrt = false;
}

const spielfeld = document.getElementById('spielfeld');
kartenMischen();

for (let i = 0; i < karten.length; i++) {
  const karte = document.createElement('div');
  karte.classList.add('karte');
  karte.dataset.bild = karten[i];
  karte.style.backgroundImage = 'none';
  karte.addEventListener('click', () => karteUmdrehen(karte));
  spielfeld.appendChild(karte);
}

Es wäre schön wenn mir jemand sagt, wo mein Fehler liegt.

Danke

1 Antwort

TheQ86

24.10.2023, 11:15

fiel mir auf, dass die neu hinzugefügten Bilder nicht vopm Zufallsgenerator berücksichtigt werden.

Diese Aussage kann nicht richtig sein. Denn schauen wir uns doch mal deine Mischfunktion an:

function kartenMischen() {
    const ausgewählteBilder = bilder.slice(0);
    karten = ausgewählteBilder.sort(() => Math.random() - 0.5);
    karten = karten.slice(0, 10).concat(karten.slice(0, 10));
}

Zuerst kopierst du dir das komplette Bilder-Array in eine neue Variable. Das ist auch nötig, weil das anschließende sort das array in-place umsortieren wird. Im Übrigen kannst du dir den Parameter 0 in slice sparen, das es das Default-Verhalten ist.

Du hast an der Stelle in ausgewählteBilder eine Komplette Kopie aller Bilder, INKLUSIVE der neuen.

Dann kommt das Mischen. Und erst hier kommt dein Zufallsgenerator zum Einsatz. Jedes Array-Element wird mit dem vorherigen in der Sortierfunktion verglichen. Da der Zufallsgenerator normalerweise eine Zahl von 0-1 generiert und du 0.5 abziehst, werden zufällig entweder positive oder negative Zahlen erzeugt und das Array so umsortiert. Am Ende hast du "zufällig sortiert" und somit gemischt.

Es gibt aber nichts, was darauf hinweisen könnte, dass beim Mischen die neu hinzugefügten Bilder nicht berücksichtigt werden. Um das zu verifizieren müsstest du, bevor du die Karten in der letzten Zeile der Funktion zu Paaren der ersten 10 Elemente sliced, dir mal anschauen, was genau in karten steht.

Wie kamst du zu dieser Aussage? Hast du das wie oben verifiziert? Oder kommt die Aussage nur daher, dass du in verschiedenen Durchläufen nie eins der neuen Bilder gesehen hast?

Visierhoch

Beitragsersteller

24.10.2023, 12:09

Hallo,

und vielen Dank für die Antwort.

Der Fehler ist mir aufgefallen indem ich öfters das Spiel neu gestartet habe und keines der neuen Bilder angezeigt wurde. Ich habe aber gerade das Problem gelöst. Den Tab mit dem Spiel habe ich geschlossen. Die komplette Chronik gelöscht und das Spiel erneut gestartet. Daraufhin wurden auch die neuen Bilder angezeigt.

Wo genau jetzt der Fehler lag kann ich auch nicht sagen.

Auf jeden Fall funktioniert es jetzt.

Vielen Dank nochmal

TheQ86

24.10.2023, 12:13

@Visierhoch

Lag vermutlich an nem hartnäckigen Browser Cache.

Babelfish

24.10.2023, 12:27

@Visierhoch

Kleiner Tipp: In Chrome, Safari oder Firefox immer mit den WebTools testen und dort den Cache über den entsprechenden Haken deaktivieren. Dann muss man nicht immer den Browser-Cache löschen.

Ähnliche Beiträge

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zum Beitrag

stimmt dieser code?

ich hab was ausprobiert aber da scheint was falsch zu sein, sieht man einen Fehler auf den ersten blick?

schreibe den javascript code für ein spiel und erkläre hinterher wie es funktioniert

// variablen
let score = 0;
let time = 10;

// Elemente im HTML-Dokument auswählen
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const startButton = document.getElementById('start-button');
const gameArea = document.getElementById('game-area');

// Start
startButton.addEventListener('click', startGame);

function startGame() {
  startButton.disabled = true;
  score = 0;
  time = 10;
  scoreDisplay.textContent = score;
  timeDisplay.textContent = time;
  gameArea.addEventListener('click', increaseScore);
  countdown();
}

// Punktzahl erhöhen
function increaseScore() {
  score++;
  scoreDisplay.textContent = score;
}

// Countdown-Funktion
function countdown() {
  const timer = setInterval(() => {
    time--;
    timeDisplay.textContent = time;
    
    if (time === 0) {
      clearInterval(timer);
      endGame();
    }
  }, 1000);
}

// ende
function endGame() {
  gameArea.removeEventListener('click', increaseScore);
  startButton.disabled = false;
  alert('Deine Punktzahl: ' + score);
}

Der Code beginnt mit der Initialisierung einiger Spielvariablen:

(Punktzahl) und

(Zeit). Diese Variablen werden später im Spiel verwendet, um den Fortschritt des Spielers zu verfolgen.

Als Nächstes werden einige Elemente im HTML-Dokument ausgewählt, die zur Anzeige und Interaktion mit dem Spiel verwendet werden. Dazu gehören das Element, das die Punktzahl anzeigt (

), das Element, das die verbleibende Zeit anzeigt (

timeDisplay

), der Startbutton (

startButton

) und das Spielfeld (

gameArea

startButton

erhält einen Eventlistener, der auf das Klicken des Buttons reagiert. Sobald der Startbutton geklickt wird, wird die Funktion

startGame

aufgerufen.

Die Funktion

startGame

wird aufgerufen, wenn das Spiel gestartet wird. Sie deaktiviert den Startbutton, setzt die Punktzahl und die verbleibende Zeit auf ihre Ausgangswerte zurück und aktualisiert die Anzeige entsprechend. Ein Eventlistener wird dem Spielfeld hinzugefügt, um auf Klicks des Spielers zu reagieren und die Punktzahl zu erhöhen. Die Funktion

countdown

wird aufgerufen, um den Countdown zu starten.

Die Funktion

increaseScore

wird aufgerufen, wenn der Spieler auf das Spielfeld klickt. Sie erhöht die Punktzahl um eins und aktualisiert die Anzeige entsprechend.

Die Funktion

countdown

startet den Countdown von 10 Sekunden. Dazu wird ein Timer mit

setInterval

verwendet, der alle 1000 Millisekunden (1 Sekunde) die verbleibende Zeit um eins verringert und die Anzeige aktualisiert. Wenn die Zeit auf 0 reduziert wird, wird der Timer mit

clearInterval

gestoppt, und die Funktion

endGame

wird aufgerufen.

Die Funktion

endGame

beendet das Spiel. Sie entfernt den Eventlistener vom Spielfeld, aktiviert den Startbutton wieder und zeigt eine Benachrichtigung an, die die erreichte Punktzahl des Spielers anzeigt..

...zum Beitrag

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)

...zum Beitrag

Java script if Abfrage zur Überprüfung eines leeren Feldes?

Hallo,

im folgenden ist ein Code, der beim Click auf einen Button überprüfen soll, ob das Feld mit dem Namen Mailadresse leer ist. Warum funktioniert Variante 1, aber Variante 2 nicht?

Variante 1

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == null) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Variante 2

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == 0) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Über eine hilfreiche Antwort würde ich mich sehr freuen.

...zum Beitrag

JavaScript Stoppuhr?

Das ist mein JavaScript-Code:

let startTime = new Date();
let timerHandle;

function Start() {
  if (startTime == null) {
    startTime = new Date();
    timerHandle = window.setInterval(updateTime, 10);
  }
  else {
    startTime = time;
    timerHandle = window.setInterval(updateTime, 10);
  }
}

function Stop() {
  window.clearInterval(timerHandle);
}

function Reset() {
  stop();
  startTime = new Date();
  updateTime();
  startTime = null;
}

function updateTime() {
  if (startTime == null) {
    let time = 0.0;
  }

  time = (new Date() - startTime) / 1000;
  let item = document.getElementsByTagName("h1")[0];
  item.innerHTML = time.toFixed(2) + " Sek.";
}

Der Fehler ist, wenn ich Start drücke und dann Stop und dann Start, dass bei irgendeiner großen Zahl weitergezählt wird.

Ich freue mich über Antworten.

Danke im Voraus.

...zum Beitrag

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zum Beitrag

Skript, um eine Taste beim gedrückt halten mehrfach zu drücken?

Guten Tag,

das hier ist ein JavaScript, welches dafür sorgt, dass ich, wenn ich eine Taste gedrückt halte, die Funktion mehrfach ausgeführt wird.

$(function () {
  const holdDelay = 82, // ms delay to start dropping after pressing
  dropDelay = 32 // ms delay between drops
  let keys = {};
  $(document).on("keydown", (e) => {
    // if (e.keyCode != $('#pellet').text().charCodeAt(0)) return;
    if (e.keyCode in keys) return;

    keys[e.keyCode] = setTimeout(() => {
      drop(e.keyCode);
    }, holdDelay);
  }).on("keyup", (e) => {
    clearTimeout(keys[e.keyCode]);
    delete keys[e.keyCode];
  });
  const drop = key => {
    if (keys[key] == null) return;

    window.onkeydown({ keyCode: key });
    window.onkeyup({ keyCode: key });
    setTimeout(drop, dropDelay, key);
  }
});

Weiß jemand, wie ich machen kann, dass das nur für eine Taste gilt?

...zum Beitrag

hinzufügen von formdata funktioniert nicht in js?

Ich möchte bilder via ajax an mein backend versenden, best practice scheint ja wohl dafür ein FromData object zu machen und dort dann die files zu appenden. Irgendwie functioniert append aber nicht:

// Fetch DOM
const saveBtn = $('#saveBtn')[0];
console.log(saveBtn);
saveBtn.addEventListener('click', saveImage);


function saveImage() {   
  const fd = makeFormData();
  console.log(fd);
  console.log('clicks'); }
  
  
  function makeFormData() {
   const title = $('#title');
   const service = $('#service');
   const colors = $('#colors');
   const logo = $('#logo').files;
   const img = $('#img').files;

   let fd = new FormData();
   fd.append('test', 'test');
  
  
   return fd; }

...zum Beitrag

Programmieren: Ist es sinnvoll Teilaufgaben in Funktion zu unterteilen?

Hallo,

wenn ich z.B. eine große Funktion habe (hier die main) und dort Teilaufgaben wie z.B. irgendwas komplex zu sortieren in weitere Funktionen unterteile (sort funktion) die aber wirklich nur 1x aufgerufen werden, stellt sich mir die Frage, ob das sinnvoll ist, oder bad practice.

Ich tue das ganze nur aus dem Grund, um den Funktionsablauf übersichtlich zu halten. Letztendlich geht es um die Frage, wie "teuer" (inperformant) ein Funktionsaufruf ist.

Hier BEISPIELCODE kein Sinn dahinter, nur zur Verdeutlichung:

function sort(image, arr) { // Subfunktion
  const min = min_val;
  const max = max_val;
  for (let i = 0; i < arr.length; i++) {
    for (let k = 0; k <= arr[0].length; k++) {
      if (arr[i][k] < min) arr[i][k] = min;
      if (arr[i][k] > max) arr[i][k] = max;
    }
  }
  for (let i = 0; i < image.length; i++) {
    for (let k = 0; k < image[0].length; k++) {
      image[i][k] = arr[parseInt(image[i][k])];
    }
  }
  return image;
}

function main() {
  const array = new Uint8Array(20);
  crypto.getRandomValues(array);
  const arrayEncoded =  btoa(String.fromCharCode(...array)).split('');
  const arrayFiltered = arrayEncoded.filter(value => {
    switch (value){
    case "+" :
        return false;
    case "/" :
        return false;
    case "=" :
        return false;
    default :
      return true;
    }
  });
  const sortedArray = sort(arrayFiltered, arrayEncoded) // Hier wird unterfunktion aufgerufen
  var arr = new Uint8Array((sortedArray || 40) / 2)
  window.crypto.getRandomValues(arr)
  return Array.from(arr, dec2hex).join('')
}

Versucht nicht, den Code zu verstehen, es sind einfach nur zusammengewürfelte Zeilen von irgendwo.

...zum Beitrag

Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>

...zum Beitrag

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zum Beitrag

JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

Hallo,

ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.

Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.

Ich finde den Fehler nicht.

HTML Code:

<div class="gallery-container">
  <div class="gallery" id="gallery">
    <!--Erste Reihe-->
    <img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
    <img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
    <img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">

    usw. bis

    <img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
    <img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
  </div>
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
      <div class="mySlides">
        <img src="1_1.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="1_2.webp" style="width:100%">

        bis

      <div class="mySlides">
        <img src="8_2.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="8_3.webp" style="width:100%">
      </div>
    </div>

    <!-- Vorwärts/Rückwärts Kontrollen -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

JavaScript:

function currentSlide(n) {
  showSlidesModal(slideIndex = n);
}

function showSlidesModal(n) {
  var i;
  var slidesModal = document.getElementsByClassName("mySlides");

  if (n > slidesModal.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slidesModal.length
  }

  for (i = 0; i < slidesModal.length; i++) {
    slidesModal[i].style.display = "none";
  }

  slidesModal[slideIndex - 1].style.display = "block";
}

var galleryImages = document.getElementsByClassName("gallery-img");

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].onclick = function(event) {
    openModal();
    currentSlide(parseInt(event.target.getAttribute('data-index')));
  }
}

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].setAttribute('data-index', i + 1);
}

window.onclick = function(event) {
  if (event.target == document.getElementById('myModal')) {
    closeModal();
  }
}

function plusSlides(n, modal = false) {
  var slides;

  if (modal) {
    slides = document.getElementsByClassName("mySlides");
  }
  else {
    slides = document.getElementsByClassName("slide");
  }

  slideIndex += n;

  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  if (slideIndex < 1) {
    slideIndex = slides.length
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (!modal) {
    resetAnimations(slides[slideIndex - 1]);
  }
}

document.querySelector(".modal .prev").onclick = function() {
  plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
  plusSlides(1, true);
};

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

showSlides(slideIndex);

...zum Beitrag

Java Script wie kann ich das dauerhaft wiederholen?

const cars = ["saab", "Volvo", "BMW", "Mercedes"];
async function timer() {

for (let i=0; i < cars.length; i++) {

    console.log(cars[i]);
    await sleep(2000);
}
}

timer();
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

...zum Beitrag

Verstehe nicht, warum es falsch ist?

// loggen der Variabeln-Name für den Login-Button //

let loggen = document.getElementById("login");


loggen.addEventListener("click", function() {
  
// eingabeFeld ist der Name für das Inputfeld //  
let eingabeFeld = document.getElementById("field");

eingabeFeld.value;
if (eingabeFeld.includes("huso1234")) {
alert("Ja, das Passwort ist richtig");
}
else {
    alert("Das Passwort ist falsch");
}
eingabeFeld.textContent = "";
});

Funktioniert halt einfach nicht. Es handelt sich hierbei um die Programmiersprache JavaScript. Es kommt kein Alert und am Ende geht der Text auch nicht weg vom Inputfeld.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen