Błąd w javascript

Question

Z jakiegoś powodu, po dodaniu tej linijki

else document.getElementById("Wypełnienie1W").style.width = pasek + "px";

ten kod przestaje działać

function czasMuzyka() {
	var teraz = new Date();
	var czasTeraz = (teraz.getHours() * 3600 + teraz.getMinutes() * 60 + teraz.getSeconds()) % 174;
	var pasek = czasTeraz * 100 / 174;
	
	if (czasTeraz < 7) document.getElementById("WidgetMiniPasek1").style.width = "4px";
	else document.getElementById("WidgetMiniPasek1").style.width = pasek + "px";
	
	pasek = czasTeraz * 274 / 174;
	
	if (czasTeraz < 7) document.getElementById("Wypełnienie1W").style.width = "4px";
	else document.getElementById("Wypełnienie1W").style.width = pasek + "px";
	
	var sekunda = czasTeraz % 60;
	var minuta = (czasTeraz - sekunda) / 60;
	
	if (sekunda < 10) sekunda = "0" + sekunda;
	
	document.getElementById("WidgetMiniTekst1").innerHTML = "<b>" + minuta + ":" + sekunda + "</b>";
	setTimeout("czasMuzyka()", 1000);
}

Co może być tego przyczyną?

Comments

Czy jest jakiś błąd w konsoli?

---

Uncaught TypeError: Cannot read properties of null (reading 'style')
    at czasMuzyka (Zegar.js:93:47)
    at onload (P1.html:42:83)
czasMuzyka @ Zegar.js:93
onload @ P1.html:42

---

Czy element o ID "Wypełnienie1W" jest w DOM w momencie, gdy skrypt się wykonuje?

---

Ogólnie skrypt ten jest w zewnętrznym pliku i używany jest do dwóch plików html, w jednym nie działa jednak wcale, a w drugim psuje się, po dodaniu tej linijki, niezależnie, czy ten element tam jest, czy nie

---

Spróbuj dodać atrybut defer - jeśli to pomoże, to znaczy, że jednak tego elementu nie ma w DOM, gdy skrypt go szuka.

---

@Dawidziu, jako ciekawostkę

if (sekunda < 10) sekunda = "0" + sekunda;

sekunda.toString().padStart(2, '0')

`${sekunda}`.padStart(2, '0')

 

Answer 1

Błąd polega na tym, że użyto nieprawidłowej nazwy identyfikatora elementu HTML ("Wypełnienie1W"). Identyfikatory powinny zawierać tylko znaki alfanumeryczne oraz podkreślnik lub myślnik, a nie polskie znaki diakrytyczne.

Comments

Użycie polskich znaków diakrytycznych w identyfikatorze elementu HTML może spowodować błędy i problemy z jego poprawnym działaniem. Dlatego zaleca się unikanie ich w nazwach identyfikatorów i zamiast tego używać znaków alfanumerycznych.

Ten kod np. na "chromie" działa

<style>
  div {
    width: 0;
    height: 2em;
    background-image: linear-gradient(90deg, darkgreen 5%, lime, darkgreen 95%);
    transition: width 200ms;
  }
</style>
<div id="Wypełnienie1W"></div>

<script>
  const d = document.getElementById("Wypełnienie1W");
  let pasek = 10;
  setInterval(() => {
    d.style.width = ((pasek > 600)? pasek = 10 : pasek+=10) + "px";
  }, 150);
</script>

 

IMHO problem jest z ..., jak opisał to @ScriptyChris

Czy element o ID "Wypełnienie1W" jest w DOM w momencie, gdy skrypt się wykonuje?