我找不到让 2 分钟/5 分钟按钮工作的错误。我能够找到几个错误，但是当我去测试时没有任何改变。我没有收到任何错误，所以我遇到了一些麻烦，我认为有人可以提供帮助。
我认为问题出在 Javascript 的第 10-33 行附近。但是，出于测试目的，我包括了所有 3 个（html、js、css）。
const app = () => {
const song = document.querySelector('.song');
const play = document.querySelector('.play');
const outline = document.querySelector('.moving-outline circle');
const video = document.querySelector('.vid-container video');
//sounds
const sounds = document.querySelectorAll('.sound-picker button');
//time display = h3 - html
const timeDisplay = document.querySelector('.time-display');
const timeselect = document.querySelectorAll('.time-select button');
//Get the length of the outline
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//Play Sound
play.addEventListener("click", () => {
checkPlaying(song);
});
//Select sound
timeselect.forEach(option => {
option.addEventListener('click', function() {
fakeDuration = this.getattribute("data-time");
timeDisplay.textContent = `${Math.floor(fakeDuration / 60)}:${Math.floor(
fakeDuration % 60
)}`;
});
});
// A function to stop and play the sounds
const checkPlaying = song => {
if (song.paused) {
song.play();
video.play();
play.src = './svg/pause.svg';
} else {
song.pause();
video.pause();
play.src = './svg/play.svg';
}
};
// Animate the circle
song.ontimeupdate = () => {
let currentTime = song.currentTime;
let elapsed = fakeDuration - currentTime;
let seconds = Math.floor(elapsed % 60);
let minutes = Math.floor(elapsed / 60);
//Animate the circle
let progress = outlineLength - (currentTime / fakeDuration) * outlineLength;
outline.style.strokeDashoffset = progress;
//Animate the text
timeDisplay.textContent = `${minutes}:${seconds}`;
};
};
app();* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app {
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.time-select,
.sound-picker,
.player-container {
height: 80%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.player-container {
position: relative;
}
.player-container svg {
position: absolute;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.time-display {
position: absolute;
bottom: 10%;
color: white;
font-size: 50px;
}
video {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
z-index: -10;
}
.time-select button,
.sound-picker button {
color: white;
width: 30%;
height: 10%;
background: none;
border: 2px solid white;
cursor: pointer;
font-size: 20px;
transition: all 0.5s ease;
}
.time-select button:hover {
color: black;
background: White;
}
.sound-picker button {
border: none;
height: 120px;
width: 120px;
padding: 30px;
}
.sound-picker button:nth-child(1) {
background: #4972a1
}
.sound-picker button:nth-child(2) {
background: #a14f49;
}
.sound-picker button img {
height: 100%;
}<!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">
<link rel="stylesheet" href="./style.css"></link>
<title> Meditation App </title>
</head>
<body>
<div class="app">
<div class="vid-container">
<video loop>
<source src="./video/rain.mp4" type="video/mp4"/>
</video>
</div>
<div class="time-select">
<button data-time="120"> 2 minutes</button>
<button data-time="300"> 5 minutes</button>
<button data-time="600"> 10 minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="./sounds/rain.mp3"/>
</audio>
<img src="./svg/play.svg" alt="Play" class="play">
<svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle
cx="226.5"
cy="226.5"
r="216.5"
stroke="white"
stroke-width="20"
/>
</svg>
<svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle
cx="226.5"
cy="226.5"
r="216.5"
stroke="#018EBA"
stroke-width="20"
/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="./sounds/rain.mp3" data-video="./video/rain.mp4">
<img src="./svg/rain.svg" alt="rain">
</button>
<button data-sound="./sounds/beach.mp3" data-video="./video/beach.mp4">
<img src="./svg/beach.svg" alt="beach"/>
</button>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>一如既往，感谢所有帮助。
鼠标左键点击 2 分钟和 5 分钟倒计时不起作用。我在点击播放按钮之前和之后都尝试过。找到了几个“问题”，但没有一个影响代码运行/使用 2/5 分钟按钮给出了预期的愿望。
你这里有错误
fakeDuration = this.getattribute("data-time");
你应该把'a'写成大写字母，像这样：
fakeDuration = this.getAttribute("data-time");