Czemu innerHTML nie działa?

Question

Napisałem kod który powinien zmieniać tekst na inny lecz nie działa jego późniejsza podmiana

var allow = true;	//zmienna przechowująca informację czy jest teraz edytowany jakiś element
    function edit(e){
        if(allow){	//jeśli jakiś element jest wykonywany to kod się nie wykonuje
            allow = false;
            var tekst = e.innerHTML;
            e.id += " editing";	//dodaje id do edytowanego elementu
            e.innerHTML = '<div id="editor"><input type="text" id="texttoedit" style="color:black;" value="'+tekst+'"><br><button onClick="edit_ready(this)">gotowe</button></div>';	//wyświetla pole edycji i guzik
        }
    }
    function edit_ready(e){
        allow = true;
        var tekst = document.getElementById("texttoedit").value;	//zapisywanie do zmiennej nowego tekstu
        document.getElementById("editing").innerHTML = tekst;	//ustawienie nowego tekstu (nie działa)
        document.getElementById("editing").id.replace("editing","");	//usunięcie id (też nie działa)
    }
    

<div onclick="edit(this)">tekst</div>

 

Comments

a patrzyles w ogole co masz w zmiennych? Pierwszy krok to debugowanie kodu w takich sytuacjach.

---

tak patrzyłem i z tego co widziałem wszystko było dobrze

---

nie, nie patrzyłeś :) tylko tak napisaleś, żebym się odczepił :)

document.getElementById("editing").innerHTML = tekst;

a w DOM nie masz elementu o takim ID, bo wcześniej nadajesz elementowi ID = " editing" <- ze spacją. Gdybyś chociażby zrobił console.log na tym elemencie to by wyszło null :)

A to tylko jedna z rzeczy, do poprawy jest więcej ale wysil się troszkę sam i podebuguj, a nie pisz że debugujesz :) (ehh... uwielbiam to - ja nic nie zrobiłem... a potem w git history wsio widać i adnotations ładnie pokazują kto co i jak :)

---

Dzięki z podpowiedź udało mi się to naprawić lecz mam kolejny problem gdy zatwierdzę zmianę i przydzielę do diva onclick z "edi()" (funkcja pomocnicza. Powinno być "edit()") to mi się automatycznie uruchamia. Czy jest coś co mogło by raz pominąć wykonywanie tego lub coś w tym stylu?

function edi(){
			console.log("error");
		}
    function edit(e){
    	if (!document.getElementById("editing")) {
    		e.removeAttribute("onclick");
            var tekst = e.innerHTML;

            (e.id == "") ? e.id = "editing" : e.id += " editing";

            e.innerHTML = '<div id="editor"><input type="text" id="texttoedit" style="color:black;" value="'+tekst+'"><br><button onClick="edit_ready()">gotowe</button></div>';
        }
    }
    function edit_ready(){
        var tekst = document.getElementById("texttoedit").value;
        var e = document.getElementById("editing");
        
		e.setAttribute("onclick", "edi()");  //<<<<<<
        e.innerHTML = tekst;
        (e.id.replace("editing","") == "") ? e.removeAttribute("id") : e.id = e.id.replace("editing","") = "";
    }

 

---

@Tomek Sochacki, Już nie ważne przesiadłem się na jquery i sprawdza się o wiele lepiej. A i  mógł byś dać jakiś komentarz żebym mógł dać ci najlepszą odpowiedź.

---

przesiadłem się na jquery i sprawdza się o wiele lepiej

Jeśli udało Ci się z pomocą biblioteki, a nadal nie wiesz co było problemem, to na dłuższą metę taka nauka ma mało sensu.

---

Panie, sobota wieczór, sprint się kończy trza Jirę pozamykać :)

A tak serio to kolega JSHolic ma rację... spróbuj dojść co było nie tak a pomoże Ci to w nauce

---

@JSHolic, Znalazłem już problem i wszystko działało lecz chciałem zmienić z id na class'y ponieważ dopiero się dopatrzyłem że może być tylko jedno id i było by za mało uniwersalne. A jQuery dużo łatwiej się programuje ma dużo więcej funkcji