使用事件侦听器检测更改时，为什么图标类没有更改？

debugcn 发表于 Dev

新手

我正在尝试自己做这个：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 &ndash; 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>

蓬松的小猫

问题是您正在尝试比较不同类型的变量，使用===它们比较值和数据类型。因此，当您在执行此操作时updateClock：

if(time === wakeTime)

即使值相同，time也会失败，因为它们是数字和wakeTime字符串。您可以通过2种方式更改代码来解决此问题：

使用==以下命令仅比较值，而不比较类型：if(time == wakeTime)
或使用或函数将字符串更改为数字，例如NumberparseIntif(time === Number(wakeTime))

我已经在您的updateClock函数中对此进行了更改，您可以在这里看到它的正常运行！我还修复了未删除的错误图标类（请参见下面的更新）：

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){
            changeIcon(icon, 'fa-clock');
            message.textContent = 'Wakey wakey!';
        } else if (time == lunch){
            changeIcon(icon, 'fa-hotdog');
            message.textContent = "I'm hungry."
        } else if (time == dinner ) {
            changeIcon(icon, 'fa-utensils');
            message.textContent = "Can I have more food?";
        } else if (time == bed){
            changeIcon(icon, 'fa-bed');
            message.textContent = "YAWN";
        } else if (time >= noon ) {
            changeIcon(icon, 'fa-smile');
            message.textContent = "Good afternoon!"
        } else if (time < noon) {
            changeIcon(icon, 'fa-smile');
            message.innerHtml = "Good morning!";
        } else if (time >= evening) {
            changeIcon(icon, '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;
    });
    
function changeIcon(iconElement, newIconClass){
    // remove all existing icon classes 
    iconElement.classList.forEach(className => {
        // check for classes starting with "fa-" but are not "fa-5x"
        if (className.startsWith('fa-') && className!=('fa-5x')) 
            iconElement.classList.remove(className);
    });
    // now add the new class
    iconElement.classList.add(newIconClass);
}

<script src="https://kit.fontawesome.com/35e4240984.js" crossorigin="anonymous"></script>

<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 &ndash; 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>

注意：删除图标时，您还有其他问题。例如，您只是从该fa-smile班级中删除课程，if (time==wakeTime)因此，例如，如果您更改午餐时间，则该图标将是其他内容，并且您没有将其删除。您可以对其进行更改，以便删除所有现有的类而不是特定的类。

更新-删除所有现有的fa-图标类：

最灵活的方法可能是删除以开头的所有图标类fa-，因此您不必保留列表。

以下函数查找所有以“ fa- except” 开头的类fa-5x（因为您需要该类的大小），然后将其删除。您还可以传入新的图标类：

function changeIcon(iconElement, newIconClass){
    // remove all existing icon classes 
    iconElement.classList.forEach(className => {
        // check for classes starting with "fa-" but are not "fa-5x"
        if (className.startsWith('fa-') && className!=('fa-5x')) 
            iconElement.classList.remove(className);
    });
    // now add the new class
    iconElement.classList.add(newIconClass);
}

要使用它，您只需执行以下操作！

if(time == wakeTime){
    changeIcon(icon, 'fa-clock');
    message.textContent = 'Wakey wakey!';
}
// etc

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

“侦听器”用于检测鼠标图标的更改

来自分类Dev

使用事件侦听器检测窗口高度和宽度的变化

来自分类Dev

如何使用带有事件学说的事件侦听器更改相关实体

来自分类Dev

如何使用事件侦听器使用 javascript 更改背景

来自分类Dev

使用事件侦听器时查找类的 ID 名称

来自分类Dev

bone.js：防止模型更改时触发侦听器事件

来自分类Dev

Android，日历事件更改时的侦听器/观察者/回调

来自分类Dev

bone.js：防止在模型更改时触发侦听器事件

来自分类Dev

使用事件侦听器克隆引导程序元素

来自分类Dev

为什么没有@PreLoad实体侦听器？

来自分类Dev

未调用事件侦听器

来自分类Dev

在更改时附加数据属性侦听器

来自分类Dev

Firebase onDataChange - 值事件侦听器不侦听更改

来自分类Dev

有没有一种方法可以检测广播的事件侦听器？

来自分类Dev

使用事件触发器如何在输入更改时将值传递给函数

来自分类Dev

更改.desktop文件时，为什么启动器中的图标没有更改？

来自分类Dev

当没有数据侦听器时，为什么node.js http不调用end事件？

来自分类Dev

为什么在注册事件侦听器并触发事件侦听器之前调用滚动事件？

来自分类Dev

在没有多个事件侦听器的情况下检测表单commit（）？

来自分类Dev

使用javascript手动更改表单/文本区域输入，并确保触发所有事件侦听器

来自分类Dev

为什么JavaScript类中的事件侦听器会看到旧的上下文变量？

来自分类Dev

使用事件侦听器在不使用jquery的情况下触发keypress事件

来自分类Dev

MySQL表的事件侦听器更改了吗？

来自分类Dev

更新或更改或删除/重置Javascript事件侦听器

来自分类Dev

Reosurce触发的事件将更改侦听器移动

来自分类Dev

Symfony2：将事件更改为侦听器

来自分类Dev

更新或更改或删除/重置Javascript事件侦听器

来自分类Dev

基于 Redux 状态更改的 React 事件侦听器

来自分类Dev

更改从事件侦听器获取 URL？

Related 相关文章

文章