undefined value w funkcji javascript

pytanie zadane 5 października 2019 w JavaScript przez TomekN Początkujący (330 p.)
edycja 5 października 2019 przez TomekN

Cześć,

Usiłuję przesłać zmienną do funkcji w javascript. Nie mogę ustawić id tej zmiennej (bo chodzi w pętli) i zależy mi na tym bym pobierał konkretną zmienną. Z tego powodu stosuję var id = document.getElementsByName("id").value;

Fragment pętli wygląda następująco:

{

echo "<input type='text'  name='numer' value =".$numer.">";
echo "<button class='button' onclick='edytuj()'>Edytuj</button>";

}

Jak widać w ten sposób chcę wywołać funkcję edytuj.

Funkcja wygląda następująco:

function edytuj(numer){
    var numer = document.getElementsByName("numer").value;
    alert("Wartość numer: "+numer);
}

Niestety, komunikat jaki otrzymuje wygląda "Wartość id: undefined"

Co robię źle?

1 odpowiedź

odpowiedź 5 października 2019 przez Chess Szeryf (76,730 p.)
edycja 5 października 2019 przez Chess

<body style="background: darkgoldenrod;">

<?php
$identifiers = ['hello1','tree1','hello2','tree2'];

foreach($identifiers as $identifier) {
  echo "<div class='elements'>".$identifier."</div>";
}
?>

function edit (val) {
  let el = document.getElementsByClassName('elements');
  for(let i=0;i<el.length;i++) {
    if(el[i].textContent == val) {
      console.log(el[i]);
    }
  }
}

edit('tree1');

</body>

Pamiętaj, że najczęściej jest tak, że kod PHP renderuje się w całości (w uproszczeniu), czyli jest parsowany do ostatniego znaku i tak za każdym przeładowaniem strony. Czyli, jeśli chcesz wziąć id z np. diva, to musisz skrypt JavaScript umieścić pod skryptem PHP.

komentarz 5 października 2019 przez TomekN Początkujący (330 p.)

Nie mogę pobrać id bo zmienna o jakimś id może być tylko jedna na stronie, (nawet jak jest pięć to pobierze z pierwszej). Mnie chodzi, że jak mam na stronie pięć różnych zmiennych o jakimś "name" - to ma mi wyświetlić, którą zmienną nacisnąłem.

komentarz 5 października 2019 przez Chess Szeryf (76,730 p.)

A tak, przepraszam bardzo. Już poprawiłem odpowiedź. Napisz, czy o to chodziło? Wejdź w konsolę przeglądarki i zobacz, co zostało wyrzucone.

komentarz 5 października 2019 przez TomekN Początkujący (330 p.)

Nie do końca. Jednak zawsze jest to wina zadającego pytanie. Dziękuję, że chcesz mi pomóc.

<body style="background: darkgoldenrod;">
<?php 
for ($i=1; $i<10; $i++){
echo "<input type='text'  name='numer' value =".$i.">";
echo "<button class='button' onclick='edytuj()'>Edytuj</button>";
echo "</br>";

}
 ?>
<script>
function edytuj(){
	var numer1 = document.getElementsByName("numer")[0].value;
	alert("Wartość id: "+numer1);
}
</script>
</body>

Uruchom proszę ten kod.

Bez względu na to przy jakiej cyfrze naciśniesz przycisk "edytuj" to wyświetli Ci jedynkę.

Jest to logiczne bo przy var numer1 dałem [0]

Dążę do tego, by jak przycisnę przycisk przy cyfrze 1 wyświetliło mi się "1" a jak nacisnę przy cyfrze 3 to "3" do tego dążę.

komentarz 5 października 2019 przez Tomek Sochacki Ekspert (227,530 p.)

@Chess,

Pamiętaj, że najczęściej jest tak, że kod PHP renderuje się w całości (w uproszczeniu), czyli jest parsowany do ostatniego znaku i tak za każdym przeładowaniem strony. Czyli, jeśli chcesz wziąć id z np. diva, to musisz skrypt JavaScript umieścić pod skryptem PHP.

oj chyba nie :)

Po pierwsze primo to kod PHP wykonuje się na serwerze, a czy do ostatniego znaku czy zakończy się gdzieś wcześniej to już kwestia tego co ma robić i jak to jest zaimplementowane. Następnie serwer wysyła response do klienta gdzie leci plain html i w tym html jest gdzieś znacznik <script> i dopiero wtedy, już client-side, odpalany jest JS.

Nie rozumiem kompletnie co oznacza:

musisz skrypt JavaScript umieścić pod skryptem PHP

jak pisałem, JS to client, a PHP to serwer :)

komentarz 5 października 2019 przez Chess Szeryf (76,730 p.)

<body style="background: darkgoldenrod;">

<?php 
for ($i=1; $i<10; $i++){
  echo "<div>";
  echo "<input type='text' name='number1' value ='".$i."'/>";
  echo "<button class='button'>edit</button>";
  echo "</div>";
}
?>

for(let i=0;i<document.getElementsByClassName('button').length;i++) {
  document.getElementsByClassName('button')[i].onclick = function () {
    document.getElementsByName('number1')[i].value = Number(document.getElementsByName('number1')[i].value) + 10;
  };
}

</body>

@Tomek Sochacki, możliwe, że to co napisałem jest na wyrost, ale dopisałem, że w uproszczeniu. Odnośnie drugiego. Żeby móc dobrać się do elementu musi on istnieć np. w DOM, więc jeśli PHP nie utworzy tych znaczników, to JavaScript nie może się do nich dobrać, bo zwróci undefined, ponieważ wiadomo, że jeszcze nie istnieją, więc są niezdefiniowane.

musisz skrypt JavaScript umieścić pod skryptem PHP.

To oznacza, żeby umieścić kod JavaScript pod kodem PHP.

komentarz 5 października 2019 przez Tomek Sochacki Ekspert (227,530 p.)

więc jeśli PHP nie utworzy tych znaczników, to JavaScript nie może się do nich dobrać, bo zwróci undefined, ponieważ wiadomo, że jeszcze nie istnieją, więc są niezdefiniowane.

bzdura. PHP nie tworzy drzewa DOM - jest ono tworzone podczas parsowania response z serwera gdy client analizuje otrzymanego html. Dlatego skrypty JS najlepiej wrzucać przed zamknięciem body albo w head z atrybutem defer. Ale PHP nie ma tu nic do rzeczy.

komentarz 5 października 2019 przez Chess Szeryf (76,730 p.)

Miałem na myśli, że chyba (ponieważ nie czytałem za wiele teorii o tworzeniu dynamicznie elementów np. HTML i osadzaniu ich na stronie WWW) parser PHP przechodzi po całym kodzie zamkniętym pomiędzy znacznikami <?php, ?>, jeśli jest tam echo "<tag_html>...</tag_html>" - pseudokod, to wtedy po zakończonym parsingu wrzuca te znaczniki do struktury znaczników na danej stronie WWW w przeglądarce. I tak jak napisałeś koniec końców, to front-end musi się z czymś skomunikować, żeby osadzić te tagi w dokumencie, ponieważ jest to coś, co należy do front-endu, nie back-endu.

Tak, wiadomo, że można wymusić zmienienie priorytetów wczytywania się skryptu, czy jak to się tam nazywa, ale nie o tym pisałem.

Dzięki za sprostowanie.

komentarz 5 października 2019 przez Tomek Sochacki Ekspert (227,530 p.)

Owszem, kod PHP gdy trafi na coś takiego to wypluje znaczniki ale to jest tylko plain text, to nie ma kompletnie nic wspólnego z DOM. Drzewko DOM jest tworzone dopiero w przeglądarce podczas analizy kodu od serwera. PHP nie ma w ogóle pojęcia co to DOM bo to jest pewien byt wirtualny dostępny tylko i wyłącznie w przeglądarce.

komentarz 5 października 2019 przez Chess Szeryf (76,730 p.)

Nigdy chyba nie myślałem, o tym w ten sposób. Nie zgłębiałem tej tematyki odnośnie tworzenia elementów wygenerowanych przez serwer. Dopiero po Twojej odpowiedzi zacząłem zdawać sobie z tego sprawę. Ale tak..., po napomknieniu o tym, dopiero doszło do "świadomości", że tak rzeczywiście jest.

Mówiąc szczerze, to nie zastanawiałem się nad tym, tylko miałem na uwadze, że "PHP generuje elementy w dokumencie", a jak to się stricte dzieje, to już się nie doedukowałem.

Zawsze myślałem, "PHP generuje...", a co się później z tym dzieje, gdzie dane trafiają, to już nie. Będę musiał chyba o tym poczytać.