Text onClick bearbeiten

dsNDesign

dsNDesign

Erfahrenes Mitglied
Hei,
ich habe folgendes vor:
Ich habe einen Text und wenn ich daneben auf "bearbeiten" klicke, soll der Text in ein Edit-Feld umgewandelt werden. Dann soll aus "bearbeiten" "speichern" werden und bei einem Klick auf "speichern" wird aus dem Edit-Feld wieder Text.

Beispiel:
"Text1 - bearbeiten"
nach klick auf bearbeiten:
"[Text1 geändert] - speichern"
nach klick auf speichern:
"Text1 geändert - bearbeiten"

Wie realisiere ich das?

Gruß
 
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Edit textfield</title>
  <script type="text/javascript">
  window.onload = function () {
    var button = document.getElementById('edit-button');
    button.onclick = function () {
      var textfield = document.getElementById('text');
      var parent    = textfield.parentNode;
      
      if(this.innerHTML === 'bearbeiten') {
        this.innerHTML = 'speichern';
        var element = document.createElement('input');
        var value   = document.createAttribute('value');
        var id      = document.createAttribute('id');
        value.nodeValue = textfield.innerHTML;
        id.nodeValue    = 'text';
        element.setAttributeNode(value);
        element.setAttributeNode(id);
        document.getElementsByTagName('body')[0].removeChild(textfield);
        document.getElementsByTagName('body')[0].insertBefore(element, document.getElementById('edit-button'));
      } else {
        this.innerHTML = 'bearbeiten';
        var element = document.createElement('span');
        var id      = document.createAttribute('id');
        element.innerHTML = textfield.value;
        id.nodeValue      = 'text';
        element.setAttributeNode(id);
        document.getElementsByTagName('body')[0].removeChild(textfield);
        document.getElementsByTagName('body')[0].insertBefore(element, document.getElementById('edit-button'));
      }
      
      
      return false;
    }
  }
  </script>
</head>
<body>
  <span id="text">test</span><a href="#" id="edit-button">bearbeiten</a>
</body>
</html>
 
Ok, es gibt noch ein kleines Problem.
Sobald ich das ganze in einen Div packe, erscheint das Textfeld nichtmehr. Der Text (bearbeiten/speichern) wechselt noch, aber das Textfeld bleibt weg.

Wie kann ich das beheben?

Funktioniert nicht:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Edit textfield</title>
  <script type="text/javascript">
  window.onload = function () {
    var button = document.getElementById('edit-button');
    button.onclick = function () {
      var textfield = document.getElementById('text');
      var parent    = textfield.parentNode;
      
      if(this.innerHTML === 'bearbeiten') {
        this.innerHTML = 'speichern';
        var element = document.createElement('input');
        var value   = document.createAttribute('value');
        var id      = document.createAttribute('id');
        value.nodeValue = textfield.innerHTML;
        id.nodeValue    = 'text';
        element.setAttributeNode(value);
        element.setAttributeNode(id);
        document.getElementsByTagName('body')[0].removeChild(textfield);
        document.getElementsByTagName('body')[0].insertBefore(element, document.getElementById('edit-button'));
      } else {
        this.innerHTML = 'bearbeiten';
        var element = document.createElement('span');
        var id      = document.createAttribute('id');
        element.innerHTML = textfield.value;
        id.nodeValue      = 'text';
        element.setAttributeNode(id);
        document.getElementsByTagName('body')[0].removeChild(textfield);
        document.getElementsByTagName('body')[0].insertBefore(element, document.getElementById('edit-button'));
      }
      
      
      return false;
    }
  }
  </script>
</head>
<body>
<div>
  <span id="text">test</span><a href="#" id="edit-button">bearbeiten</a>
</div>
</body>
</html>
 
Gib der div-Box eine ID und ändere dann alle folgenden Zeilen:
Code: 
// vorher
document.getElementsByTagName('body')[0].removeChild(textfield);
document.getElementsByTagName('body')[0].insertBefore(element, document.getElementById('edit-button'));

// nachher
document.getElementById('id-meiner-div-box').removeChild(textfield);
document.getElementById('id-meiner-div-box').insertBefore(element, document.getElementById('edit-button'));
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück