Code funktioniert leider nicht?

Hallo!

Mein Code bekommt immer wieder eine Fehlermeldung, oder er funktioniert einfach nicht.

function showPasswordModal(route, userName) {
console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
$('#passwordModal').modal('show');
$('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
$('#passwordForm').data('userName', userName);
}
function validatePassword() {
console.log('validatePassword() wurde aufgerufen');
var enteredPassword = document.getElementById('passwordInput').value;
var userName = $('#passwordForm').data('userName');
var form = document.createElement('form');
form.method = 'POST';
form.action = "{{ route('admin.validatePassword', ['userName' => ':userName']) }}".replace(':userName', userName);
var csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = '_token';
csrfInput.value = '{{ csrf_token() }}';
form.appendChild(csrfInput);
var passwordInput = document.createElement('input');
passwordInput.type = 'hidden';
passwordInput.name = 'password';
passwordInput.value = enteredPassword;
form.appendChild(passwordInput);
document.body.appendChild(form);
form.submit();

wenn auf den pay-button gedrückt wird, erscheint ein passwortfeld indem ein benutzerdefiniertes Passwort eingegeben werden soll. Diese Passwörter sind in einer Tabelle gespeichert. überprüft wird in diesen zwei methoden doch debuggen funktioniert irgendwie nicht und die variablen sind normalerweise richtig befüllt.? Weiß vllt irgendwer eine Lösung????? Danke im Vorraus.

Glandorf

09.07.2024, 08:59

Und die Fehlermeldung ist…?

Nadine0006

Beitragsersteller

09.07.2024, 09:02

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpExceptionThe POST method is not supported for route validate-password/nadine. Supported methods: GET, HEAD.

Tschuldigung

1 Antwort

Sören Stabenow

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Softwareentwickler / IT-Prozessmanager

09.07.2024, 09:41

Klingt so als hättest du nur eine GET Route in der Config definiert, rufst die Route aber mit POST auf.

Wenn du Laravel benutzt, wovon ich ausgehe anhand des Fehlers, musst du in der Routes/web.php entsprechend eine Route mit Route::post() definieren.

Woher ich das weiß:Studium / Ausbildung – Fachinformatiker /Anwendungsentwicklung

Nadine0006

Beitragsersteller

09.07.2024, 11:20

Danke für den Hinweis, das habe ich jedoch schon getan.

Route::get('/validate-password/{userName}', [AdminController::class, 'validatePassword'])->name('admin.validatePassword');

Sören Stabenow

09.07.2024, 11:22

@Nadine0006

Das ist, wie gesagt, nur GET, kein POST.

Du musst hier eine Route für POST definieren. Route::post() wäre die Methode die du brauchst.

Nadine0006

Beitragsersteller

09.07.2024, 11:23

@Sören Stabenow

Ohh danke danke danke, jetzt kommt keine Fehlermeldung mehr!!!!

Ähnliche Beiträge

PHP/Passwortvergleich: Warum kommt immer wieder eine Fehlermeldung?

Hallo!

Ich will ein Passwort, das eingegeben wird, vergleichen. Doch es kommt immer wieder diese Fehlermeldung:

Eingegebenes Passwort: n1234
admin:238 Benutzername: nadine
admin:242 Uncaught ReferenceError: form is not defined
  at validatePassword (admin:242:18)
  at HTMLButtonElement.onclick (admin:161:100)

Der Code im AdminController sieht so aus:

public function validatePassword(Request $request, $userName) {
  try {
    $password = $request->input('password');

    // Benutzer anhand des Benutzernamens finden
    $user = User::where('username', $userName)->first();

    // Debugging-Informationen in das Log schreiben
    \Log::info('Benutzername: ' . $userName);
    \Log::info('Benutzer gefunden: ' . ($user ? 'Ja' : 'Nein'));

    if (!$user) {
      return response()->json(['valid' => false, 'message' => 'Benutzer nicht gefunden']);
    }

    // Überprüfen, ob das gespeicherte Passwort im Bcrypt-Format ist
    $passwordInfo = password_get_info($user->password);
    \Log::info('Passwort-Algorithmus: ' . $passwordInfo['algoName']);

    if ($passwordInfo['algoName'] !== 'bcrypt') {
      return response()->json(['valid' => false, 'message' => 'Das gespeicherte Passwort verwendet nicht den Bcrypt-Algorithmus.']);
    }

    // Passwortüberprüfung
    $passwordCheck = Hash::check($password, $user->password);
    \Log::info('Passwort korrekt: ' . ($passwordCheck ? 'Ja' : 'Nein'));

    if ($passwordCheck) {
      return response()->json(['valid' => true]);
    }
    else {
      return response()->json(['valid' => false, 'message' => 'Ungültiges Passwort']);
    }
  }
  catch (\Exception $e) {
    \Log::error('Fehler bei der Passwortvalidierung: ' . $e->getMessage());
    return response()->json(['valid' => false, 'message' => 'Serverfehler. Bitte versuchen Sie es später erneut.'], 500);
  }
}

Und im admin blade so:

function showPasswordModal(route, userName) {
  console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
  $('#passwordModal').modal('show');
  $('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
  $('#passwordForm').data('userName', userName);
  console.log(userName);
}

function validatePassword() {
  console.log('validatePassword() wurde aufgerufen');
  var enteredPassword = document.getElementById('passwordInput').value;
  var userName = $('#passwordForm').data('userName');
  console.log('Eingegebenes Passwort:', enteredPassword);
  console.log('Benutzername:', userName);

  $.ajax({
    type: 'POST',
    url: form.action,//$('#passwordForm').attr('action'), // Stellen Sie sicher, dass dies die richtige Route ist
    data: {
      '_token': '{{ csrf_token() }}',
      'password': enteredPassword
    },
    success: function(response) {
      console.log('Server-Antwort:', response);

      if (response.valid) {
        $('#payForm').submit();
      }
      else {
        alert(response.message || 'Falsches Passwort! Bitte versuche es erneut.');
      }
    },
    error: function(xhr, status, error) {
      console.error('AJAX-Fehler:', error);
      alert('Fehler beim Validieren des Passworts. Bitte versuche es später erneut.');
    }
  });

Warum kommt immer wieder eine Fehlermeldung? Ich habe schon alles probiert und das schon seit Stunden! Danke.

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

Javascript setTimeout Wiederholungen?

Schaut mal bitte folgendes Beispiel

var update=0;
function ReloadFunktionen()
{
 console.log(update);
 update=setTimeout(ReloadFunktionen, 1000);
}
ReloadFunktionen();

Die console.log Info zeigt mir das der Wert der Variable "update" am steigen ist, die Zahl wird immer groeser, ich frage mich ob dadurch mit der Zeit vielleicht der Browser immer mehr Speicher verbraucht, ob ich das falsch aufgebaut habe oder ob das normal ist das die Zahl welche setTimeout zurueck gibt immer weiter steigt.

Im Prinzip will ich das ganze als Endlosschleife benutzen damit bestimmte Funktionen immer wieder neu aufgerufen werden nach Ablauf von paar Sekunden.

...zum Beitrag

Javascript funktion um gewisse Uhrzeit, setinterval Ressourcen Belastung?

Hallo zusammen

Ich bräuchte eine function, welche immer um die gleiche Uhrzeit, jeden Tags ausgeführt wird. Jeden Tag um 23:59

Nun habe ich eine setInterval function welche jede sekunde ausgeführt wird. wenn die aktuelle uhrzeit 23:59:0 betrifft, wird die eigentliche function ausgeführt.

Meine Frage: Ist das sehr ressourcen verbrauchend, da jede sekunde abgefragt wird?

function tick() {
  //get the mins of the current time
  var mins = new Date().getMinutes();
  var sec = new Date().getSeconds();
  var hours = new Date().getHours();
  var time_stamp = "23:59:0";
  var time_stamp = "15:20:0";
  var current_time = hours + ":" + mins + ":" + sec;
  
  if (current_time == time_stamp) {
    alert('Do stuff');
  }
  console.log('Tick ' + hours + ":" + mins + ":" + sec);
}


setInterval(tick, 1000);

...zum Beitrag

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

...zum Beitrag

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zum Beitrag

Wie kann ich den Fehler beheben?

const http = require('http');
const fs = require('fs');
const mysql = require("mysql2");

var db  = mysql.createConnection({
    host : "localhost",
    user : "root",
    password : "passwort",
    database : "test-datenbank"
});


db.connect(function (error){
    if (error) throw error;
    console.log("Connected!")
    var sql = "INSERT INTO benutzer (username) VALUES ('Beispiel')";
    db.query(sql, function (error,result){
        if(error) throw error;
        console.log("1 record inserted");
    });
    sql="SELECT * FROM benutzer"
    
    db.query(sql,function(error,result){
        if (error) throw error;
        console.log(result);

    });
});

const server = http.createServer((req,res) => {
    const url = req.url;
    const method = req.method;
    

    if ( url === "/"){
    res.setHeader("key","value");
    res.setHeader("Content-Type","text/html");
    res.write('</html><body>');
    res.write('<h1>Main</h1>');
    res.write('<h1><form action="/register" method="post"> <input type="text" name="Username"><br><button type="submit">Click</button></form></h1>');
    res.write("</body></html>");
    res.end()
    return;
    }

    if (url === "/register"){
         
        const reqBody = []
         req.on('data', (chunk)=>{
            console.log(chunk);
            reqBody.push(chunk);
     });
        
     req.on('end', () => {
        console.log(reqBody);
        const parsed = Buffer.concat(reqBody).toString();
        console.log(parsed);
        const user = parsed.split('=')[1];
        console.log(user)
        
        // funktioniert nicht 
        sql = 'INSERT INTO benutzer (username) VALUES ?, user;
        db.query(sql,function(error,result){
            if (error) throw error;
            console.log(result);
        });



});
        
        
        res.setHeader("key","value");
        res.setHeader("Content-Type","text/html");
        res.write('</html>');
        res.write('<body><h1>Registriert</h1></body>');
        res.write("</html>");
        res.end()
        return;

    }
    
}) 



server.listen(1337);

Der Fehler lautet wie folgt:

code: 'ER_PARSE_ERROR',

errno: 1064,

sqlState: '42000',

sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1",

sql: 'INSERT INTO benutzer (username) VALUES',

fatal: true

...zum Beitrag

Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


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


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

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

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = 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 Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Java Script - Wieso ändert sich die Hintergrundfarbe nicht (backgroundColor)?

Moin zusammen,

Wieso ändert sich hier nicht die Hintegrund-farbe (backgroundColor) von dem <h1>-Element, wenn man den Code mit HTML ausführt?


var h1 = document.createElement('h1');
document.body.appendChild(h1);


setInterval(colors, 1000);

let h1style = h1.style;

let farben = ['"green"','"red"', '"orange"', '"yellow"', '"pink"';


                            function colors(){


                            let n = Math.floor(Math.random() *10);
                            h1style.backgroundColor = farben[n];


                            h1.innerHTML = farben[n];
                            vergangeneZeit++;

...zum Beitrag

Programm auslesen eines Arduinos?

hey, ich versuche gerade (immer noch) Daten von meinem Arduino zu einer Datenbank in mysql zu senden. Jedoch kommt nichts an und beim Arduino blinkt die ganze Zeit TX (was doch fürs Daten senden steht, oder?).

Hier das Programm von VSC:

var mysql = require('mysql');


var SerialPort = require("serialport");


var column_name = 'Wert'
var table_name = 'Wertetabelle'


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


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


port.pipe(parser);


//Determine the connection to MySQL
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "werte_datenbank"
});


//Connect with Database
con.connect(function(err) {
    // Build the connection
    if (err) throw err;
    console.log("Connected!");
});


parser.on('data', function(data){
    console.log(data);


    // Deklariert was genau wo gespeichert werden soll
    var sql = "INSERT INTO `werte_tabelle` (`Wert`) VALUES ('" + data + "');"


    // Speichert bei Änderungen die neuen Daten in der Datenbank
    con.query(sql, function (err, result) {
      if (err) throw err;
      console.log("1 record inserted");
    });
});


//DELETE FROM `werte_tabelle` WHERE 1
var sql = "DELETE FROM `werte_tabelle` WHERE 1"
// Löscht die Datenbank
con.query(sql, function (err, result) {
    if (err) throw err;
    console.log("Every Entry deleted");

});

Hier das Programm vom Arduino Editor:

int pinPx = 3;
int x = 1;
const long intervall = 20000;
bool zeitspanne = true;
float zeit_now = millis();


void setup() {
  Serial.begin(9600);
  pinMode(pinPx, INPUT);


}


void loop() {
  zeit_now = millis();


  while (zeitspanne == true) {
    if (digitalRead(pinPx) == true) {
      Serial.write(x);
    }
    if (millis() > (zeit_now + intervall)) {
      zeitspanne = false;


    }
  }


  pinPx = pinPx + 1;
  x = x + 1;
  zeitspanne = true;
}

Vielen Dank!!

...zum Beitrag

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zum Beitrag

JQuery Code wird in falscher Reihenfolge ausgeführt?

Guten Tag. Ich will einen Bar Chart generieren nachdem ich informationen bei einer API ausgelesen habe. Dies habe ich mir so vorgestellt, dass erstmal die daten ausgelesen werden, diese in ein array umgewandelt werden und dann der barchart generiert wird.

Gerade komme ich nicht weiter beim umwandeln zum Array. Die Funktion test() wird schon am direkt am anfang ausgeführt, obwohl noch nicht alle informationen zusammengestellt wurden. Was kann ich machen, damit test() erst nach dem start() vollständig ausgeführt wurde, ausgeführt wird?

Code:

var app = {};
			//a jQuery function that is directly called using jQuery is registered to be started after the page has finished loading
$(function() {
      start();
	  test();
});
        var arrayy = [];


        function start()
        {
            getLogDataKeys();   
        }
        
        //a function that retrieves a list of objects for owner logdata
        function getLogDataKeys()
        {
            $.getJSON("http://webtechlecture.appspot.com/cloudstore/listkeys?owner=logdata",
                    &nbsp;&nbsp;
                    &nbsp; function(data)//this function is called when the server answers its data
                    &nbsp; {
                        console.log(data)
                        if (data.length&gt;0)
                        {
                            $.each(data,
                                &nbsp; &nbsp;function(index,logEntry){//this function is called for each single object in the array named "data" (listobjects and listkeays answer an array, while get does not!)
                                        processLogEntry(logEntry);
                                    });
                        }
                    &nbsp; }
                        
                     );




        }
        
        //each logEntry is processed here
        //process &amp; aggregate the data here
        function processLogEntry(aEntry)
        {
            $.getJSON("http://webtechlecture.appspot.com/cloudstore/get?owner=logdata&amp;key="+aEntry.key,
                function(data)//this function is called when the server answers its data
                    &nbsp; {
                        var diena = data.app;
                        
                    &nbsp; &nbsp; if(app.hasOwnProperty(diena)){
                        var value= app[diena];
                        app[diena]= value+1;
                        }
                        if(!(app.hasOwnProperty(diena))){
                        app[diena] = 1;
                        }
                        console.log(aEntry);
                        
                    });
        }
    function test()
        {
                        Object.keys(app).forEach(function(key) { arrayy.push([key,app.key])});
                        console.log("HI");
        }
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBarColors);
function drawBarColors() {       var data = google.visualization.arrayToDataTable([         arrayy       ]);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        colors: ['#b0120a', '#ffab91'],
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    } </script>

...zum Beitrag

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

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?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen