複数のcanvasを独立して動かしたい。js

２つのcanvas>独立して動かしたい。

jsで２つのcanvasを用意することまでは出来たのですが，タップした回数を表示するカウンターの部分が独立しません。数字を入れ替えても同様の症状が発生します。

該当のソースコード

html
1<html lang="ja"><head>
2<meta charset="UTF-8">
3<title>タップした場所</title>
4<style>
5canvas { border: 1px solid black; }
6</style>
7</head>
8<body onload="draw();">
9<canvas id="tutorial2" width="200" height="200"></canvas>
10<canvas id="tutorial3" width="200" height="200"></canvas>
11
12<script>
13canvas= document.getElementById('tutorial2');
14ctx2= canvas.getContext('2d');
15canvas.addEventListener('click', (e) => {
16let rect = e.target.getBoundingClientRect();
17let XX = e.clientX - Math.floor(rect.left) - 0;
18let YY = e.clientY - Math.floor(rect.top) - 0;
19ctx2.fillRect(XX, YY,10, 10);
20});
21</script>
22<img id="tutorial2">
23<div id="piyo2">
24</div>
25
26<script>
27var i = 1;
28document.getElementById("tutorial2").onclick = function(){
29document.getElementById("piyo2").innerHTML=i++;
30};
31</script>
32
33<script>
34canvas= document.getElementById('tutorial3');
35ctx3= canvas.getContext('2d');
36canvas.addEventListener('click', (e) => {
37let rect = e.target.getBoundingClientRect();
38let XX = e.clientX - Math.floor(rect.left) - 0;
39let YY = e.clientY - Math.floor(rect.top) - 0;
40ctx3.fillRect(XX, YY,10, 10);
41});
42</script>
43<img id="tutorial3">
44<div id="piyo3">
45</div>
46
47<script>
48var i = 1;
49document.getElementById("tutorial3").onclick = function(){
50document.getElementById("piyo3").innerHTML=i++;
51};
52</script>
53
54</body>
55</html>

行動規範の内容に同意します

回答2件

ベストアンサー

同じページ内で同じidを使いましてはいけません
（そもそもimgいるのでしょうか？）
とりあえずこんな感じで

javascript
1<style>
2canvas { border: 1px solid black; }
3</style>
4<script>
5window.addEventListener('DOMContentLoaded', ()=>{
6  [2,3].forEach(x=>{
7    const canvas=document.querySelector(`#tutorial${x}`);
8    let count=0;
9    const ctx= canvas.getContext('2d');
10    canvas.addEventListener('click', (e) => {
11      const rect = e.target.getBoundingClientRect();
12      const XX = e.clientX - Math.floor(rect.left) - 0;
13      const YY = e.clientY - Math.floor(rect.top) - 0;
14      ctx.fillRect(XX, YY,10, 10);
15      document.querySelector(`#piyo${x}`).textContent=++count;
16    });
17  });
18  });
19</script>
20<canvas id="tutorial2" width="200" height="200"></canvas>
21<canvas id="tutorial3" width="200" height="200"></canvas>
22<img>
23<div id="piyo2"></div>
24<img>
25<div id="piyo3"></div>

投稿2022/12/08 04:36

yambejp

総合スコア117674

aki111111

2022/12/08 10:57

こんなにもスマートにまとめることができるのですね。質問した部分以外も勉強になりました。ありがとうございました。

行動規範の内容に同意します

js
1var i = 1;
2document.getElementById("tutorial2").onclick = function(){
3document.getElementById("piyo2").innerHTML=i++;
4};
5
6...
7
8var i = 1;
9document.getElementById("tutorial3").onclick = function(){
10document.getElementById("piyo3").innerHTML=i++;
11};