forEach 在香草 JS 中更改颜色文本答案

【问题标题】：forEach change color text in vanilla JSforEach 在香草 JS 中更改颜色文本
【发布时间】：2021-08-31 10:15:32
【问题描述】：

我正在尝试解决 vanilla JS 中的一个练习，但无法弄清楚我做错了什么。如果产品价格> 300，我想将彩色文本更改为红色。

在 console.log 中我一切正常，但在 changeColor.style.color = "red"; 上我收到此错误：TypeError: Cannot set property 'color' of undefined

另外，由于页面有延迟加载，我可以在您向下滚动时获得所有价格变化吗？

谢谢

function exercise_3() {
  var offer = document.querySelectorAll(".grocery-item__normal-price");
  var price = document.querySelectorAll(".grocery-item__normal-price");
  let changePriceColor = 300;

  price.forEach( (price) => {
    var changeColor = price.innerHTML.slice(0,4).replace(/,/g, '');
    if (changeColor > changePriceColor) {
      console.log(changeColor, "true");
    } else {
      console.log(changeColor, "false")
    }
  })
}

exercise_3();

【问题讨论】：

var changeColor = price.innerHTML.slice(0,4).replace(/,/g, ''); - changeColor 不是元素？
哦，是的。如果我是 console.log 我得到了我需要的东西
我的意思是...不是...下面列出的修复是因为您使用的是price - 而不是changeColor
它现在正在运行，但仅适用于页面上加载的内容。由于延迟加载，我无法在向下滚动时使其工作，因为尚未渲染。我可以这样做吗？
加载内容后，您必须重新调用您的函数。

标签： javascript for-loop dom

【解决方案1】：

    var offer = document.querySelectorAll(".grocery-item__normal-price");
    var price = document.querySelectorAll(".grocery-item__normal-price");
    let changePriceColor = 300;


    price.forEach( (price) => {
    var changeColor = price.innerHTML.slice(0,4).replace(/,/g, '');
    if( changeColor > changePriceColor ) {
        price.style.color = "red";
       console.log(price, "true");
    } else {
        console.log(changeColor, "false")
        }
    })
}

exercise_3();

这实际上是修复了颜色问题，但由于延迟加载，无法理解如何使其在向下滚动时工作

【讨论】：

【解决方案2】：

变量changeColor 是innerHTML 的正则表达式的结果，而不是元素。变量price 是您可以更改颜色的元素。所以试试price.style.color="red"

【讨论】：

【解决方案3】：

要在滚动时运行函数exercise_3，您必须为滚动添加一个事件监听器。

document.addEventListener('scroll', (e) => {
   exercise_3();
});

但这会在你每次滚动时运行该函数，并且会影响性能。

【讨论】：

我该如何解决？
渴望cmets..请看下面我的回答。

【解决方案4】：

为了解决您的延迟加载问题，我们可以使用滚动事件监听器和 window 的 scrollY 属性，

document.addEventListener('scroll', ()=>{
   var scroll_position = window.scrollY;
   if(scroll_position > 250){
      element.style.backgroundColor = '#29323c';
   }
})

在上面的代码中，根据您的需要更改 scroll_position 比较值（我已将 250 作为虚拟值）

window.scrollY：该属性返回文档当前垂直滚动的像素数。

注意：也不要将更新后的解决方案添加为您自己问题的答案，您可以只更新您的问题

【讨论】：

【解决方案5】：

这取决于... 一种方法是创建一个数组来存储所有加载的元素并与该数组进行比较。另一种方法是计算 DOM 中的元素数量与您所做的元素之间的差异。

大概是这样的：

var numberOfPriceElements = 0;

// count elements on load
numberOfPriceElements = document.querySelectorAll(".grocery-item__normal-price").length;

document.addEventListener('scroll', (e) => {
    // if count of elements is more then do the function and save the amount to the variable. 
    if(document.querySelectorAll(".grocery-item__normal-price").length > numberOfPriceElements) {
        exercise_3();
        numberOfPriceElements = document.querySelectorAll(".grocery-item__normal-price").length;
    }
});

【讨论】：