|
|||
Werte abspeichern
Hallo liebe Community...
Habe von meinem Freund eine HTML/CSS ToDo Liste erhalten. Das Problem dabei ist das es die Eingetragenen Werte nicht abspeicher :/ Kann Mir da Jemand helfen? Hier der Code: HTML-Code:
<!DOCTYPE html> <html> <head> <title>To-Do</title> <style> @font-face{ font-family: 'nexa-b'; src: url('css/fonts/NEXA-BOLD.OTF') format('opentype'); } @font-face{ font-family: 'nexa-l'; src: url('css/fonts/NEXA-LIGHT.OTF') format('opentype'); } body { margin: 0; min-width: 250px; } h3{ font-family:nexa-l; } h2{ font-family:nexa-b; } li{ font-family:nexa-l; } span{ font-family:nexa-b; } /* Include the padding and border in an element's total width and height */ * { box-sizing: border-box; } /* Remove margins and padding from the list */ ul { margin: 0; padding: 0; } /* Style the list items */ ul li { cursor: pointer; position: relative; padding: 12px 8px 12px 40px; background: #eee; font-size: 18px; transition: 0.2s; /* make the list items unselectable */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Set all odd list items to a different color (zebra-stripes) */ ul li:nth-child(odd) { background: #f9f9f9; } /* Darker background-color on hover */ ul li:hover { background: #ddd; } /* When clicked on, add a background color and strike out text */ ul li.checked { background: #888; color: #fff; text-decoration: line-through; } /* Add a "checked" mark when clicked on */ ul li.checked::before { content: ''; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px; } /* Style the close button */ .close { position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px } .close:hover { background-color: #f44336; color: white; } /* Style the header */ .header { background-color: #ff9933; padding: 30px 40px; color: white; text-align: center; } /* Clear floats after the header */ .header:after { content: ""; display: table; clear: both; } /* Style the input */ input { border: none; width: 75%; padding: 10px; float: left; font-size: 16px; } /* Style the "Add" button */ .addBtn { padding: 10px; width: 25%; background: #d9d9d9; color: #555; float: left; text-align: center; font-size: 16px; cursor: pointer; transition: 0.3s; } .addBtn:hover { background-color: #bbb; } footer{ text-align:center; position:relative; top:435px; } </style> </head> <body> <div id="header" class="header"> <h1 style="margin:5px">To-Do » Server</h1> <input type="text" id="myInput" placeholder="Neue Aufgabe..."> <span onclick="newElement()" class="addBtn">Hinzufügen</span> </div> <ul id="todo"> <li>Test1</li> <li class="checked">Test2</li> <li>Test3</li> </ul> <script> var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); } var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("todo").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } } </script> </body> <footer> <h3>©<b><i> Alpen-Games.at</b></i> 2015-2016</h3> </html> LINK Geändert von Mario1409 (09.09.2016 um 03:18 Uhr) |
Sponsored Links |
|
|||
Zitat:
Giebt es sonst möglichkeiten die Eintrage der Liste zu speichern? |
|
||||
Du hast die Kategorie in der du deine Frage gestellt hast falsch gewählt. Das ist keine HTML Frage, sondern gehört in den Bereich Javascript & Ajax - XHTMLforum
Zitat:
(Ich frage das, weil dein Code relativ komplex aussieht, d.h. du hast eine Dokumentation, da müsste/sollte zu diesem Thema auch etwas stehen.) Ja gibt es, aber es gibt viele und es kommt drauf an, was du mit den Daten machen willst. |
|
|||
Zitat:
Die Daten sollen gespeichert werden so das sie nach dem aktualisieren immernoch da sind |
|
|||
Nach ausführlicher Befragung meiner Kristallkugel nehme ich mal an, dass er eine ToDo List haben möchte. So was kann man mit JS realisieren (auch mit abspeichern), aber nicht so, wie es gepostet wurde.
Hier ist es Schritt für Schritt erklärt. Getestet habe ich es jetzt nicht, aber es schaut mal auf den ersten Blick gut aus. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
UTF-8 ohne BOM abspeichern geht nicht | web334 | (X)HTML | 6 | 24.10.2013 14:59 |
Überschneidungen trotz eindeutiger werte | noob | CSS | 1 | 15.01.2009 18:30 |
Mysql: Tabelleneinträge zählen mit gleichen Werte in einer Spalte zählen? | braindead | Serveradministration und serverseitige Scripte | 11 | 11.05.2008 13:47 |
CSS Werte werden überschrieben. Nur wo? | ONeill | CSS | 5 | 04.07.2006 13:06 |
calsse nimmt nicht alle werte an.. | Holger (HMR) | CSS | 4 | 16.04.2005 20:24 |