Warum wird meine Seite nicht aktualisiert?

Hallo,

ich wollte machen, dass, wenn ich in Python etwas sage, ein Div im HTML eingefügt wird. Das funktioniert auch ganz gut, aber, da ich kein Websockets verwende, muss ich die Seite immer manuell aktualisieren, wenn der Div eingefügt wurde, damit es ihn auch anzeigt. Diese Funktion wollte ich automatisieren, doch es funktioniert nicht, wieso?

// FLASK
function detectWakeWord() {
    var detectedWord = 'luna'; 
    
    if (detectedWord === 'luna') {
        if (!document.getElementById('luna_wake_word')) {
            var div = document.createElement('div');
            div.id = 'luna_wake_word';
            document.body.appendChild(div);
            showWakeWord();
            
            setTimeout(function() { 
                location.reload(); 
            }, 1000); 
        }
    }
}

detectWakeWord();

Freundliche Grüsse

1 Antwort

MonkeyKing

09.04.2024, 13:32

Hmm also zunächst einmal ist

if (detectedWord === 'luna') {

unnötig denn die Bedingung ist immer wahr.

Abgesehen davon verstehe ich nicht den Sinn davon die Seite neu zu laden nachdem du ein div hinzugefügt hast.

Ist die Funktion

detectWakeWord();

überhaupt definiert?

Mehr kann man wissen wenn man den output der console sieht.

marcus09421

Fragesteller

09.04.2024, 13:41

Der Div wird halt nur angezeigt, wenn ich die Seite aktualisiere und das wollte ich automatisieren. Und ja died Funktion detect_wake_word() ist definiert:  def detect_wake_word():
    recognizer = sr.Recognizer()
    mic = sr.Microphone(device_index=0)  # Hier den Index des Mikrofons angeben

    while True:
        start_time = time.time()  # Startzeit für Timeout-Messung
        while True:
            elapsed_time = time.time() - start_time
            if elapsed_time >= 2:
                break  # Beendet die Schleife, wenn 1 Sekunde vergangen ist
            with mic as source:
                try:
                    print("Warte auf das Wake-Word...")
                    audio = recognizer.listen(source, timeout=2)  # Timeout von 1 Sekunde
                    text = recognizer.recognize_google(audio)
                    print(text)  # Hier wird der erkannte Text angezeigt
                    # Überprüfung auf das Wake-Word
                    if "luna" in text.lower() or "lund" in text.lower():
                        print("Wake-Word erkannt:", text)
                        # Öffnen der HTML-Datei im Lese-Modus
                        with open("output.html", "r") as html_file:
                            html_content = html_file.read()
                        # Hinzufügen des Div-Elements mit geändertem Display-Attribut zum HTML-Inhalt
                        html_content += '<div id="luna_wake_word" style="display: block; height: 100%; width: 100%; position: absolute; background-color: green; z-index: 300;"></div>'
                        # Schreiben des aktualisierten HTML-Inhalts zurück in die Datei
                        with open("output.html", "w") as html_file:
                            html_file.write(html_content)
                        return True
                except sr.WaitTimeoutError:
                    pass  # Timeout, Wort nicht erkannt, weiter zur nächsten Iteration
                except sr.UnknownValueError:
                    pass  # Unverständliche Eingabe, weiter zur nächsten Iteration
                except sr.RequestError:
                    print("Spracherkennung fehlgeschlagen. Bitte überprüfen Sie Ihre Internetverbindung.")
            time.sleep(1)  # Verhindert, dass die Schleife zu schnell läuft
        # Wake-Word wurde erkannt, daher die Schleife verlassen
        if detect_wake_word():
            return True
    return False

MonkeyKing

09.04.2024, 13:44

@marcus09421

Du mischt Javascript mit Python. Du führst detectWakeWord(); aus, es gibt aber nur eine Python Funktion namens detect_wake_word(). So funktioniert das nicht.

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed:

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

...zur Frage

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

js else?

ich habe auf einer website ein onclick event löse diese funktion aus es sollen zufällige antworten kommen es kommt aber immer nur die erste also die aus dem if block

function testbo(){
    var min = 1;
var max = 2;
var x = (Math.random() * (max - min)) + min;
    if (x > 1,5){
        alert("Warum hast du geklickt?");
    } else if (x < 1,5){
        alert("Du hast geklickt...");
    } 


}

Danke Schonmal im voraus!

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zur Frage

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zur Frage

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

Wie update ich den HTML Text?

Ich bin in der Programmier AG meiner Schule und soll es jetzt so machen, dass der Fehler Text sobald ich einen Fehler mache geupdated wird und die Anzahl der Fehler aktuell ist. Gerade aktualisiert es nur wenn ich etwas richtiges eingebe.

Der Code lautet wie folgt:

<html>
<head>
<meta charset="utf-8">
<title>Kopfrechnen-Quiz</title>
<script>
var richtigeAntwort;
var aktuelleNummer = 1;
var Anzahlfalsch = 0;
function wennGeladen() {
stelleAufgabe();
aktuelleNummer = 1;
//alert(Math.floor( Math.random() * 100 ));
Anzahlfalsch = 0;
}
function pruefeAntwort() {
event.preventDefault();
if (document.getElementById("antwort").value == richtigeAntwort) { 
alert("Richtig!");
aktuelleNummer++;
stelleAufgabe();
}
else {
alert ("Leider falsch. Bitte nochmal versuchen");
refresh ("falsch")
Anzahlfalsch++;
}
}
function stelleAufgabe() {
var zahl1 = Math.floor(Math.random()*100);
var zahl2 = Math.floor(Math.random()*100);
richtigeAntwort = zahl1 + zahl2;
document.getElementById("falsch").innerHTML = "Anzahl der Fehler: " + Anzahlfalsch;
document.getElementById("nummer").innerHTML = "Aufgabe Nummer: " + aktuelleNummer;
document.getElementById("aufgabe").innerHTML = zahl1 + "+" + zahl2 + ":";
}
</script>
</head>
<body onload="wennGeladen()">
<h1>Kopfrechnen-Quiz</h1>
<h2 id="nummer"></h2>
<h3 id="falsch"></h3>
Bitte berechne: <span id="aufgabe"></span>
<form onSubmit="pruefeAntwort()">
<input id="antwort">
</form>
</body>
</html>

es wäre nett, wenn mir jemand helfen könnte.

...zur Frage

HTML window.location.href geht nicht?

https://streamable.com/9pfpva

Ich weiss nicht genau wo hier der Fehler ist aber er leitet nicht beim richitgen namen und passwort weiter? Weiß jemand woran das liegt? Ich bin relativ am anfang mit html.

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function login() {
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;


                if (username === 'test123' && password === 'test') {
                    window.location.href = 'http://www.google.com';
                } else {
                    alert('Ungültiger Benutzername oder falsches Passwort.'); // Fehlermeldung bei ungültigen Daten
                }
                return false;
            }


            var loginButton = document.getElementById('loginButton');
            loginButton.addEventListener('click', login);
        });
    </script>

...zur Frage

XHR nutzt GET anstatt POST?

Mit folgendem code versuche ich zweck logins auf meinen Server zuzugreifen

var r = new XMLHttpRequest();

r.open("POST", "/user/login", true);
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

r.onreadystatechange = function () {

    if (r.readyState != 4 || r.status != 200) return;

    console.log(r.responseText);
            
    if (r.responseText == '?incorrect') {

        console.log('wrong password');

    }
    else if (r.responseText == 'correct') window.location.replace('/user/');

};

r.send('pwd=' + document.querySelector('#pwd-input').value);

Wenn ich den Code ausführe, steht in der Console der Seitenquelltext als Ergebnis. Der Server (Express) registriert eine GET request und auch im Netzwerktab von Chrome wird die request Methode mit GET angegeben. Hat jemand eine Idee warum und was ich versuchen könnte, außer Alternativen zur XHR zu nutzen?

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

Pinball-Game / JavaScript: Wie kann ich die Kollisionserkennung implementieren?

Hallo zusammen,

ich muss für die Uni ein kleines Single Page 2D-Spiel entwickeln. Die Backend REST-API mit Python, das Frontend mit HTML/CSS, die Logik mit JavaScript. Die Animationen sollen wir selbst entwickeln und nicht z.B. von canvas-Objekten übernehmen.

Ich versuche zurzeit ein Pinball-Spiel (Flipper-Automaten) und habe das Grundgerüst mit CSS gebaut. Nur habe ich mir die Kollisionserkennung deutlich leichter vorgestellt, als sie wahrscheinlich ist.

So sieht das Spielfeld momentan aus:

Die JavaScript-Logik sodass der Ball im Spielfeld bleibt, ist ja recht simpel:

  var ball = document.getElementById('ball');
  var playArea = document.getElementById('play-area');
  var ballRadius = 10;
  var playAreaWidth = playArea.offsetWidth; // 600
  var playAreaHeight = playArea.offsetHeight; // 820
  var ballX = playAreaWidth / 2; // Startposition des Balls in der Mitte des Spielfelds
  var ballY = playAreaHeight / 2; // X = 300, Y = 410
  var ballSpeedX = 3; // Geschwindigkeit des Balls in horizontaler Richtung
  var ballSpeedY = 3; // Geschwindigkeit des Balls in vertikaler Richtung
  
  function updateBallPosition() {
    // Aktualisiere die Position des Balls basierend auf der aktuellen Geschwindigkeit
    ballX += ballSpeedX;
    ballY += ballSpeedY;
  
    if (ballX + ballRadius > playAreaWidth || ballX - ballRadius < 0) {
      ballSpeedX *= -1; // Richtungswechsel in der horizontalen Richtung
    }
  
    if (ballY + ballRadius > playAreaHeight || ballY - ballRadius < 0) {
      ballSpeedY *= -1; // Richtungswechsel in der vertikalen Richtung
    }
  
    // Setze die neue Position des Balls
    ball.style.left = ballX + 'px';
    ball.style.top = ballY + 'px';
  }
  
  // Aktualisiere die Position des Balls alle 16 Millisekunden (ca. 60 Frames pro Sekunde)
  setInterval(updateBallPosition, 16);
}

Aber wie man es implementiert, sodass der Ball von den Hindernissen und Banden richtig abprallt, sodass ein Richtungswechsel entsteht, habe ich noch nicht wirklich verstanden. Hätte da jemand eine Idee oder Erfahrung, wie man hier an die Kollisionserkennung herangehen könnte?

LG und 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