Javascript - błąd - zamiana małych liter na duże

pytanie zadane 3 lutego 2017 w JavaScript przez lukasz1390 Użytkownik (500 p.)

Witam. Mam taką funkcję w formularzu rejestracji:

<script>
	function litery() {
  var a = document.getElementById('imie')
  var b = document.getElementById('nazwisko')
  document.getElementById('imie').value  = a.charAt(0).toUpperCase() + a.slice(1);
   document.getElementById('nazwisko').value  = b.charAt(0).toUpperCase() + b.slice(1);
}
	</script>
</head>
<body>
<br><br>
	<form  method="post">
<input type="text" placeholder="Imię"  id=" imie" value="" name="imie" onchange="litery()" >
<br><br>
<input type="text" placeholder="Nazwisko " value="" name="nazwisko" id="nazwisko"  onchange="litery()" >
<br><br>

Sprawdzałem "na krótko" czyli na samych inputach i funkcja działa. Jednak po dodaniu jej do formularza konsola wyrzuca taki błąd :

Uncaught TypeError: Cannot read property 'charAt' of null
at litery (rejestracja.php:37)
at HTMLInputElement.onchange (rejestracja.php:50)

Z czym to się wiąże? Nie wiem dlaczego ta sama funkcja nie działą w 2 różnych miejscach. ID i nazwy się zgadzają..

1 odpowiedź

odpowiedź 3 lutego 2017 przez Szymon Lisowiec Mądrala (7,150 p.)

var a = document.getElementById('imie') //dopisz .value, to samo z b

komentarz 3 lutego 2017 przez lukasz1390 Użytkownik (500 p.)

Teraz znowu coś takiego:

Uncaught TypeError: Cannot read property 'value' of null

komentarz 3 lutego 2017 przez adrian17 Ekspert (344,860 p.)

Najwyraźniej nie masz obiektu o ID "imie".

1	komentarz 3 lutego 2017 przez Vento Pasjonat (17,120 p.) P. S. https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

komentarz 3 lutego 2017 przez Szymon Lisowiec Mądrala (7,150 p.)

Najlepiej zrób tak:

<input type="text" placeholder="Imię"  id=" imie" value="" name="imie" onchange="this.value  = this.value.charAt(0).toUpperCase() + this.value.slice(1)" >

Dlatego, że przy twoim skrypcie i kolejnym takim inputcie będziesz musiał dodać kolejne linijki do funkcji, która wykonuje się dla wszystkich inputów przy edycji jednego.

Jeszcze lepiej (poprawniej) było by dać addEventListener zamiast onchange, ale nie wiem na jakim jesteś poziomie i nie chcę dawać Ci "funkcji z kosmosu".

komentarz 3 lutego 2017 przez lukasz1390 Użytkownik (500 p.)

onchange="this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1)"

Działa :) Dziękuję za pomoc :)

komentarz 3 lutego 2017 przez xmentor Nałogowiec (49,520 p.)

Jeszcze lepiej (poprawniej) było by dać addEventListener zamiast onchange, ale nie wiem na jakim jesteś poziomie i nie chcę dawać Ci "funkcji z kosmosu".

Od początku powinno się uczyć prawidłowego podpinania zdarzeń, nie są to jakieś funkcje z kosmosu.

komentarz 3 lutego 2017 przez Szymon Lisowiec Mądrala (7,150 p.)

Jeżeli już zaczął uczyć się na eventach przez tagi html, to niech ogarnie to. Jak będzie szedł dalej w Javascript, to zrozumie,że powinien robić to inaczej.