Time tracking page switching buttons when click to days, weeks and months-CodePudding

My goal here is to increment the data object inside the timeframes and previousTimeframes variable so that when the button is click it will change the values of hours to daily, weekly, and monthly.

In my weeklybtn I have an addEventListener that when click it will run the weekly function. Inside the weekly function it will activate the weekly button, and remove the daily and monthly button. I also added a for loop in the data to increment the values of weekly current and previous. When I console.log(weeklycurrent) or console.log(weeklyprevious), I can access the values and it's not a problem. I also use forEach in timeframes to access the timeframes class in HTML file and loop the values of weeklycurrent inside but it's incrementing each timeframes and it's not looping at all.

Any suggestions on how I can fix it?

let data = [
    {
      "title": "Work",
      "timeframes": {
        "daily": {
          "current": 5,
          "previous": 7
        },
        "weekly": {
          "current": 32,
          "previous": 36
        },
        "monthly": {
          "current": 103,
          "previous": 128
        }
      }
    },
    {
      "title": "Play",
      "timeframes": {
        "daily": {
          "current": 1,
          "previous": 2
        },
        "weekly": {
          "current": 10,
          "previous": 8
        },
        "monthly": {
          "current": 23,
          "previous": 29
        }
      }
    },
    {
      "title": "Study",
      "timeframes": {
        "daily": {
          "current": 0,
          "previous": 1
        },
        "weekly": {
          "current": 4,
          "previous": 7
        },
        "monthly": {
          "current": 13,
          "previous": 19
        }
      }
    },
    {
      "title": "Exercise",
      "timeframes": {
        "daily": {
          "current": 1,
          "previous": 1
        },
        "weekly": {
          "current": 4,
          "previous": 5
        },
        "monthly": {
          "current": 11,
          "previous": 18
        }
      }
    },
    {
      "title": "Social",
      "timeframes": {
        "daily": {
          "current": 1,
          "previous": 3
        },
        "weekly": {
          "current": 5,
          "previous": 10
        },
        "monthly": {
          "current": 21,
          "previous": 23
        }
      }
    },
    {
      "title": "Self Care",
      "timeframes": {
        "daily": {
          "current": 0,
          "previous": 1
        },
        "weekly": {
          "current": 2,
          "previous": 2
        },
        "monthly": {
          "current": 7,
          "previous": 11
        }
      }
    }
  ];
  
  const dailybtn = document.querySelector(".dailybtn");
const weeklybtn = document.querySelector(".weeklybtn");
const monthlybtn = document.querySelector(".monthlybtn");
const timeframes = document.querySelectorAll(".timeframes");
const previousTimeframes = document.querySelectorAll(".previoustimeframes");



weeklybtn.addEventListener("click", function weekly () {
    weeklybtn.classList.add("active");
    monthlybtn.classList.remove("active");
    dailybtn.classList.remove("active");
 for (let i of data) {
     let weeklycurrent = i.timeframes.weekly.current;
     let weeklyprevious = i.timeframes.weekly.previous;

    
     timeframes.forEach(x => {
     x.textContent = `${weeklycurrent}hrs`;
    console.log(x)
    })
    
    previousTimeframes.forEach(y => {
        y.textContent = `Last Week - ${weeklyprevious}hrs`
    })  
    //  console.log(weeklyprevious)
     console.log(weeklycurrent)
 }
 
 });

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Time tracking dashboard</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

  <!-- Feel free to remove these styles or customise in your own stylesheet