Wciśnięcie na obrazek zmienia inny obrazek i wykonuje pewne zadania

pytanie zadane 18 marca 2017 w JavaScript przez Mimoid Użytkownik (760 p.)

Jestem nowy w JavaScript.

Powiedzmy że chcę mieć na stronie 2 obrazki kwadrata, czerwony i niebieski. Po wciśnięciu na kwadrat czerwony ma on zamienić kwadrat niebieski na czerwony i pokazać na stronie sumę liczb 5 i 5.

Analogicznie po wciśnięciu na kwadrat niebieski, czerwony ma się zmienić w niebieski i pokazać różnicę liczb 5 i 5.

Jak to zrobić? Wcześniej robiłem programy w c++ i teraz gdy muszę zrobić jakąś stronę to nie potrafię w odpowiedni sposób połączyć html, javascript, css itp.

2 odpowiedzi

odpowiedź 18 marca 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

odpowiedź 18 marca 2017 przez zgrybus Pasjonat (24,860 p.)

var idObrazka = document.getElementById('obrazek');
idObrazka.addEventListener('click', () => {
   // pobierasz obrazek ( nie wiem czy chcesz z serwera ( ajax )? ) <- tu tkwi szkopuł
   this.src="//sciezka do pliku";
}

komentarz 18 marca 2017 przez Mimoid Użytkownik (760 p.)

Chcę pobierać obrazki z dysku. Zrobiłem coś takiego, oczywiście nie działa, ponieważ z pewnością zrobiłem jakiś karygodnie głupi błąd.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title> 
  <img src="red.png" id="RED" width="60" height="60" alt="red" />
  <img src="blue.png" id="BLUE" width="60" height="60" alt="blue" />
  </head>
  <body>
  
  <script type="text/javascript">
var R = document.getElementById('RED');
var B = document.getElementById('BLUE');
R.addEventListener('click', () => {
   B.src="red.png";
}
  </script>
 
  </body>
  </html>