Question

如何使用SetAttribute？我正在学习JS，并试图从30 Days of JS的课程中脱离出来，以进一步推动我对JS的理解。

基本上，我要做的是点击任何“圆圈”，即显示图像。

我刚开始学习JS。请尽可能以最简单的方式分解，而不是复杂或花哨的解决方案，因为他们不会做任何事情来进一步理解JS。

TIA

这是我的衍生代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Randomy</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="circles">
        <div data-key="81" class="circle">
            <kbd>Q</kbd>
            <span class="img">clap</span>
        </div>
        <div data-key="87" class="circle">
            <kbd>W</kbd>
            <span class="img">hihat</span>
        </div>
        <div data-key="69" class="circle">
            <kbd>E</kbd>
                <span class="img">kick</span>
        </div>
        <div data-key="82" class="circle">
            <kbd>R</kbd>
            <span class="img">openhat</span>
        </div>
        <div data-key="84" class="circle">
            <kbd>T</kbd>
            <span class="img">boom</span>
        </div>


        <img hidden data-key="81" src="img/icecream.jpg" />
        <img hidden data-key="87" src="img/mini-popsicles.jpg" />
        <img hidden data-key="69" src="img/mini-poptarts.jpg" />
        <img hidden data-key="82" src="img/mini-potpie.jpg" />
        <img hidden data-key="84" src="img/rainbow_ring.jpg" />


    <script>
        document.addEventListener("click", myFunction); 

        function myFunction() {
            var oy = document.getElementsByClassName("circles")[0];
            oy.getElementsByClassName("circle")[0].setAttribute("src", "img/mini-popsicles.jpg"); 
        }

    </script>


    </body>

Answer 1

setAttribute在您实施时有效。这里的问题是您正在设置的属性本身。

类circle的元素是div。 Div没有src属性。

<div data-key="81" class="circle">

您有几种方法可以实现您的目标。例如，您可以使用默认情况下不显示的图像（display:none;）然后点击JavaScript，将src属性设置为您想要的属性，并显示它们更改display属性。

否则，您可以在div上使用背景图像在div中显示图像

如何让事件监听器事件单击显示图像？

1 个答案: