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

Fragesteller

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 Fragen

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));
}

...zur Frage

Wo soll ich meine elemente in dem Javascript einfügen?

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

Kann mir jemand bei der Funktion in JavaScript helfen?

// init

let count = 0;

// counter element

const counter = document.getElementById("value");

// increment function

function incrementCounter() {

count = Number(localStorage.getItem("count"));

counter.innerText = count;

localStorage.setItem("count", count + 1);

}

// event listener

window.onload = incrementCounter;

let zurücksetzen = document.getElementById("resetbutton");

function aufnull (){

zurücksetzen = localStorage.setItem("count", 0)

count = Number(localStorage.getItem("count"));

zurücksetzen.addEventListener("click", aufnull);

incrementCounter();

};

zurücksetzen.addEventListener("click", aufnull);

ZUR FRAGE: Ich baue einen Besucherzähler und möchte, dass sich der Wer wieder auf 0 zurücksetzt, wenn man auf den Button Reset drückt. Leider setzt es sich erst zurück, wenn man reset drückt und die seite anschließend wieder aktualisiert.
Kann mir jemand helfen und es erklären?

...zur Frage

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.

...zur Frage

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?

...zur Frage

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..

...zur Frage

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

...zur Frage

javascript const in html ausgeben?

Hallo,

untenstehender Code wartet auf ein clickevent in meiner Tabelle und speichert dann die value des geklickten buttons in const dialogId. Das ganze möchte ich dann gerne in html ausgeben. Kann mir jemand helfen?

    const table = document.querySelector('#meineTabelle');
    table.addEventListener('click', event => {
      if (event.target.matches('.dialog-open')) {
        const dialogId = "Hello there";
        dialogOeffnen(dialogId);
      }
    });

...zur Frage

JS ARRAYS + RECHNEN?

Also ich habe ein Programm wo man per Knopfdruck über einen Prompt etwas schreiben kann und das steht dann im Array, aber es soll so sein das wenn man auf einen anderen Button drückt ein Allert kommt in dem steht wie viel alles zusammen ist also ich möchte es + rechnen.

Falls es hilfreich ist hier mein Code:

<html>

<head>

</head>

<body>

<h1>Stromverbrauch</h1>

<button onclick="addNewItem(); updateList();">Neuen Verbrauch hinzufügen</button>

</ul>

let shoppingItems = getShoppingItemsFromLocalStorage();

updateList();

function getShoppingItemsFromLocalStorage() {

let items = localStorage.getItem('shoppingItems');

if (items == null || items == '') {

items = [];

} else {

items = items.split(',');

}

return items;

}

function addNewItem() {

let item = prompt('Welchen Verbrauch hast du?');

if (item != null) {

shoppingItems.push(item);

localStorage.setItem('shoppingItems', shoppingItems);

}

function removeItem(itemIndex) {

shoppingItems.splice(itemIndex, 1);

localStorage.setItem('shoppingItems', shoppingItems);

}

function updateList() {

document.getElementById('list').innerHTML = '';

for (let index = 0; index < shoppingItems.length; index += 1) {

document.getElementById('list').innerHTML += '<li>' + shoppingItems[index] +

' <button onclick="removeItem(' + index + '); updateList();">X</button></li>';

}

</script>

</body>

</html>

...zur Frage

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)

...zur Frage

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.

...zur Frage

Discordbot mach nicht, was er soll?

Halli hallo, ich bin gerade dabei, einen erstmal einfachen Discordbot mit JavaScript zu programmieren und wenn ich das Skript mit node.js starte, funktioniert es auch immer, der Bot kommt online und es wird Ready ausgegeben, allerdings reagiert er nicht auf meine Nachrichten, wie er soll. Er macht einfach garnichts. Das hier ist das Skript, was jemand, was ich tun muss, damit es klappt?:

const {Client, GatewayIntentBits }= require('discord.js');
const bot = new Client(
    {
        intents: [
            GatewayIntentBits.GuildMessages
        ]
    }
);

const TOKEN = '<mein-Token>';

bot.on('messageCreate', function(message){
    console.log("message");
    if (message.author.bot){
        return;
    }
    else if(message.content.includes("Hello")){
        message.reply('Hello, how are you?');
    }
});

bot.on('ready', function(){
    console.log("Ready");
})

bot.login(TOKEN);

...zur Frage

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.

...zur Frage

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.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen