Exercice : Ping pong

Question

Compléter le programme JS ci-après afin qu'il ait comme comportement :

  • lorsque l'on clique sur Ping alors le cadre Ping s'allume en rouge et le cadre Pong d'éteint en noir

  • lorsque l'on clique sur Pong alors le cadre Pong s'allume en rouge et le cadre Ping d'éteint en noir

1
<!DOCTYPE html>
2
<html lang="fr">
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Exercice</title>
6
    <link rel="stylesheet" type="text/css" href="style.css">
7
    <script src="script.js" defer></script>
8
  </head>
9
  <body>
10
    <div class="ping">Ping</div>
11
    <div></div>
12
    <div class="pong">Pong</div>
13
  </body>
14
</html>
15
1
body {
2
  display: flex;
3
}
4
div {
5
  flex: 1;
6
}
7
.ping, .pong {
8
  flex: 1;
9
  font: 300% sans-serif;
10
  text-align: center;
11
  background-color: #d1d1d1;
12
  border-style: dotted;
13
}
14
1
// something missing here...
2
3
ping.addEventListener('click', playPing)
4
pong.addEventListener('click', playPong)
5
6
function playPing() {
7
  ping.style.color = 'red'
8
  pong.style.color = 'black'
9
}
10
11
function playPong() {
12
  //TODO
13
}
14
Solution
1
let ping = document.querySelector('.ping')
2
let pong = document.querySelector('.pong')
3
4
ping.addEventListener('click', playPing)
5
pong.addEventListener('click', playPong)
6
7
function playPing() {
8
  ping.style.color = 'red'
9
  pong.style.color = 'black'
10
}
11
12
function playPong() {
13
  ping.style.color = 'black'
14
  pong.style.color = 'red'
15
}
16