• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage HTML Funktion die HTML Script bearbeitet

H

HansiPeter

Neues Mitglied
Hallo liebe HTML-Experten,

Ich möchte gerne eine Website erstellen, welche verschiedene Links zu Webseiten enthält. Also:
  • Link1
  • Link2
  • Link3
Diese Links sollen aber vom Benutzer der Website erstellbar und löschbar sein. Er soll selbständig Links hinzufügen und Löschen können.
Die Website ist nur im eigenen Netz ansteuerbar, also nicht aus dem Internet. Die Links sollen auch nur auf Seiten zeigen die sich ebenfalls in diesem lokalen Netz befinden. Die Benutzer der Seite sollen lediglich in der Lage sein diese Links selbst zu verwalten, falls eine neue Seite erstellt wird bzw. gelöscht werden muss.
Meine Seite soll als Linksammlung für die Seiten im Netz dienen. Gibt es eine Funktion die einfach das HTML script bearbeitet?

Bspw.: Steht im Script:

<tr>
<td><a href="http://.../">Seite1</a></td>
<td><a href="http://.../">Seite2</a></td>
<td><a href="http://.../">Seite3</a></td>
</tr>

Und die Funktion soll entweder solch einen Link hinzufügen oder eben löschen. Gibt es da eine Möglichkeit?

Mit freundlichen Grüßen
Hansi
 
Was Du willst geht nicht mit HTML alleine. HTML ist gar nicht dafür gedacht. Was Du suchst könnte man z.B. mit einem Wiki realisieren. Schau dir mal mediaWiki und dokuwiki an. Die Installation davon erfordert jedoch einen entsprechend vorbereiteten Server in deinem Netzwerk.
 
Hab hier aus Langeweile mal was versucht, weiß nicht ob das deinen Vorstellungen entspricht.

Habe den localStorage verwendet um die Links abzulegen, hier der Code:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Dynamische Linkliste</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <style type="text/css">
        html, body {
            height: 100%;
        }
        #wrapper {
            min-height: 100%;
            padding-bottom: 79px;
            margin-bottom: -79px;
        }
        main.jumbotron {
            background-color: transparent;
        }
        footer.jumbotron {
            padding: 20px 0;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header class="jumbotron">
            <div class="container">
                <h1>Dynamische Linkliste</h1>
            </div>
        </header>
        <main class="jumbotron">
            <section class="container">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-tag"></i></span>
                                    <input id="linkTitle" type="text" class="form-control" placeholder="Titel für den Link">
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-link"></i></span>
                                    <input id="linkUrl" type="text" class="form-control" placeholder="Link URL">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <button id="linkAdd" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Link hinzufügen</button>
                            </div>
                        </div>
                    </div>
                </div>
                <ul id="linkList" class="list-group"></ul>
            </section>
        </main>
    </div>
    <footer class="jumbotron">
        <div class="container">
            <h4>FOOTER</h4>
        </div>
    </footer>
    <script type="text/javascript">
        window.addEventListener("load", function() {
            var links = (localStorage.getItem("links") === null) ? [] : JSON.parse(localStorage.getItem("links"));
            links.forEach(function(link) {
                var a = document.createElement("a");
                a.appendChild(document.createTextNode(link.title));
                a.href = link.url;
                a.className = "list-group-item";
                document.getElementById("linkList").appendChild(a);
            });

            var linkTitle = document.getElementById("linkTitle"), linkUrl = document.getElementById("linkUrl"), linkAdd = document.getElementById("linkAdd");
            linkAdd.addEventListener("click", function() {
                links.push({title: linkTitle.value, url: linkUrl.value});
                localStorage.setItem("links", JSON.stringify(links));
                location.reload();
            });
        });
    </script>
</body>
</html>
 
Die dynamische Linkliste von bodo sieht schon mal sehr gut aus. Danke dafür.
Problem ist, dass nach Eingabe der Daten und Klick auf den Button nichts geschiet.
JavaScript ist aktiviert.
Nutze Internet Explorer 10
 
Kleines Update:
Ich hatte die Lösung mit dem Django Webserver getestet und dort hat es dann funktioniert.
Gibt es eine Möglichkeit zum Löschen dieser Links?
 
Die Links werden nicht serverseitig gespeichert, sondern im localStorage des User abgelegt, der sie erstellt hat. Wenn du das richtig machen willst, musst du per AJAX das Model updaten.
 
Wieso versteht das Web nicht, dass HTML eine Auszeichnungssprache ist, und nicht ein Script?! Ok, man könnte sagen, dass HTML5 zu einer Komm-wir-machen-jetzt-JavaScript-Variante wird, aber normales HTML ist doch nicht das gleiche wie PHP, JS oder was auch immer? Ich mein' nicht 'böse', aber zuerst informieren bevor mans teilweise lernt ist auch nicht schlecht. Ok, zugegeben, als ich anfing bezeichnete ich es anfangs auch als Programmieren oder Scripting ...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben