Besucherzähler per JavaScript auf Website?

Hi, ich würde gerne auf meiner Website einen Besucherzähler haben. Dieser soll immer dann, wenn ein Besucher auf die Website kommt um ein erhöht werden. War der Benutzer schon mal auf der Website, so soll nicht erhöht werden. Das ganze soll dann ganz einfach als Zahl dargestellt werden.

Hier meine Lösung dafür, dass nur neue Nutzer registriert werden:

var visitor_name = "Visitor: ";


window.onload = visitor;
function visitor() {
    visitor = localStorage.getItem(visitor_name);
    if (visitor == null) { //wenn noch nichts in Storage ist...
        visitor = 1;
        localStorage.setItem(visitor_name, visitor);
        console.log("Neuer Benutzer registriert!");
    } else if (visitor != null) { //wenn schon irgendwas im Storage ist...
        console.log("Benutzer bereits registriert!");
    }
}

Wie kann ich (nur mit JS) jetzt eine Zahl auf meiner Website anzeigen lassen, die sich immer erhöht, sobald ein neuer User joint? Das muss nicht live oder irgendwie sein, einfach nur für mich zum schauen, reicht also wenns bei Seitenreload funktioniert :).

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

28.07.2021, 07:16

Schicke via JavaScript einen Request an eine Serveranwendung, die für dich mit der Datenquelle kommuniziert, die den Zähler speichert. Die Datenquelle kann eine einfache Textdatei sein (vor allem dann ausreichend, wenn du nur den Zähler speicherst) oder eine Datenbank.

In deinem HTML-Dokument hast du ein Element für die Zähleranzeige:

<span id="counter-display"></span>

Mit JavaScript verschickst du den Request:

window.addEventListener("load", evt => {
  fetch("/counter")
    .then(response => response.json())
    .then(data => document.getElementById("counter-display").innerText = data.counter);
});

Hier wäre die Annahme, dass /counter auf einen Request Handler zeigt (das könnte ein PHP-Skript o.ä. sein), der prüft, ob der Nutzer schon einmal gezählt wurde und wenn ja, den Zähler inkrementiert. In jedem Fall gibt er ein Ergebnis in Form von JSON zurück:

{ "counter": 123... }

Damit niemand manuell den Handler aufrufen kann, sollte dieser zumindest prüfen, wer sein Aufrufer war (die Information steht im Request Header). Noch besser gegen häufige Aufrufe bist du mit einer ID geschützt, welche bei jedem Seitenaufruf neu generiert und an die Request URL gehängt wird. Der Handler prüft dann, ob die generierte ID der entspricht, die auch an die URL gehängt wurde.

Für die Nutzerprüfung gibt es verschiedene Möglichkeiten. Einige sind leichter manipulierbar als andere.

Bei der von dir gewählten Prüfung müsste der Nutzer bspw. leidglich den Key im Local Storage loswerden, um sich neu zählen zu lassen. Dafür würde allerdings die Speicherung der Zahl (in einer Textdatei) ausreichen.

Eine andere Vorgehensweise wäre das Speichern aller Inkrementationen in Form eines Keys in einer Datenbanktabelle. Dieser Key wird auf Serverseite ermittelt. Man könnte die IP verwenden oder sich aus Werten des UserAgent eine ID zusammenbauen (wobei darauf geachtet werden muss, dass der Key für alle Subseiten deiner Webseite gleich bleibt). Kommt ein neuer Besucher auf die Webseite, wird sein Key ermittelt, in der Datenbank nach diesem gesucht und wenn er nicht gefunden wird, der neue Key eingetragen. Für die Abfrage des aktuellen Zählstandes ist es notwendig, alle Einträge der Datenbank (am besten von der Datenbank) zählen zu lassen.

Wie eine Datenbankkommunikation ablaufen kann, ist davon abhängig, mit welcher Datenbank du arbeitest und mit welcher Technologie du deine Serveranwendung zusammenbaust (sei es PHP o.a.).

Aufgrund der weiten Verbreitung von PHP und MySQL zwei Verweise:

Genügend Material zu SQL findest du hier.
Eine Datenbankverbindung zwischen einem PHP-Skript und MySQL kannst du mit dem mysqli-Modul herstellen. Schau auf die Seiten des Manuals. Dort findest du komplette Beispiele für Anfragen und dergleichen.

Fauxton

29.07.2021, 02:11

Ich würde dafür eher EvilCookie empfehlen, damit es nicht wieder einen neuen Besucher anlegt, wenn der Benutzer LocalStorage selbst löscht. Wenn Sie EvilCookie verwenden, selbst wenn Sie die Cookies löschen, beim erneuten Besuch der Website werden die Cookies wieder mit denselben values auftauchen.

regex9

29.07.2021, 06:15

@Fauxton

Ich denke, es wäre hilfreich, wenn du auf die Projektseite des von dir empfohlenen Tool verlinken würdest, damit man sich darüber näher informieren kann.

Fauxton

29.07.2021, 06:57

@regex9

Ich habe mich bei den Namen vertan, es heißt Evercookie

Wiki: https://en.wikipedia.org/wiki/Evercookie

Repo: https://github.com/RobinLinus/ubercookie
Demo: https://ubercookie.robinlinus.com/

ArduinoGeek

Fragesteller

31.07.2021, 02:29

Danke!

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

28.07.2021, 03:36

Du speicherst die Zahl im Browser. Du musst aber die Zahl auf dem Server speichern, also mit zum Beispiel PHP. Mit PHP kannst du dann auch die Zahl direkt einbinden. JS kann nichts serverseitig speichern, außer man lässt es mit PHP oder so kommunizieren.

Deshalb wird dein Vorhaben (Besucherzähler) nur in JavaScript nicht funktionieren.

Alternativen zu PHP wären übrigens:

NodeJS, Python, C# und weitere

ArduinoGeek

Fragesteller

28.07.2021, 06:08

Danke habe ich mir schon gedacht.

Ähnliche Fragen

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

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?

...zur Frage

LocalStorage Daten anzeigen?

Mit welchem Befehl kann man im Local Storage Daten anzeigen lassen so das es der Benutzer sieht?

Ich habe es schon so probiert:

Punkte = localStorage.getItem( Punkte );

Vielen Dank!

...zur Frage

Browserfehler: "0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference"?

Hallo,

ich habe eine Aufgabe gemacht und mein Browser gibt diesen Fehler aus:

0: Unable to get property 'SavePersonalAndPaymentData' of undefined or null reference

Ich glaube aber, dass die Aufgabe richtig ist!

Ich habe es auch einen Freund geschickt und bei ihm funktioniert es ebenfalls nicht.

HTML:

<!DOCTYPE html>
<html>
  <head lang="de">
    <meta charset="UTF-8" />
    <style type="text/css"></style>
    <title>Lieblings Professor</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Notenberechnung<br>Teilaufgaben</legend>

        <label for="aufgabe1">Aufgabe 1:</label>
        <input type="number" name="Augabe1" id="a">
        <br><br>

        <label for="aufgabe2">Aufgabe 2:</label>
        <input type="text" name="Aufgabe2" id="b">
        <br><br>

        <label for="aufgabe3">Aufgabe 3:</label>
        <input type="number" name="Augabe3" id="c">
        <br><br>

        <label for="aufgabe4">Aufgabe 4:</label>
        <input type= "number" name="Augabe4" id="d">
        <br><br>

        <button id="069" value="069">druck berechne</button>
      </fieldset>
    </form>
    <h1>Note</h1>
    <div id="note"></div>
    <script src="x1.js"></script>
  </body>
</html>
</form>
<h1>Note</h1>
<div id="note"></div>
<script src="x1.js"></script>
</body>
</html>

JavaScript:

"use strict"

window.addEventListener("load", init);

function init() {
  console.log("Fenster ist geladen");
  let btn = document.getElementById("069");
  btn.addEventListener("click", btnfk);

  function btnfk() {
    console.log("ich wurde geklickt!!!!");

    let aufgabe1 = document.getElementById("a").value;
    console.log(aufgabe1);
    let aufgabe2 = document.getElementById("b").value;
    console.log(aufgabe2);
    let aufgabe3 = document.getElementById("c").value;
    console.log(aufgabe3);
    let aufgabe4 = document.getElementById("d").value;
    console.log(aufgabe4);

    aufgabe1 = Number(aufgabe1);
    aufgabe2 = Number(aufgabe2);
    aufgabe3 = Number(aufgabe3);
    aufgabe4 = Number(aufgabe4);

    let note = document.getElementById("note");
    global = global + aufgabe1 + aufgabe2 + aufgabe3 + aufgabe4;

    note.textContent = global;
    let note5 = document.createElement("div");
    document.body.appendChild(note5);

    if (global < 12) {
      note5.textContent = "Ihre Note ist 5!!!!!";
    }

    if (global >= 12 && global <= 15) {
      note5.textContent = "Ihre Note ist 4 ...";
    }

    if (global >= 15 && global <= 18) {
      note5.textContent = "Ihre Note ist 3";
    }

    if (global >= 18 && global <= 21) {
      note5.textContent = "Ihre Note ist 2 super";
    }

    if (global >= 21) {
      note5.textContent = "Ihre Note ist 1 WOW";
    }
  }
}

let global = 0;

Wenn ich statt Zahlen aber Buchstaben eingebe, werden sie gespeichert. Ansonsten mit Zahlen werden sie nicht gespeichert und verschwindet sofort.

...zur Frage

JavaScript Problem?

Hab mir einen Passwort Generator gemacht (Code unten), aber irgendwas stimmt da manchmal nicht und ich komm nicht drauf.

Ist noch nicht fertig oder überhaupt ein Krasser Passwort Generator aber hab den aus Langeweile gemacht und dieser Fehler stört mich.

Kann mir jemand weiterhelfen ?

Hier steht kein Undefined.

Hier steht ein Undefined mitten im erstellten Passwort.

Ist nur kurzer JavaScript Code:


let pwLength = 12;
let randomNumber  = Math.round(Math.random() *3);
let ALPHABET = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',  'S', 'T', 'U', 'V', 'W', 'X','Y', 'Z' ];
let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
let Numbers = ["0","1","2","3","4","5","6","7","8","9"];
let SpecialChar = 
            ["!", "*", "#" ,"," ,";" ,"?", "+", "-", "_" ,".", "=", "~", "^", "%", "(", ")" ,"{", "}", "[", "]", "|", ":", "/" ];
let passwort = "";


    for (i = 0; i <= pwLength - 1; i++){
    /* zufällige Zahl zwischen 0-3,
    Bei jedem Schleifendurchgang geht es in ein anderes if statement rein */
    randomNumber  = Math.round(Math.random() *3);


                    // +1 Großbuchstabe
                if (randomNumber == 0){
                passwort += ALPHABET[Math.round(Math.random() *ALPHABET.length)]; }
                  // +1 Kleinbuchstabe
                if (randomNumber == 1){
                passwort += alphabet[Math.round(Math.random() *alphabet.length)];}
                  // +1 Zahl
                if (randomNumber == 2){
                   passwort += Numbers[Math.round(Math.random() *Numbers.length)];}
                    // +1 Sonderzeichen
                if (randomNumber == 3){
                passwort += SpecialChar[Math.round(Math.random() *SpecialChar.length)];}
    }
                if (passwort.includes("undefined")){
                console.log("Undefined Fehler, Passwort lautet " + passwort);}
                else{ console.log("Dein Passwort lautet : " +passwort )}

Glaube mit Switch Case wäre das besser als if, hab ich aber nie benutzt nur in Tutorials mal gesehen

...zur Frage

Sprung vom letzten Array Element in den Ersten?

Hallo,

ich habe folgende Funktion:

function getNextWeekday(day) {
  let i = 0;
  while (i < weekdays.length) {
    if (day == weekdays[i]) {
      console.log(weekdays[i+1]) ;
      return weekdays[i+1];
    }
    i = i + 1
  }
  console.log("Error!");
  return null;
}

Wenn man getNextWeekday("Monday") eingibt, wird Tuesday ausgegeben etc. Wenn ich aber Sonntag eingebe, sollte Montag herauskommen. Weiss jemand was ich an meiner Zählervariable abändern muss, damit das funktioniert?

...zur Frage

Node.js: Werte an HTML Datei übergeben?

Ich habe etwas mit Node.js angefangen und komme einfach nicht mehr weiter. Ich habe das Server erstellen usw. gut verstanden, aber jetzt komme ich nicht mehr weiter. Es kann sein, dass das total einfach ist.

Ich habe anfangs einen Server erstellt. Nun habe ich eine MySQL-Verbindung hergestellt (was auch funktioniert) und mit dem SELECT-Befehl Daten daraus bekommen. Nur stellt sich mir nun einfach die Frage, wie zum Teufel ich den Wert in meine HTML Datei bekomme, um sie auszugeben.

app.js:

var express = require("express");
var app = express();
var mysql = require("mysql");
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "test"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected to Database!");
});

app.listen(8080, function() {
  console.log("Server is running!");
});

con.query("SELECT id, Zahl FROM test", function(err, result, fields) {
  if (err) throw err;
  console.log(result);
});

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

Also, wie gesagt, bekomme ich in der Konsole "result" ausgegeben. Aber wie bekomme ich das jetzt z.B. in einen div in meiner index.html?

Und noch eine kleine Nebenfrage: Ist das so richtig, wenn ich einfach andere Seiten so

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.get("/test", function(req, res) {
  res.sendFile(__dirname + "/test.html");
});

erzeugen kann?

Also wenn ich einfach nur mehrere HTML Dateien haben möchte.

Und noch eine kleine Frage: Ich kenne es so, dass man in PHP eigentlich immer MySQL-Datenbanken verwendet. In Node.js geht das ja auch, aber gibt es da auch eine Art vorgesehene Datenbank?

Die kleinen Fragen sind nebensächlich, die erste Frage ist mir erst einmal am wichtigsten. Aber wer es weiß ...

MfG

Tom

...zur Frage

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

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

Java HashMap: Key anhand von Value als Set<String> zurückgeben?

Moin,

folgender Fall:

private HashMap<String, String> storage = new HashMap<String, String>();

public void store(String item, String repository) {
  if (repository == null || item == null) {
    throw new NullPointerException();
  }

  if (repository == "" || item == "") {
    throw new IllegalArgumentException();
  }

  storage.put(item, repository);
}

public Set<String> getItems(String repository) {
  // Key: Glasses value: Bookshelf
  // return null;
}

Aufgabe:

For the

getItems("Bookshelf");

the function should return the Set {"Glasses"}.

Irgendwelche Vorschläge? Meine Suche hat bisher kein hilfreiches Ergebnis vorgebracht.

...zur Frage

Javascript for-of schleife ergebnise mit einander rechnen?

Hey,
folgendes: Ich möchte einen notendurchschnitt berechner bauen. Nun habe ich folgendes Problem: Ich trage die Noten in eine Tabelle ein. Mit einer for-of schleife tu ich drüber etarieren. Nur jetzt weiß ich nicht, wie ich die ganzen Zahlen zusammen rechnen soll.

Hier der Code:

let noten = e.target.parentNode.querySelectorAll(".noten");

for(let note of noten.values()){

if(note.value != 0){

console.log(note.value);

// Problem: Alle Noten miteinander verrechnen

}

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

Node.js/Express - req.body funktioniert nicht?

Ich möchte in meiner app.js-Datei Werte aus meiner HTML-Datei benutzen. In meiner HTML-Datei ist ein TextFeld namens "search". Dazu will ich in app.js

var searchText = req.body.search

verwenden, um den Wert des Feldes zu bekommen. Das klappt aber nicht!

Hier mein app.js-Code:

var express = require("express");
var pg = require("pg");
var bodyParser = require("body-parser");
var CON_STRING = process.env.DB_CON_STRING;

if (CON_STRING == undefined) {
  console.log("Error: Environment variable DB_CON_STRING not set!");
  process.exit(1);
}

pg.defaults.ssl = true;
var dbClient = new pg.Client(CON_STRING);
dbClient.connect();

var urlencodedParser = bodyParser.urlencoded({ extended: false });
const PORT = 80;

var app = express();
app.set("views", "views");
app.set("view engine", "pug");
app.get("/search", urlencodedParser, function (req, res) {
  var searchText = req.body.source;
  console.log(searchText); //HIER IST DER FEHLER: Es spuckt "undefined" aus!

  dbClient.query("SELECT * FROM book LIMIT 50 ", function (dbError, dbItemsResponse) {
    res.render("index", {
      BookList: dbItemsResponse.rows
    });
  });
});
app.listen(PORT, function () {
  console.log(App listening on Port ${PORT});
});

Das

console.log(searchText)

gibt mir immer undefined zurück. Wenn ich in der HTML-Datei über ein Script den Wert vom Textfeld ausgebe, dann ist der das, was da drinnen steht. Nur mit req.body scheine ich nicht darauf zugreifen zu können. Ich bekomme immer undefined.

Was mache ich falsch? Wie kann ich es beheben? Hat jemand eine Idee?

...zur Frage

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.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen