[javascript] 画像をクリックしたらそのURLがテキストボックスに反映されるコード
data-textboxで判定している
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Click to Textbox</title>
</head>
<body>
<div>
<img id="img1" src="image1.jpg" alt="Image 1" data-textbox="textbox1">
<img id="img2" src="image2.jpg" alt="Image 2" data-textbox="textbox1">
<img id="img3" src="image3.jpg" alt="Image 3" data-textbox="textbox1">
</div>
<div>
<img id="img4" src="image4.jpg" alt="Image 4" data-textbox="textbox2">
<img id="img5" src="image5.jpg" alt="Image 5" data-textbox="textbox2">
<img id="img6" src="image6.jpg" alt="Image 6" data-textbox="textbox2">
</div>
<textarea id="textbox1" rows="4" cols="50"></textarea>
<textarea id="textbox2" rows="4" cols="50"></textarea>
<script>
const images = document.querySelectorAll('img');
const textboxes = document.querySelectorAll('textarea');
images.forEach(img => {
img.addEventListener('click', function () {
const textboxId = this.getAttribute('data-textbox');
const textbox = document.getElementById(textboxId);
if (textbox) {
textbox.value = this.src;
}
});
});
</script>
</body>
</html>
