javascript - 为什么使用事件侦听器检测更改时图标类没有更改？
问题描述
我试图自己做这个：https ://codepen.io/codifiedconcepts/pen/bwgxRq
我做了一些调整，但是当我更改下拉菜单中的时间时，图标不会按预期更改。我通过手动更改时间和更改图标对其进行了测试，并且通过添加警报框测试了事件侦听器 - 一切都很好。
但是当我自己去改变下拉菜单时，图标不会改变。我似乎无法让它工作。
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
if(time === wakeTime){
icon.classList.remove('fa-smile');
icon.classList.add('fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time === lunch){
icon.classList.remove('fa-smile');
icon.classList.add('fa-hotdog');
message.textContent = "I'm hungry."
} else if (time === dinner ) {
icon.classList.remove('fa-smile');
icon.classList.add('fa-utensils');
message.textContent = "Can I have more food?";
} else if (time === bed){
icon.classList.remove('fa-smile');
icon.classList.add('fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
icon.classList.add('fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
icon.classList.add('fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
icon.classList.add('fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = wakeSelect.value;
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = lunchSelect.value;
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = dinnerSelect.value;
});<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vanilla JS Clock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<script src="index.js" async defer></script>
</body>
</html>
解决方案
我对您的代码应用了 2 处更改：
wakeTime = parseInt(wakeSelect.value);解析为 int，因为您正在与===（其他值）进行比较- 通过提前列出所有可能的类来删除类列表中的所有设置类：
const classes = ['fa-smile', 'fa-clock', 'fa-hotdog', 'fa-utensils', 'fa-bed'];然后在设置新类之前删除它们，icon.classList.remove(...classes);您可以在 if/else 块之外调用它。但我会把它留给你:)
let wakeTime = 7;
let noon = 12;
let lunch = 12;
let evening = 17;
let dinner = 18;
let bed = 21;
//Setting time up
let showCurrentTime = () => {
const clock = document.getElementById('clock');
let currentTime = new Date();
let hours = currentTime.getHours();
let minutes = currentTime.getMinutes();
let seconds = currentTime.getSeconds();
let meridian = "AM";
if (hours >= noon)
{
meridian = "PM";
}
if (hours > noon)
{
hours = hours - 12;
}
// Set Minutes
if (minutes < 10)
{
minutes = "0" + minutes;
}
// Set Seconds
if (seconds < 10)
{
seconds = "0" + seconds;
}
//Putting it all together
let clockTime = `${hours}:${minutes}:${seconds} ${meridian}!`;
clock.innerText = clockTime;
};
//Getting the clock to update on its own so it changes pictures and messages
let updateClock = () => {
let time = new Date().getHours();
let message = document.getElementById('message');
let icon = document.getElementById('food-icon');
const classes = ['fa-smile', 'fa-clock', 'fa-hotdog', 'fa-utensils', 'fa-bed'];
if(time === wakeTime){
icon.classList.remove(...classes);
icon.classList.add('fa-clock');
message.textContent = 'Wakey wakey!';
} else if (time === lunch){
icon.classList.remove(...classes);
icon.classList.add('fa-hotdog');
message.textContent = "I'm hungry."
} else if (time === dinner ) {
icon.classList.remove(...classes);
icon.classList.add('fa-utensils');
message.textContent = "Can I have more food?";
} else if (time === bed){
icon.classList.remove(...classes);
icon.classList.add('fa-bed');
message.textContent = "YAWN";
} else if (time >= noon ) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.textContent = "Good afternoon!"
} else if (time < noon) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.innerHtml = "Good morning!";
} else if (time >= evening) {
icon.classList.remove(...classes);
icon.classList.add('fa-smile');
message.textContent = "Good evening!";
}
showCurrentTime();
};
updateClock();
//Getting the clock to increment once a second
const oneSecond = 1000;
setInterval(updateClock, oneSecond);
const wakeSelect = document.querySelector('#wakeSelect')
wakeSelect.addEventListener('change', function() {
wakeTime = parseInt(wakeSelect.value);
});
const lunchSelect = document.querySelector('#lunchSelect')
lunchSelect.addEventListener('change', () => {
lunch = parseInt(lunchSelect.value);
});
const dinnerSelect = document.querySelector('#dinnerSelect')
dinnerSelect.addEventListener('change', () => {
dinner = parseInt(dinnerSelect.value);
});<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vanilla JS Clock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h1>What time is it!?</h1>
<span id="clock">Clock goes here</span>
<div class="icon-wrapper">
<i id="food-icon" class="fa-5x fas"></i>
</div>
<div id="message">
<p>Hello!</p>
</div>
<label>Choose wake up time:</label>
<select id="wakeSelect">
<option value="1">1 AM</option>
<option value="2">2 AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8" selected>8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label for="lunchSelect">Choose lunch time</label>
<select id="lunchSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12" selected>12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18">6 PM - 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<label>Choose dinner time</label>
<select id="dinnerSelect">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<option value="3">3 AM - 4AM</option>
<option value="4">4 AM - 5AM</option>
<option value="5">5 AM - 6AM</option>
<option value="6">6 AM - 7AM</option>
<option value="7">7 AM - 8AM</option>
<option value="8">8 AM - 9AM</option>
<option value="9">9 AM - 10AM</option>
<option value="10">10 AM - 11AM</option>
<option value="11">11 AM - 12PM</option>
<option value="12">12 PM - 1PM</option>
<option value="13">1 PM - 2PM</option>
<option value="14">2 PM - 3PM</option>
<option value="15">3 PM - 4PM</option>
<option value="16">4 PM - 5PM</option>
<option value="17">5 PM - 6PM</option>
<option value="18" selected>6 PM – 7PM</option>
<option value="19">7 PM - 8PM</option>
<option value="20">8 PM - 9PM</option>
<option value="21">9 PM - 10PM</option>
<option value="22">10 PM - 11PM</option>
<option value="23">11 PM - 12AM</option>
<option value="24">12 AM - 1AM</option>
</select>
<script src="index.js" async defer></script>
</body>
</html>推荐阅读
- javascript - 为什么 onmessage 监听器不处理初始 SSE 事件？
- react-native - React-native-reanimated：如何将值分配给 ScrollView scrollEnabled 属性？
- attributes - 您如何使用 MDX 计算 MTD/YTD 平均工作日销售额？
- javascript - 有没有办法将treesitter语法拆分为多个文件？
- python - 搜索列，如果值不是全数字，则将值剪切并粘贴到同一行的另一列 python pandas
- flutter - Flutter：滚动到长表单验证失败的表单字段
- ios - 作为@noescape 传递给Objective-C 的闭包参数已经逃逸
- azure-devops - Azure devops 在发布中上传日志文件
- c - 在运行时给出其大小的向量的堆栈空间？（C代码）
- express - 带有传递嵌入式 JS 的 Express 中的 res.json