XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Werte abspeichern (http://xhtmlforum.de/showthread.php?t=72986)

Mario1409 09.09.2016 03:15

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 &raquo; 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>&copy;<b><i> Alpen-Games.at</b></i> 2015-2016</h3>
</html>

Und hier nochmal ein Link zum Ansehen oder Downloaden
LINK

protonenbeschleuniger 09.09.2016 08:55

Zitat:

Zitat von Mario1409 (Beitrag 549786)
Das Problem dabei ist das es die Eingetragenen Werte nicht abspeicher :/

Wieso und wo sollte das den passieren?
Und was ist deine HTML Frage? (mit HTML kannst du nichts abspeichern)

Mario1409 09.09.2016 13:41

Zitat:

Zitat von protonenbeschleuniger (Beitrag 549787)
Wieso und wo sollte das den passieren?
Und was ist deine HTML Frage? (mit HTML kannst du nichts abspeichern)

Wenn ich einen etwas in die Liste eintrage unjd aktualisiere ist es wieder weg.
Giebt es sonst möglichkeiten die Eintrage der Liste zu speichern?

protonenbeschleuniger 09.09.2016 13:54

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:

Zitat von Mario1409 (Beitrag 549790)
Wenn ich einen etwas in die Liste eintrage unjd aktualisiere ist es wieder weg.

Ja so ist es. Wie kommst du darauf, dass es nicht so sein sollte?
(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.)

Zitat:

Zitat von Mario1409 (Beitrag 549790)
Giebt es sonst möglichkeiten die Eintrage der Liste zu speichern?

Ja gibt es, aber es gibt viele und es kommt drauf an, was du mit den Daten machen willst.

Mario1409 09.09.2016 14:42

Zitat:

Zitat von protonenbeschleuniger (Beitrag 549791)
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

Ja so ist es. Wie kommst du darauf, dass es nicht so sein sollte?
(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.

Wie schon gesagt ist der Code von einem Freund deshalb weis ich nicht wie komplex er ist...

Die Daten sollen gespeichert werden so das sie nach dem aktualisieren immernoch da sind

protonenbeschleuniger 09.09.2016 14:48

Zitat:

Zitat von Mario1409 (Beitrag 549792)
Wie schon gesagt ist der Code von einem Freund deshalb weis ich nicht wie komplex er ist...

Warum fragst du dann den Freund nicht?

Zitat:

Zitat von Mario1409 (Beitrag 549792)
Die Daten sollen gespeichert werden so das sie nach dem aktualisieren immernoch da sind

Ja, das hast du bereits gesagt, aber warum?
Was willst du mit den Daten machen?

cloned 12.09.2016 10:56

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:33 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023