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

Question

How is SetAttribute used? 如何使用SetAttribute？ I'm learning JS, and trying to spin-off from a lesson from 30 Days of JS to push further of my understanding of JS. 我正在学习JS，并尝试从JS的30天课程中汲取教训，以进一步加深我对JS的理解。

Basically, what I'm trying to do is that any of the "circle" is clicked on, that an image shows up. 基本上，我要尝试的是单击任何“圆圈”，从而显示图像。

I'm just starting to learn JS. 我刚刚开始学习JS。 Please, please break it down in the simplest terms possible, and not complicated or fancy solutions since they won't do anything to further my understanding of JS. 请，请用最简单的术语将其分解，而不要使用复杂或花哨的解决方案，因为它们不会做任何事情来加深我对JS的理解。

TIA TIA

Here's my spin-off code: 这是我的衍生代码：

<!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

The setAttribute works as you implemented. setAttribute按照您的实现工作。 The issue here is with the attribute itself that you are setting. 这里的问题是您要设置的属性本身。

Your elements with class circle are divs. 您的课堂circle元素是div。 Div doesn't have a src attribute. Div没有src属性。

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

You have several ways to achieve what you are trying to do. 您可以通过多种方法来实现自己的目标。 For example, you can use images which are not displayed by default ( display:none; ) Then on click with JavaScript set the src attribute to the one you want to, and display them changing the display property. 例如，您可以使用默认情况下不显示的图像（ display:none; ），然后在使用JavaScript单击时，将src属性设置为所需的图像，并通过更改display属性显示它们。

Otherwise, you can use background-images on the div to display an image inside a div 否则，您可以在div上使用background-images在div内显示图像

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

问题描述

1 个解决方案

解决方案1
0 2017-08-26 22:36:30

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

问题描述

1 个解决方案

解决方案1 0 2017-08-26 22:36:30

解决方案1
0 2017-08-26 22:36:30