żadna funkcja w js nie działa

pytanie zadane 4 lipca 2021 w JavaScript przez Doge Gaduła (3,370 p.)

mam kod html

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container" class="container">
		<div id="resources" class="resources">
			<div id="coins" class="coins">
				<span id="coin" class="coin">0 coins</span>
			</div>
		</div>
		<div id="clicker" class="clicker" onclick="click()">
			<img id="doge" class="doge" width="200" height="200" src="img/doge.png" />
		</div>
	</div>
</body>
</html>

i javascript:

var coins = 0;
window.onload = onload;
function onload()
{
	document.getElementById("coins").innerHTML = '<span id="coin" class="coin">'+coins+' coins</span>';
}
function click()
{
	coins++;
	document.getElementById("coins").innerHTML = '<span id="coin" class="coin">'+coins+' coins</span>';
}

i funkcje w ogóle się nie wywołują. Ani onload ani po kliknięciu. Jedynie kiedy dałem alert na początku pliku js to się wyświetlił. Zamysł kodu jest taki, żeby po kliknięciu na obrazek zwiększała się ilość coinsów. Nie mam pojęcia w czym jest błąd. Byłbym wdzięczny jeżeli ktoś by wytłumaczył

3 odpowiedzi

odpowiedź 4 lipca 2021 przez Bartek030 Obywatel (1,460 p.)
wybrane 4 lipca 2021 przez Doge

Najlepsza

Spróbuj zmienić nazwę funkcji - click i onload to nie najlepszy wybór, w JS mają już swoje zastosowanie

komentarz 4 lipca 2021 przez Doge Gaduła (3,370 p.)

dziękuję, teraz działa, próbowałem wcześniej tylko zmieniać nazwę funkcji onload, lecz nadal nie działało.

komentarz 4 lipca 2021 przez Doge Gaduła (3,370 p.)

@Bartek030,

mam pytanie, dlaczego za każdym razem, gdy załaduję stronę, to wyświetla mi 1 coins zamiast 0?

komentarz 4 lipca 2021 przez Bartek030 Obywatel (1,460 p.)

Jeśli nie zmieniałeś nic w logice kodu to powinno wyświetlić się 0. Natomiast jeśli wywołujesz funkcję już przy załadowaniu strony i w kodzie funkcji masz coins++ przed wyświetleniem wartości to na ekranie zobaczysz już 1.

komentarz 4 lipca 2021 przez Doge Gaduła (3,370 p.)

nawet jeżeli funkcja jest wywoływana tylko poprzez kliknięcie w dany element? bo w funkcji onload jest wyświetlenie, a inkrementacja jest przypisana do zdarzenia onclick

komentarz 4 lipca 2021 przez Bartek030 Obywatel (1,460 p.)

Jeśli nie zmieniłeś logiki kodu względem tego co napisałeś w głównym poście to powinieneś mieć na ekranie 0. Dla pewności sprawdziłem to również u siebie i tak się dzieje.

Jeśli wyświetla Ci się 1 to znaczy, że w jakimś innym miejscu (poza klikaniem w obrazek) wywołujesz tą funkcję , która inkrementuje coins. Może to być na przykład przy zdarzeniu onload, czyli już w momencie ładowania strony funkcja ta jest wywoływana, przez co coins będzie miało wartość 1 i zostanie wyświetlone na ekran.

odpowiedź 4 lipca 2021 przez imklau Nałogowiec (42,090 p.)

1. Jeśli chcesz coś klikać to warto użyć do tego odpowiedniego elementu (np przycisku)

The <button> HTML element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS.

2. Jeśli chodzi o zdarzenia wykonywane na elementach HTML (czyli np klikanie) warto użyć do tego odpowiedniej funkcji - https://developer.mozilla.org/pl/docs/Web/API/EventTarget/addEventListener

Wiem, że tak naprawdę nie rozwiązuję Twojego aktualnego problemu, ale jak poprawisz kod (użyjesz tego o czym napisałam) to powinno wszystko ładnie działać :D

komentarz 4 lipca 2021 przez Doge Gaduła (3,370 p.)

już problem rozwiązany, ale spróbuję również w ten sposób to zrobić

komentarz 4 lipca 2021 przez Wiciorny Ekspert (270,170 p.)

@Noemi, kolega piszę w jQuery, a ty mu DOM :D funkcje podsyłasz.

komentarz 4 lipca 2021 przez Doge Gaduła (3,370 p.)

@Noemi,
a w jaki sposób na buttonie pozbyć się tego białego obramowania na dole obrazka?

komentarz 4 lipca 2021 przez Doge Gaduła (3,370 p.)

@Noemi,

i dlaczego kiedy dam do diva na górze float: left; a do diva pod nim clear: both; to w divie pod spodem usuwa mi margin górny?

2	komentarz 4 lipca 2021 przez Wiciorny Ekspert (270,170 p.) Poczytaj o wpływaniu elementów blokowych na siebie https://pasja-informatyki.pl/programowanie-webowe/metoda-float-left-clear-both/

komentarz 5 lipca 2021 przez VBService Ekspert (253,340 p.)
edycja 5 lipca 2021 przez VBService

@Doge, spróbuj zacząć używać flex lub grid zamiast float.

CSS Flexbox - a useful alternative to div and float

a w jaki sposób na buttonie pozbyć się tego białego obramowania na dole obrazka?

How to remove the extra white space underneath an image using CSS

1	komentarz 6 lipca 2021 przez imklau Nałogowiec (42,090 p.) @Wiciorny, hahahah gdzieee tam jquery jest :D

odpowiedź 5 lipca 2021 przez VBService Ekspert (253,340 p.)
edycja 5 lipca 2021 przez VBService

Jeżeli masz w Twoim kodzie html, taki zapis

<span id="coin" class="coin">0 coins</span>

to nie potrzebujesz wstawiać wartości coins w onload, wystarczy, że zapiszesz zdarzenie click do img-a oraz "odwołaj się" bezpośrednio do elementu id="coin" zamiast wstawiać

... = '<span id="coin" class="coin">'+coins+' coins</span>';

Propozycja

<!DOCTYPE HTML>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="container" class="container">
      <div id="resources" class="resources">
        <div id="coins" class="coins">
          <span id="coin" class="coin">0 coins</span>
        </div>
      </div>
      <div id="clicker" class="clicker">
        <img id="doge" class="doge" width="200" height="200" src="img/doge.png" />
      </div>
    </div>
  </body>
</html>

let coins = 0;

const clicker_img = document.getElementById('doge');
const   coin_span = document.getElementById('coin');

clicker_img.addEventListener('click', () => {
  // możesz też ... ;-)
  // coin_span.textContent = ++coins + ' coin' + ((coins == 1) ? '':'s');
  coin_span.textContent = ++coins + ' coins';
});

[ Funkcja strzałkowa ]