• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Uncaught TypeError: Cannot set property 'innerHTML' of null

VPS Starter Arubacloud
0 głosów
1,024 wizyt
pytanie zadane 29 czerwca 2018 w JavaScript przez wiktoz Mądrala (7,040 p.)
zamknięte 30 czerwca 2018 przez wiktoz

Witam,

zamysł skryptu jest taki, żeby po naciśnięciu przycisku wykonał się ajax, który dodaje rekord do bazy danych, a napis na przycisku się zmienia.

Wyświetlam za pomocą PHP (w pętli) przyciski

$i = 0;
while($row = $result->fetch_assoc())
{
    $addid = $row['id'];
    $result2 = $connect->query("SELECT * FROM requests WHERE (id_inviting='$id' OR  id_inviting='$addid') 
    AND (id_invited='$id' OR id_invited='$addid') AND flag='1'");
    
    $result3 = $connect->query("SELECT * FROM requests WHERE id_inviting='$id' 
    AND id_invited='$addid' AND flag='0'");
    
    echo "<div class='resultbuttonbox'>";
    
    if(($result2->num_rows)==1) 
    echo "<div id='resultbuttongrey divnumber".$i."'><button class='addfriendgrey' onclick='remove(".$addid.",".$id.",".$i.")'>
    <i class='icon-user-delete'></i>Usuń znajomego</button></div>";
    
    elseif(($result3->num_rows)==1) echo "<div id='resultbuttongrey divnumber".$i."'><button class='addfriendgrey' onclick='remove(".$addid.",".$id.",".$i.")'>
    <i class='icon-spin1'></i>Anuluj zaproszenie</button></div>";
    
    elseif($addid==$id) echo "<div class='resultyou'>Ty</div>";
    
    else echo "<div id='resultbutton divnumber".$i."'><button class='addfriend' onclick='addfriend(".$addid.",".$id.",".$i.")'>
    <i class='icon-user-add'></i>Dodaj znajomego</button></div>";
    
    echo "</div>";
    
    $i++;
}

a moje funkcje w js wyglądają tak:

function addfriend(id,cid,i){
			$.ajax({
				url: "../query/add.php",
				data: {id: id, cid: cid},
				type: "GET",
				success: function(i){
					console.log("good");
					document.getElementById("'divnumber" + i + "'").innerHTML = "Wysłano zaproszenie!";
			},
			error: function(){
				console.log("error");
			}
		});
	}
			
	function remove(idremove,cidremove,i){
		$.ajax({
			url: "../query/remove.php",
			data: {idremove: idremove, cidremove: cidremove},
			type: "GET",
			success: function(i){
				console.log("good");
				document.getElementById("'divnumber" + i + "'").innerHTML = "Usunięto ze znajomych!";
			},
			error: function(){
					console.log("error");
			}
		});
	}

próbowałem dodać kod JS na sam dół body i nadal nie działa :(

Błąd, który się wyświetla, to: Uncaught TypeError: Cannot set property 'innerHTML' of null.

Proszę o pomoc!

komentarz zamknięcia: Rozwiązane!
1
komentarz 29 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Po pierwsze sformatuj ten kod w normalny sposob. Na co tyle tych spacji? I dodaj entery zeby nie trzeba bylo scrollowac w bok. Po drugie sprawdz id po ktorych szukasz w JavaScripcie
1
komentarz 29 czerwca 2018 przez Trisoft Początkujący (490 p.)
W document.getElementById  wystarczy ze napiszesz "divnumber"+i
komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)

@Trisoft, to już poprawiłem, ale to nic nie zmienia: nadal występuje problem.

@Alex.Ironside, bez sensu się czepiasz do jakiś głupot...

1
komentarz 29 czerwca 2018 przez Mariusz08 Maniak (62,300 p.)
@wiktoz, nie on nie czepia się głupot, to są ważne rzeczy. Zresztą przekonasz się o tym w Twojej pierwszej pracy lub jak będziesz chciał "przeczytać" kod innej osoby.
komentarz 29 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)

@wiktoz,  jak chcesz mozemy sie pobawic w zwykle chamstwo i bezczelnosc ale dam Ci jeszcze jedna szanse i wytlumacze. Wyobraz sobie czytac taki kod w edytorze. Srednio co nie? A Ty znasz ten kod i wiesz co robi i jak. My nie. Wiec w TWOIM interesie jest zaprezentowac ten kod jak najladniej zeby innym jak najlatwiej bylo sie w nim polapac. Nikt nie ma tutaj oboziazku rozwiazywac Twoich problemow za Ciebie, wiec jak ktos zobaczy taki syf jaki byl oryginalnie cofnie sie z zadania i rozwiaze jakies gdzie kod jest sformatowany, bo nie musi spedzac tych 3 min poprawiajac go.

komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)
Poprawiłem. Mam nadzieję, że jest już czytelny dla Was ;)
komentarz 29 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
W ktorej linijce budujesz Id z ktorego pozniej korzystasz w JS?
komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)
W linii 14, 17 lub 22 - zależy od tego jaki if się wykona przez id "divnumber+numer"
komentarz 29 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)

Sprobuj dodac w JS cos takiego

console.log(idremove,cidremove,i)

I pokaz co sie dzieje

komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)
Wyświetla: 3 1 1
komentarz 29 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)

Hm. Ten blad oznacza ze document.getElementById() zwraca null, czyli takiego id nie ma w htmlu. Sprobuj zrobic cos takiego w JS

console.log(document.getElementById("'divnumber" + i + "'"))

 

komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)
Wyświetla: null
komentarz 29 czerwca 2018 przez maly Nałogowiec (37,190 p.)
id w html nie może mieć białych znaków (spacje, tabulatory, itp).
komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)
Nawet jak usunę "resultbuttongrey" i zostanie samo <div id='divnumber".$i."'></div> to i tak nie działa
komentarz 29 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)

@maly, Jezeli bedzie spacja w id to po prostu beda to 2 id. Np id="ziemniak papryka" bedzie znajdywane pod #ziemniak i pod #papryka i pod #ziemniak#papryka

1
komentarz 29 czerwca 2018 przez maly Nałogowiec (37,190 p.)

@Alex.Ironside

Nie prawda, id brane jest jako całość a nie jako pojedyńcze elementy.

<div id="ala ola"></div>

<script>
alert(document.getElementById("ala"));
alert(document.getElementById("ola"));
alert(document.getElementById("ala ola"));
</script>

 

komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)
Tylko, że to teraz nie ma nic do rzeczy, bo i tak kod nie działa nawet z poprawnym id.
komentarz 29 czerwca 2018 przez maly Nałogowiec (37,190 p.)

Może pokaż co zmieniłeś.

<div id='divnumber1'><button class='addfriendgrey' onclick='remove(666,3,1)'><i class='icon-user-delete'></i>Usuń znajomego</button></div>
<div id='divnumber2'><button class='addfriendgrey' onclick='remove(666,3,2)'><i class='icon-user-delete'></i>Usuń znajomego</button></div>
<div id='divnumber3'><button class='addfriendgrey' onclick='remove(666,3,3)'><i class='icon-user-delete'></i>Usuń znajomego</button></div>

<script>
function remove(idremove,cidremove,i){
	document.getElementById("divnumber" + i).innerHTML = "Usunięto ze znajomych!";
}
</script>

 

komentarz 29 czerwca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)

@maly, Rzeczywiscie masz racje. Sorry myslalem ze id zachowuje sie jak class pod tym wzgledem

komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)

Daję obecny kod

if(($result2->num_rows)==1) 
echo "<div id='divnumber".$i."'><button class='addfriendgrey' onclick='remove(".$addid.",".$id.",".$i.")'>
<i class='icon-user-delete'></i>Usuń znajomego</button></div>";

elseif(($result3->num_rows)==1) 
echo "<div id='divnumber".$i."'><button class='addfriendgrey' onclick='remove(".$addid.",".$id.",".$i.")'>
<i class='icon-spin1'></i>Anuluj zaproszenie</button></div>";

elseif($addid==$id) echo "<div class='resultyou'>Ty</div>";

else echo "<div id='divnumber".$i."'><button class='addfriend' onclick='addfriend(".$addid.",".$id.",".$i.")'>
<i class='icon-user-add'></i>Dodaj znajomego</button></div>";
function addfriend(id,cid,i){
	$.ajax({
		url: "../query/add.php",
		data: {id: id, cid: cid},
		type: "GET",
		success: function(i){
			console.log("good");
			document.getElementById("'divnumber"+i+"'").innerHTML = "Wysłano zaproszenie!";
		},
		error: function(){
				console.log("error");
		}
	});
}
			
function remove(idremove,cidremove,i){
	$.ajax({
		url: "../query/remove.php",
		data: {idremove: idremove, cidremove: cidremove},
		type: "GET",
		success: function(i){
			console.log("good");
			document.getElementById("'divnumber"+i+"'").innerHTML = "Usunięto ze znajomych!";			
		},
		error: function(){
				console.log("error");
		}
	});
}

 

komentarz 29 czerwca 2018 przez maly Nałogowiec (37,190 p.)
getElementById  jest zły, przyjrzyj się jak ja to napisałem.
komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)

Ten Twój sposób też nie działa, ale zauważyłem pewną właściwość: gdy napiszę tak jak poniżej to wszystko działa

document.getElementById("divnumber1").innerHTML = "Dodano do znajomych!";

ale jak chcę już ze zmienną to nie idzie :/ coś musi być w tym zapisie w nawiasie źle...

komentarz 29 czerwca 2018 przez Chess Szeryf (76,710 p.)

@wiktoz, z czym teraz jest problem? Przecież @maly napisał jak ma wyglądać argument w nawiasie.

komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)
Problem taki, że "divnumber" +i nadal nie działa
komentarz 29 czerwca 2018 przez Mariusz08 Maniak (62,300 p.)
Pokaż jak to robisz
komentarz 29 czerwca 2018 przez wiktoz Mądrala (7,040 p.)

Ustaliłem przed chwilą, że jest to wina tego, że zmienna 'i' w ogóle nie dociera do tej funkcji.

Daję jeszcze raz aktualny kod

function remove(idremove,cidremove,i){
	$.ajax({
		url: "../query/remove.php",
		data: {idremove: idremove, cidremove: cidremove},
		type: "GET",
		success: function(i){
			console.log("good");
			document.getElementById("divnumber"+i).innerHTML = "Usunięto ze znajomych!";
		},
		error: function(){
				console.log("error");
		}
	});
}
echo "<div id='divnumber".$i."'><button class='remove' onclick='remove(".$addid.",".$id.",".$i.")'>
<i class='icon-user-add'></i>Usuń znajomego</button></div>";

 

komentarz 30 czerwca 2018 przez wiktoz Mądrala (7,040 p.)

Dobra zrobiłem to tak i działa:

success: document.getElementById("divnumber"+i).innerHTML = "Usunięto ze znajomych!",

usunąłem po prostu zbyteczną funkcję i działczy ;)

Podobne pytania

0 głosów
1 odpowiedź 481 wizyt
0 głosów
1 odpowiedź 448 wizyt
pytanie zadane 7 października 2020 w JavaScript przez Casia Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 5,567 wizyt
pytanie zadane 21 marca 2017 w JavaScript przez Seabool Nowicjusz (150 p.)

92,454 zapytań

141,262 odpowiedzi

319,092 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...