zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Werte abspeichern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.09.2016, 03:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2016
Beiträge: 3
Mario1409 befindet sich auf einem aufstrebenden Ast
Ausrufezeichen 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

Geändert von Mario1409 (09.09.2016 um 03:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.09.2016, 08:55
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Mario1409 Beitrag anzeigen
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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.09.2016, 13:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2016
Beiträge: 3
Mario1409 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
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?
Mit Zitat antworten
  #4 (permalink)  
Alt 09.09.2016, 13:54
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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 anzeigen
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 anzeigen
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.09.2016, 14:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2016
Beiträge: 3
Mario1409 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 09.09.2016, 14:48
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Mario1409 Beitrag anzeigen
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 anzeigen
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?
Mit Zitat antworten
  #7 (permalink)  
Alt 12.09.2016, 10:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:06 Uhr.