Home > OS >  Why do I have to click my event handler target twice before the DOM is updated?
Why do I have to click my event handler target twice before the DOM is updated?

Time：12-10

I am making a time tracking dashboard site, it has 3 links (Daily, Weekly, and Monthly) and I want the content to change based on which link is clicked. I am setting hash values for all 3 links as #daily, #weekly, and #monthly and in my jQuery script I am hiding and showing divs by adding if conditions that uses location.hash property to hide and show specific. The script is working somewhat but the content changes only when I double click on a link, I don't know what is wrong with my script. I have made a repository and also enabled GitHub pages for it, GitHub Repository and GitHub Pages Link.

let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');

window.onload = function() {
  $(weekly).hide();
  $(monthly).hide();
};

function hideAndShow() {
  if (location.hash === '#daily') {
    $(daily).show();
    $(weekly).hide();
    $(monthly).hide();
  } else if (location.hash === '#weekly') {
    $(daily).hide();
    $(weekly).show();;
    $(monthly).hide();
  } else if (location.hash === '#monthly') {
    $(daily).hide();
    $(weekly).hide();
    $(monthly).show();
  }
};

let frequency = document.querySelectorAll('.user__frequency__link');
for (let i = 0; i < frequency.length; i  ) {
  frequency[i].addEventListener('click', function(_event) {
    hideAndShow(this);
  });
}
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --clr-neutral: hsl(0, 100%, 100%);
  --clr-primary-100: hsl(236, 100%, 87%);
  --clr-primary-200: hsl(235, 45%, 61%);
  --clr-primary-300: hsl(246, 80%, 60%);
  --clr-primary-400: hsl(235, 46%, 20%);
  --clr-primary-500: hsl(226, 43%, 10%);
  --clr-work: hsl(15, 100%, 70%);
  --clr-play: hsl(195, 74%, 62%);
  --clr-study: hsl(348, 100%, 68%);
  --clr-exercise: hsl(145, 58%, 55%);
  --clr-social: hsl(264, 64%, 52%);
  --clr-self-care: hsl(43, 84%, 65%);
}

body {
  font-family: 'Rubik', sans-serif;
  background-color: var(--clr-primary-500);
  color: var(--clr-neutral);
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--clr-neutral);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
  margin-top: 2.8rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

.user__frequency__link {
  font-size: 22px;
  font-weight: 400;
  opacity: .5;
}

.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
  opacity: 1;
}

.container {
  margin: 5rem 1rem;
}

.rounded-box {
  border-radius: 1.5rem;
  overflow: hidden;
}

.rounded-box .rounded-box {
  margin-top: 1.6rem;
}

.box-padding {
  padding: 1rem 2rem;
}

.box-padding1 {
  padding: 3.4rem 2rem;
}

.box-padding2 {
  padding: 1rem 2rem 2rem 2rem;
}

.user__name {
  background-color: var(--clr-primary-300);
  border-radius: 0 0 1.25rem 1.25rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.user__img {
  border: 2px solid var(--clr-neutral);
  border-radius: 50%;
  width: 125px;
  height: 125px;
}

.user__frequency {
  display: flex;
  justify-content: space-around;
}

.user {
  background-color: var(--clr-primary-400);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heading-neutral {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.846rem;
}

.ellipsis {
  color: var(--clr-neutral);
}

.work {
  background-color: var(--clr-work);
  background-image: url(../images/icon-work.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.play {
  background-color: var(--clr-play);
  background-image: url(../images/icon-play.svg);
  background-repeat: no-repeat;
  background-position: 95% -2%;
}

.study {
  background-color: var(--clr-study);
  background-image: url(../images/icon-study.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.exercise {
  background-color: var(--clr-exercise);
  background-image: url(../images/icon-exercise.svg);
  background-repeat: no-repeat;
  background-position: 95% 0%;
}

.social {
  background-color: var(--clr-social);
  background-image: url(../images/icon-social.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.self-care {
  background-color: var(--clr-self-care);
  background-image: url(../images/icon-self-care.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.daily,
.weekly,
.monthly {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.current {
  font-size: 2rem;
  font-weight: 300;
}

.previous {
  margin-left: auto;
  opacity: 0.6;
}


/* .weekly,
.monthly {
   display: none;
} */

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <h3><a href="#daily"  id="user__frequency__daily" >Daily</a></h3>
      <h3><a href="#weekly"  id="user__frequency__weekly" >Weekly</a></h3>
      <h3><a href="#monthly"  id="user__frequency__monthly" >Monthly</a></h3>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Work</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="work__daily" >
          <div >5hrs</div>
          <!-- daily -->
          <div >Yesterday - 7hrs</div>
          <!-- daily -->
        </div>
        <div id="work__weekly" >
          <div >32hrs</div>
          <!-- weekly -->
          <div >Last Week - 36hrs</div>
          <!-- weekly -->
        </div>
        <div id="work__monthly" >
          <div >103hrs</div>
          <!-- monthly -->
          <div >Last Month - 128hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Play</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="play__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 2hrs</div>
          <!-- daily -->
        </div>
        <div id="play__weekly" >
          <div >10hrs</div>
          <!-- weekly -->
          <div >Last Week - 8hrs</div>
          <!-- weekly -->
        </div>
        <div id="play__monthly" >
          <div >23hrs</div>
          <!-- monthly -->
          <div >Last Month - 29hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Study</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="study__daily" >
          <div >0hrs</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="study__weekly" >
          <div >4hrs</div>
          <!-- weekly -->
          <div >Last Week - 7hrs</div>
          <!-- weekly -->
        </div>
        <div id="study__monthly" >
          <div >13hrs</div>
          <!-- monthly -->
          <div >Last Month - 19hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Exercise</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="exercise__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="exercise__weekly" >
          <div >4hrs</div>
          <!-- weekly -->
          <div >Last Week - 5hrs</div>
          <!-- weekly -->
        </div>
        <div id="exercise__monthly" >
          <div >11hrs</div>
          <!-- monthly -->
          <div >Last Month - 18hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Social</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="social__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 3hrs</div>
          <!-- daily -->
        </div>
        <div id="social__weekly" >
          <div >5hrs</div>
          <!-- weekly -->
          <div >Last Week - 10hrs</div>
          <!-- weekly -->
        </div>
        <div id="social__monthly" >
          <div >21hrs</div>
          <!-- monthly -->
          <div >Last Month - 23hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Self Care</h2>
        <a href=""><img  src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="self-care__daily" >
          <div >0hrs</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="self-care__weekly" >
          <div >2hrs</div>
          <!-- weekly -->
          <div >Last Week - 2hrs</div>
          <!-- weekly -->
        </div>
        <div id="self-care__monthly" >
          <div >7hrs</div>
          <!-- monthly -->
          <div >Last Month - 11hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>

CodePudding user response：

The problem really is just a race condition basically... You check the location hash before it gets updated by the click on the a. But, is that really what you'd like to do? Change the display according to the hash value, on a user click? Wouldn't you be better to just listen to hash changes, and act accordingly?

window.addEventListener("hashchange", hideAndShow);

Every time the hash changes, hideAndShow will trigger and do the changes needed... That way you do not have to remember to add X or Y events on every click that changes the hash value.

CodePudding user response：

Your click handler is running before the location is updated. A quick way to resolve that is to wrap the function call in a zero-delay timeout, which forces it into the next execution cycle.

Learn more about other possible solutions.

let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');

window.onload = function() {
  $(weekly).hide();
  $(monthly).hide();
};

function hideAndShow() {
  if (location.hash === '#daily') {
    $(daily).show();
    $(weekly).hide();
    $(monthly).hide();
  } else if (location.hash === '#weekly') {
    $(daily).hide();
    $(weekly).show();;
    $(monthly).hide();
  } else if (location.hash === '#monthly') {
    $(daily).hide();
    $(weekly).hide();
    $(monthly).show();
  }
};

let frequency = document.querySelectorAll('.user__frequency__link');

for (let i = 0; i < frequency.length; i  ) {
  frequency[i].addEventListener('click', function(_event) {
    setTimeout(function() {
      hideAndShow(this);
    }); // no delay for you!
  });
}
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --clr-neutral: hsl(0, 100%, 100%);
  --clr-primary-100: hsl(236, 100%, 87%);
  --clr-primary-200: hsl(235, 45%, 61%);
  --clr-primary-300: hsl(246, 80%, 60%);
  --clr-primary-400: hsl(235, 46%, 20%);
  --clr-primary-500: hsl(226, 43%, 10%);
  --clr-work: hsl(15, 100%, 70%);
  --clr-play: hsl(195, 74%, 62%);
  --clr-study: hsl(348, 100%, 68%);
  --clr-exercise: hsl(145, 58%, 55%);
  --clr-social: hsl(264, 64%, 52%);
  --clr-self-care: hsl(43, 84%, 65%);
}

body {
  font-family: 'Rubik', sans-serif;
  background-color: var(--clr-primary-500);
  color: var(--clr-neutral);
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--clr-neutral);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
  margin-top: 2.8rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

.user__frequency__link {
  font-size: 22px;
  font-weight: 400;
  opacity: .5;
}

.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
  opacity: 1;
}

.container {
  margin: 5rem 1rem;
}

.rounded-box {
  border-radius: 1.5rem;
  overflow: hidden;
}

.rounded-box .rounded-box {
  margin-top: 1.6rem;
}

.box-padding {
  padding: 1rem 2rem;
}

.box-padding1 {
  padding: 3.4rem 2rem;
}

.box-padding2 {
  padding: 1rem 2rem 2rem 2rem;
}

.user__name {
  background-color: var(--clr-primary-300);
  border-radius: 0 0 1.25rem 1.25rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.user__img {
  border: 2px solid var(--clr-neutral);
  border-radius: 50%;
  width: 125px;
  height: 125px;
}

.user__frequency {
  display: flex;
  justify-content: space-around;
}

.user {
  background-color: var(--clr-primary-400);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heading-neutral {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.846rem;
}

.ellipsis {
  color: var(--clr-neutral);
}

.work {
  background-color: var(--clr-work);
  background-image: url(../images/icon-work.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.play {
  background-color: var(--clr-play);
  background-image: url(../images/icon-play.svg);
  background-repeat: no-repeat;
  background-position: 95% -2%;
}

.study {
  background-color: var(--clr-study);
  background-image: url(../images/icon-study.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.exercise {
  background-color: var(--clr-exercise);
  background-image: url(../images/icon-exercise.svg);
  background-repeat: no-repeat;
  background-position: 95% 0%;
}

.social {
  background-color: var(--clr-social);
  background-image: url(../images/icon-social.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.self-care {
  background-color: var(--clr-self-care);
  background-image: url(../images/icon-self-care.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.daily,
.weekly,
.monthly {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.current {
  font-size: 2rem;
  font-weight: 300;
}

.previous {
  margin-left: auto;
  opacity: 0.6;
}


/* .weekly,
.monthly {
   display: none;
} */

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <h3><a href="#daily"  id="user__frequency__daily" >Daily</a></h3>
      <h3><a href="#weekly"  id="user__frequency__weekly" >Weekly</a></h3>
      <h3><a href="#monthly"  id="user__frequency__monthly" >Monthly</a></h3>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Work</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="work__daily" >
          <div >5hrs</div>
          <!-- daily -->
          <div >Yesterday - 7hrs</div>
          <!-- daily -->
        </div>
        <div id="work__weekly" >
          <div >32hrs</div>
          <!-- weekly -->
          <div >Last Week - 36hrs</div>
          <!-- weekly -->
        </div>
        <div id="work__monthly" >
          <div >103hrs</div>
          <!-- monthly -->
          <div >Last Month - 128hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Play</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="play__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 2hrs</div>
          <!-- daily -->
        </div>
        <div id="play__weekly" >
          <div >10hrs</div>
          <!-- weekly -->
          <div >Last Week - 8hrs</div>
          <!-- weekly -->
        </div>
        <div id="play__monthly" >
          <div >23hrs</div>
          <!-- monthly -->
          <div >Last Month - 29hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Study</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="study__daily" >
          <div >0hrs</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="study__weekly" >
          <div >4hrs</div>
          <!-- weekly -->
          <div >Last Week - 7hrs</div>
          <!-- weekly -->
        </div>
        <div id="study__monthly" >
          <div >13hrs</div>
          <!-- monthly -->
          <div >Last Month - 19hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Exercise</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="exercise__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="exercise__weekly" >
          <div >4hrs</div>
          <!-- weekly -->
          <div >Last Week - 5hrs</div>
          <!-- weekly -->
        </div>
        <div id="exercise__monthly" >
          <div >11hrs</div>
          <!-- monthly -->
          <div >Last Month - 18hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Social</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="social__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 3hrs</div>
          <!-- daily -->
        </div>
        <div id="social__weekly" >
          <div >5hrs</div>
          <!-- weekly -->
          <div >Last Week - 10hrs</div>
          <!-- weekly -->
        </div>
        <div id="social__monthly" >
          <div >21hrs</div>
          <!-- monthly -->
          <div >Last Month - 23hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Self Care</h2>
        <a href=""><img  src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="self-care__daily" >
          <div >0hrs</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="self-care__weekly" >
          <div >2hrs</div>
          <!-- weekly -->
          <div >Last Week - 2hrs</div>
          <!-- weekly -->
        </div>
        <div id="self-care__monthly" >
          <div >7hrs</div>
          <!-- monthly -->
          <div >Last Month - 11hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>

CodePudding user response：

location.hash is updated after your click handler has been executed.
Make use of this being the clicked anchor element (<a href="..." />) and use its href attribute.

We need the "raw" value as it is in the DOM so we need to use .getAttribute("href")

function hideAndShow(clickedAnchor) {
    const target = clickedAnchor.getAttribute("href");

    if (target === "#daily") {
      // ...
    } else if (target === "#weekly") {
      // ...
    } else if (target === "#monthly") {
      // ...
    }
}

Working example

let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');

window.onload = function() {
  $(weekly).hide();
  $(monthly).hide();
};

function hideAndShow(clickedAnchor) {
  const target = clickedAnchor.getAttribute("href");
  
  if (target === '#daily') {
    $(daily).show();
    $(weekly).hide();
    $(monthly).hide();
  } else if (target === '#weekly') {
    $(daily).hide();
    $(weekly).show();;
    $(monthly).hide();
  } else if (target === '#monthly') {
    $(daily).hide();
    $(weekly).hide();
    $(monthly).show();
  }
};

let frequency = document.querySelectorAll('.user__frequency__link');
for (let i = 0; i < frequency.length; i  ) {
  frequency[i].addEventListener('click', function(_event) {
    hideAndShow(this);
  });
}
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --clr-neutral: hsl(0, 100%, 100%);
  --clr-primary-100: hsl(236, 100%, 87%);
  --clr-primary-200: hsl(235, 45%, 61%);
  --clr-primary-300: hsl(246, 80%, 60%);
  --clr-primary-400: hsl(235, 46%, 20%);
  --clr-primary-500: hsl(226, 43%, 10%);
  --clr-work: hsl(15, 100%, 70%);
  --clr-play: hsl(195, 74%, 62%);
  --clr-study: hsl(348, 100%, 68%);
  --clr-exercise: hsl(145, 58%, 55%);
  --clr-social: hsl(264, 64%, 52%);
  --clr-self-care: hsl(43, 84%, 65%);
}

body {
  font-family: 'Rubik', sans-serif;
  background-color: var(--clr-primary-500);
  color: var(--clr-neutral);
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--clr-neutral);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
  margin-top: 2.8rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

.user__frequency__link {
  font-size: 22px;
  font-weight: 400;
  opacity: .5;
}

.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
  opacity: 1;
}

.container {
  margin: 5rem 1rem;
}

.rounded-box {
  border-radius: 1.5rem;
  overflow: hidden;
}

.rounded-box .rounded-box {
  margin-top: 1.6rem;
}

.box-padding {
  padding: 1rem 2rem;
}

.box-padding1 {
  padding: 3.4rem 2rem;
}

.box-padding2 {
  padding: 1rem 2rem 2rem 2rem;
}

.user__name {
  background-color: var(--clr-primary-300);
  border-radius: 0 0 1.25rem 1.25rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.user__img {
  border: 2px solid var(--clr-neutral);
  border-radius: 50%;
  width: 125px;
  height: 125px;
}

.user__frequency {
  display: flex;
  justify-content: space-around;
}

.user {
  background-color: var(--clr-primary-400);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heading-neutral {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.846rem;
}

.ellipsis {
  color: var(--clr-neutral);
}

.work {
  background-color: var(--clr-work);
  background-image: url(../images/icon-work.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.play {
  background-color: var(--clr-play);
  background-image: url(../images/icon-play.svg);
  background-repeat: no-repeat;
  background-position: 95% -2%;
}

.study {
  background-color: var(--clr-study);
  background-image: url(../images/icon-study.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.exercise {
  background-color: var(--clr-exercise);
  background-image: url(../images/icon-exercise.svg);
  background-repeat: no-repeat;
  background-position: 95% 0%;
}

.social {
  background-color: var(--clr-social);
  background-image: url(../images/icon-social.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.self-care {
  background-color: var(--clr-self-care);
  background-image: url(../images/icon-self-care.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.daily,
.weekly,
.monthly {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.current {
  font-size: 2rem;
  font-weight: 300;
}

.previous {
  margin-left: auto;
  opacity: 0.6;
}


/* .weekly,
.monthly {
   display: none;
} */

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <h3><a href="#daily"  id="user__frequency__daily" >Daily</a></h3>
      <h3><a href="#weekly"  id="user__frequency__weekly" >Weekly</a></h3>
      <h3><a href="#monthly"  id="user__frequency__monthly" >Monthly</a></h3>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Work</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="work__daily" >
          <div >5hrs</div>
          <!-- daily -->
          <div >Yesterday - 7hrs</div>
          <!-- daily -->
        </div>
        <div id="work__weekly" >
          <div >32hrs</div>
          <!-- weekly -->
          <div >Last Week - 36hrs</div>
          <!-- weekly -->
        </div>
        <div id="work__monthly" >
          <div >103hrs</div>
          <!-- monthly -->
          <div >Last Month - 128hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Play</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="play__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 2hrs</div>
          <!-- daily -->
        </div>
        <div id="play__weekly" >
          <div >10hrs</div>
          <!-- weekly -->
          <div >Last Week - 8hrs</div>
          <!-- weekly -->
        </div>
        <div id="play__monthly" >
          <div >23hrs</div>
          <!-- monthly -->
          <div >Last Month - 29hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Study</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="study__daily" >
          <div >0hrs</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="study__weekly" >
          <div >4hrs</div>
          <!-- weekly -->
          <div >Last Week - 7hrs</div>
          <!-- weekly -->
        </div>
        <div id="study__monthly" >
          <div >13hrs</div>
          <!-- monthly -->
          <div >Last Month - 19hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Exercise</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="exercise__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="exercise__weekly" >
          <div >4hrs</div>
          <!-- weekly -->
          <div >Last Week - 5hrs</div>
          <!-- weekly -->
        </div>
        <div id="exercise__monthly" >
          <div >11hrs</div>
          <!-- monthly -->
          <div >Last Month - 18hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Social</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="social__daily" >
          <div >1hr</div>
          <!-- daily -->
          <div >Yesterday - 3hrs</div>
          <!-- daily -->
        </div>
        <div id="social__weekly" >
          <div >5hrs</div>
          <!-- weekly -->
          <div >Last Week - 10hrs</div>
          <!-- weekly -->
        </div>
        <div id="social__monthly" >
          <div >21hrs</div>
          <!-- monthly -->
          <div >Last Month - 23hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div >
        <h2 >Self Care</h2>
        <a href=""><img  src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div >
        <div id="self-care__daily" >
          <div >0hrs</div>
          <!-- daily -->
          <div >Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="self-care__weekly" >
          <div >2hrs</div>
          <!-- weekly -->
          <div >Last Week - 2hrs</div>
          <!-- weekly -->
        </div>
        <div id="self-care__monthly" >
          <div >7hrs</div>
          <!-- monthly -->
          <div >Last Month - 11hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>

Page link：https//www.codepudding.com/os/223209.html

Prev:Route is working when referred but when I go to that provided link it will not find the controller f
Next:How to alter img src onclick using jQuery or JS
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding