Automatisch Scrollen?

Hallo,

auf meiner Website hab ich 2 Icons, die durch eine Klick Funktion jeweils ein Div darunter erscheinen lassen.

Sobald ein Div erscheint oder ich die passende Klasse hinzufüge soll nun zu den passenden Div runter oder zum Seitenanfang gescrollt werden.

Wo liegt der Fehler ?...ich steh etwas aufm Schlauch.

Das Problem muss nicht unbedingt mit einer Scroll function gelöst werden =)

function klick() {
    let hauptDiv = document.getElementById('div_eins');


    if (hauptDiv.classList.contains('unsichtbar') == true) {
        hauptDiv.classList.remove('unsichtbar');
        hauptDiv.classList.add('sichtbar');
        window.scrollTo(0, 100);
    } else if (hauptDiv.classList.contains('sichtbar') == true) {
        hauptDiv.classList.remove('sichtbar');
        hauptDiv.classList.add('unsichtbar');
    }   else {
           return;
        }
    }

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

whgoffline

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren

28.04.2022, 19:22

Eine Frage: "Wozu JavaScript dafür?"

Einfach

<a href="#eins">Runter zu eins</a>
<a href="#zwei">Runter zu zwei</a>
<div id="eins"></div>
<div id="zwei"></div>

wilst du noch smooth scroll dann im CSS code

html {
  scroll-behavior: smooth;
}

Woher ich das weiß:Studium / Ausbildung – Informatikstudent

speedwanted55

28.04.2022, 19:24

Nimm einfach genau das hier ;)

BenIEbelt

Fragesteller

28.04.2022, 19:33

@speedwanted55

? Was genau

speedwanted55

28.04.2022, 19:45

@BenIEbelt

Das Beispiel zeigt dir genau wie es funktioniert. Mit nem <a> Tag arbeiten und zu den ID's der Div's verlinken

BenIEbelt

Fragesteller

28.04.2022, 19:51

@speedwanted55

Bitte hol nicht gleich den Knüppel ausm Sack, aber warum kann ich nicht auch mein image (icon) als link nutzen ? Wenn doch nur href gesetzt werden muss... ?

Und ich frage mich immer noch warum mein Fenster nicht scrollen will per window.scroll() =D

whgoffline

28.04.2022, 19:52

@BenIEbelt

Da a ein Link ist. Nicht jedes html Element hat die selbe Aufgabe/Funktion und unterstützt somit nicht alle Attribute.

BenIEbelt

Fragesteller

28.04.2022, 19:59

@whgoffline

Das heißt wenn ich das richtig nachgelesen hab, ich packe mein image mit in den link.

whgoffline

28.04.2022, 20:01

@BenIEbelt

Also wenn ich das richtig sehe hast du 2 Optionen:

bild in den a Tag rein packen /*Ist aber glaube ich kein valides html5*/
a Tag als bild stylen mit css und background-image

BenIEbelt

Fragesteller

28.04.2022, 20:07

@whgoffline

hab das Bild jetzt in de Tag gepackt. Funzt leider auch nicht.. Sobald ich aufs Image klicke springt er zum Anfang der Website =(

speedwanted55

28.04.2022, 20:23

@BenIEbelt

Ich geb dir mal ein Beispiel für whgofflien's 1. Beispiel :)

<a href="#div1"><img src="assets/images/img1.png" width="Breite deines Bilder" heigh="Höhe deines Bilder"></a>

Damit erreichst du, das, wenn du auf dein Bild klickst, du zum Div mit der ID "div1" scrollst.

speedwanted55

28.04.2022, 20:25

@speedwanted55

Hier mal ein Beispiel aus meinem aktuellen Projekt:

 <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                    <div class="avatar avatar-online">
                      <img src="assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
                    </div>
                  </a>

Das das Bild in nem DIV ist sei mal dahingestellt. Wenn du jetzt dort statt javascript:void(0) eben dein "#div1" einträgst, funktioniert es genauso :)

speedwanted55

28.04.2022, 20:27

@speedwanted55

und ich meinte natürlich "height", anstelle von "heigh" bei meinem ersten Codebeispiel. ^^

BenIEbelt

Fragesteller

28.04.2022, 20:43

@speedwanted55

Vielen vielen Dank, habs verstanden und auch schon Umgesetzt. Mein Fehler lag darin, dass ich die falsche Html im Browser offen hatte..... deswegen hatte ich die letzten 10 min keine Veränderung festgestellt *kopfschüttel*... Dass dann auch keine Fehler in der Konsole geloggt werden is auch klar.. . Ich such mir jetzt ein Loch und versinke darin.

Mache seit gestern Morgen eine Übung nach der nächsten, komme nicht mehr von dem Kram weg :D .. hatte 4std Schlaf und MUSSTE =) dann weiter machen..

Jetzt werde ich aber mal kurz den Bildschirm abschalten, sehe kaum noch den Text, die vom Kreislauf verzerrte Optik dominiert.

Nochmals Danke für die Hilfe, solche netten Menschen wie Sie machen diese Plattform zu dem was sie ist... Genial ! DANKE

speedwanted55

29.04.2022, 11:07

@BenIEbelt

Sehr gern!

Freut mich das ich dir helfen konnte :)

Mir wird auf dieser Plattform ja auch oft geholfen^^

Ich wünsch dir nen schönen Tag :)

BenIEbelt

Fragesteller

28.04.2022, 19:40

Zu der Frage,

ich lerne im Moment aus Spass javascript. In Verbindung mit Html und Css kann das einen schon ganz schön bei Laune halten. Die möglichkeiten und "schnellen" Ergebnisse haben mich fasziniert =)

(ich habe und hatte weder beruflich noch schulisch was mit IT zu tun :D)

Muss ich wenn ich mit JavaScript das href attr setzen will, es auch vorher in der Html Datei ohne inhalt in den Tag einfügen (href=' ' ) ??

whgoffline

28.04.2022, 19:44

@BenIEbelt

Wenn du das href von deinem js code aus dynamisch verändern willst/musst, dann kannst du sowas machen (angenommen der a Tag hat id="link")

let link = document.querySelector('#link');
link.setAttribute('href','neuerWert');

siehe https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute

Ähnliche Fragen

scroll animation mit javascript?

 window.onscroll = function() {scrollFunction()};
                
                function scrollFunction() {
                  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("pic").style.marginTop = "0px";
                    document.getElementById("pic").style.marginLeft = "900px";
                    document.getElementById("pic").style.width = "100px";
                    document.getElementById("pic").style.height = "100px";
                    document.getElementById("h1").style.width = "1003px";
                    document.getElementById("h1").style.height = "60px";
                    document.getElementById("h1").style.marginTop = "0px";
                    document.getElementById("h1").style.textAlign = "center";
                  } else {
                    document.getElementById("pic").style.marginTop = "110px";
                    document.getElementById("pic").style.marginLeft = "800px";
                    document.getElementById("pic").style.width = "200px";
                    document.getElementById("pic").style.height = "200px";
                    document.getElementById("h1").style.width = "250px";
                    document.getElementById("h1").style.height = "50px";
                    document.getElementById("h1").style.marginTop = "195px";
                  }

Hi, kann mir vielleicht jemand helfen die scroll animation so zu gestalten, dass sie nicht so abrupt geschieht ?

..oder gibt es eine bessere Lösung für mein Vorhaben, bzw wie könnte man es einfacher coden ?

Sry, bin totaler Anfänger =)

...zur Frage

JavaScript Textboxen die aufklappen

Kann kein JavaScript. Kann man das vielleicht so umschreiben, dass es möglich wird, in den Link auch noch etwas anderes rein zu schreiben als wie die Wörter die in dem Script abgeglichen werden. Also "[Aufklappen]" und "[Schliessen]" ...

Ich will halt, dass man auf der ganzen div-box, die um den Link liegt, drauf klicken kann..

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '[Aufklappen]') {
link.innerHTML = '[Schliessen]'; d.style.display = 'block';
} else { link.innerHTML = '[Aufklappen]'; d.style.display = 'none';
}
}




<div>
    <div>
        <a href="javascript: void(0);" onClick="toggle(this, 'box1');">[Aufklappen]</a>
    </div>
    <div id="box1" style=display:none>
        // Inhalt aufgeklappt
    </div>
</div>

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

JQuery Bei Scrollen Datensätze nachladen

Hallol, ich möchte gerne Datensätze in einem DIV mit overflow: auto und einer festen Höhe nachladen über AJAX. Bisher ist es mit dem nachfolgenden Code so, dass nur nachgeladen wird wenn man auf der Seite nach unten scrollt.

Wie muss man den Code verändern, dass wenn man in dem DIV runterscrollt, die Datensätzte geladen werden?

    $(document).ready(function() {
    start = 0;
    count = 5;
    for (var i = 0; i < 1; i++){
        loadcontent(); 
    }
});
 
function loadcontent() {
    $("div.loader").show();    
     
    $.ajax({
        type: 'get',
        url: '/includes/ajax.php',
        async: false,
        data: { start : start, count : count },
        success: function (html){
            if(html){
                $('.container').append(html);
                start = start + 5;
            }else{
                $('.end').html('<p>Keine weiteren Posts!</p>');
            }
        }
         
    }) 
 
    $("div.loader").fadeOut('normal');     
}
 
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){       
            loadcontent();         
    }
});

Vielen Dank.

...zur Frage

HTML, CSS, JS If-Statement wird erst nach Reload ausgeführt?

Hallo zusammen,

ich habe folgenden Code:

const radiomore = document.getElementById('qty-more');

const lower = document.getElementById('lower-section');

const more = document.getElementById('more-section');

if(radiomore.checked) {

lower.style.display = "none";

more.style.display = "initial";

} else {

lower.style.display = "initial";

more.style.display = "none";

}

Die Funktion wird allerdings erst ausgeführt, wenn ich die Seite manuell reloade.

Kennt jemand dafür eine Lösung?

Vorab Danke.

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

JavaScript function beenden

Hallo zusammen,

folgende Codes:

function blabla(abbrechen) {

    if (abbrechen == "JA") {
    return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ausgabe").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","blablabla.php",true);
    xmlhttp.send();
    
}



setInterval(function () {blabla()}, 5000);
var abbrechen = "JA";
setTimeout(function (){blabla(abbrechen)}, 10000);

Ich verstehe leider nicht, warum meine Function "blabla" nicht nach 10 Sekunden beendet wird. Immerhin gebe ich das mit

setTimeout(function (){blabla(abbrechen)}, 10000);

doch an?!

Über eine Aufklärung wäre ich dankbar!

-> Ich möchte einfach nur, dass die obige Funktion mit dem Interval alle 5 Sekunden ausgeführt wird, aber darunter nach 10 Sekunden mit TimeOut beendet wird. Was passt dem Programm nicht?

Grüße, Hummel

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

Wie aktiviere ich mit JS bei einem <div>-Element den Vollbildmodus?

Hallo Leute,

Ich habe mich im Internet ein bisschen umgesehen, wie man mit JS ein <video>-Element in den Vollbildmodus schaltet. Folgendes Beispiel habe ich gesehen:

var elem = document.getElementById("name-of-element");

function activateFullscreen() {
  if(elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if(elem.mozRequestScreen) {
    elem.mozRequestScreen();
  } else if(elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if(elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

Bei einem <video>-Tag funktioniert das Ganze auch. Wenn ich es jedoch mit einem <div>-Container probiere, funktioniert es nicht. Kann mir jemand erklären wie das funktioniert?

Danke

...zur Frage

Gibt es einen weg das wider zu entschlüsseln?

ich habe auf der Seite https://obfuscator.io meinen JavaScript code verschlüsselt.

kann ich vom verschlüsselten code wieder zurück zum javascript code, wenn ja wie?

mein Code:

function be() {
    let eingabe = document.getElementById('password').value;
    if (eingabe == 'das ist gut') {
        re();
    } else {
        alert('Falsches Passwort');
    }
}

function re() {
    let feld = document.getElementById('pas');
    feld.remove();
}

function lock() {
    document.getElementById('bod').innerHTML += `<div class="pass" id="pas">
    <div class="pass-1">
        <div class="pass-2 pass-3">
            <h2>Passwort eingeben um fortzufahren</h2>
        </div>
        <div class="pass-2">
            <input type="password" id="password" placeholder="Passwort eingeben">
        </div>
        <div class="pass-2">
            <button class="pass-4" onclick="be()">Betätigen</button>
        </div>
    </div>
</div>`
}

...zur Frage

[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

...zur Frage

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zur Frage

jquery function ausführen beim klick auf den eine oder den anderen button?

hallo, ich habe eine jquery function und möchte, dass sie beim klicken auf den eine button und beim klicken auf den anderen button ausgeführt wird.

skript:

$(document).ready(function() {
                $(".kommentarabschicken").click(function(){
                        if($(".kommentareingabe").val() != "") {

                            $.ajax({
                                type: "POST",
                                url: "kommentare.php",
                                data: "kommentareingabe=" + $(".kommentareingabe").val(),
                                cache: false,
                                success: function(html){
                                        $(".scroll").html(html);
                                        $(".kommentareingabe").val();
                                }
                                });
                        }
                        return false;
                    });
                });

jetzt wird sie ausgefürt bei klicken auf kommentarabschicken. Sie soll auch ausgeführt werden, wen man auch kommentaroeffnen klickt. (evtl. wenn die Seite geladen wird)

Vielen Dank im Vorraus!!

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

Was möchtest Du wissen?

Deine Frage stellen