Question

我创建了一个小的基本Javascript，它将使用箭头图像更改图像。下面是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="styles/styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Alata&display=swap" rel="stylesheet">
    <title>Title</title>
</head><body>
<img class="draw" src="images/website-drawing-scan.png" alt="Main">
<h1>New idea!</h1>
<img class="left" src="images/left.png" height="50" width="40" style="float: left" alt="Left"> <img class="right" src="images/right.png" height="50" width="40" style="float: right" alt="Right">
<p>Hello! This is John with a trial test new website! Try this and you might soon be able to finish their work. </p>

<ul>
    <li>First thing to do</li>
    <li>Second thing to do</li>
    <li>Third thing to do!</li>
</ul>
</body>
<script src="scripts/main.js"></script>
</html>

下面是脚本main.js

let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello World!";

let myImage = document.querySelector("draw");

let left = document.querySelector("img.left");
let right = document.querySelector("img.right");

left.onclick = function () {
    if (myImage.getAttribute("src") === "images/website-drawing-scan.png") {
        alert("No more images!");
    } else {
        let width = myImage.width;
        let height = myImage.height;
        myImage.setAttribute("src", "images/firefox.png");
        myImage.setAttribute("width", width);
        myImage.setAttribute("height", height);
    }
};

right.onclick = function () {
    if (myImage.getAttribute("src") === "images/firefox.png") {
        alert("No more images!");
    } else {
        myImage.setAttribute("src", "images/website-drawing-scan.png");
    }
};

现在，每当我单击箭头（left.png）或（right.png）时，在编写代码以根据左箭头单击更改图像时都不会发生任何事情。有人可以帮我吗？

Answer 1

我怀疑您的选择器不起作用，因为没有draw这样的HTML元素，您可能想要img.draw

let myImage = document.querySelector("draw");

通常，您应该能够通过验证代码在做什么来自己解决此类问题，即用正确的值填充变量。一个简单的console.log(myImage)可能会向您显示问题

Answer 2

您正在尝试为变量draw选择一个名为myImage的元素。您正在寻找的是一个类名称为draw的元素。您需要将querySelector('draw')更改为querySelector('.draw')

我还更改了onClick函数以使用箭头功能，以确保可以从当前上下文访问该变量。

let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello World!";

let myImage = document.querySelector("img.draw");

let left = document.querySelector("img.left");
let right = document.querySelector("img.right");

left.onclick = () => {
    if (myImage.getAttribute("src") === "images/website-drawing-scan.png") {
        alert("No more images!");
    } else {
        let width = myImage.width;
        let height = myImage.height;
        myImage.setAttribute("src", "images/firefox.png");
        myImage.setAttribute("width", width);
        myImage.setAttribute("height", height);
    }
};

right.onclick = () =>  {
    if (myImage.getAttribute("src") === "images/firefox.png") {
        alert("No more images!");
    } else {
        myImage.setAttribute("src", "images/website-drawing-scan.png");
    }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="styles/styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Alata&display=swap" rel="stylesheet">
    <title>Title</title>
</head><body>
<img class="draw" src="images/website-drawing-scan.png" alt="Main">
<h1>New idea!</h1>
<img class="left" src="images/left.png" height="50" width="40" style="float: left" alt="Left"> <img class="right" src="images/right.png" height="50" width="40" style="float: right" alt="Right">
<p>Hello! This is John with a trial test new website! Try this and you might soon be able to finish their work. </p>

<ul>
    <li>First thing to do</li>
    <li>Second thing to do</li>
    <li>Third thing to do!</li>
</ul>
</body>
<script src="scripts/main.js"></script>
</html>

Answer 3

我不知道这是否是JavaScript代码上的打印错误，但是您在查询选择器上错过了一个点。应该是：

let myImage = document.querySelector（“。draw”）;

有效的CSS选择器。

document.querySelector

无法基于onClick更改图像

3 个答案: