我做一个简单的应用程序，有4个按钮，应该显示图片，如果花。但是当我按下第一个按钮时，什么也没有发生，这个错误弹出lowerPics% c3 % b075__30056__32169.1663778062.120.1280。webp:1 GET http://127.0.0.1:5500/Chapter%201/lowerPics%C3%B075__30056__32169.1663778062.1280.1280.webp 404 (Not Found)
我不知道这是什么，也谷歌一下。
let dendelionSrc =
"flowerPics36075__30056__32169.1663778062.1280.1280.webp";
let rose = "flowerPicssingle-red-rose.jpg";
let tulip = "flowerPicstulip-types-for-spring-garden-1315804-hero-
5 c10c927e00c459eb24c702be447e50d.jpg ";
let mayflower = "flowerPicsMayflowerTrailingArbutus.webp";img {
display: block;
}
button {
margin-top: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Pictures</title>
</head>
<body>
<div>
<img id='picture' width="250" height="250" src="#">
<button id='dendelion' class="btn" onclick="document.getElementById('picture').src =
dendelionSrc">Dendelion</button> //ERROR HERE
<button id="rose">Rose</button>
<button id="tulip">Tulip</button>
<button id="mayflower">Mayflower</button>
</div>
</body>
</html>在JavaScript文件中添加eventListener
- 删除HTML中的事件监听器
<button id='dendelion' class="btn">Dendelion</button>
- 在JavaScript中添加监听器
// Get elements
const pictureImg= document.getElementById('picture');
const dendelionBtn = document.getElementById('dendelion');
// Define listener
function setDendelionImg() {
pictureImg.src = dendelionSrc;
}
// Add listener
dendelionBtn.addEventListener('click', setDendelionImg)