[javascript] 画像をクリックしたらそのURLがテキストボックスに反映されるコード

2023年9月10日2023年9月10日 Bluebear-IO 91 Views 0 Comments

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>