auto refresh div / or remove the style using only javascrpit

user_18100480 0
Viewed 237

a lot of similar questions have already been answered but nothing seems to work for me, so I want to highlight the element on click of the navigation bar(8k), and then remove it after a few seconds, I just can't figure out how to do it without refreshing the whole page. Is there any way to refresh the div only and or it can be done without refresh? (beginner here). Thanks

Javascript

function dance() {
  document.getElementById("c4").style.boxShadow= "0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19)";
}

HTML

<img src="../pics/-vine-3404474.jpg" id="c4">

<div class="flex-nav" id="n1">
<a href="#" style="order:3">2k</a>
<a href="#" style="order:2">4k</a>
<a href="#" style="order:4">1080p</a>
<a href="#C2" style="order:1" onclick="dance()">8k</a>
</div>
javascript
3 Answers

UPDATE Based on your code, I have added two functions. The first function is about the timer and removing the element. the second function is the timer itself.

function dance() {
 const el = document.getElementById("c4");
 el.style.boxShadow = "0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19)";
  
  start(el);
} 


function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function start(el) {
  for (let i = 0; i < 3; i++) {
    console.log(`Waiting ${i} seconds...`);
    await sleep(i * 1000);
  }
  console.log('Done');
  el.style.boxShadow = null;
}
<img src="https://via.placeholder.com/100" id="c4">

<div class="flex-nav" id="n1">
<a href="#" style="order:3">2k</a>
<a href="#" style="order:2">4k</a>
<a href="#" style="order:4">1080p</a>
<a href="#C2" style="order:1" onclick="dance()">8k</a>
</div>

user_148071110

UPDATED

Per comments, I've added a clearTimeout call and replaced the inline onclick handler with a generic addEventListener call as a recommendation.

As an additional suggestion, I'd also recommend that you replace <div class="flex-nav"> with a <nav> tag and potentially <a> with <button> for semantic markup.

Added a few lines of CSS and one additional line of JavaScript.

On click, add a .highlight class with a setTimeout call to remove it after a given time.

const image = document.getElementById("c4");
let timeoutID;
document.querySelectorAll(".flex-nav a").forEach(item => item.addEventListener("click", dance));

function dance() {
  image.classList.add('highlight');
  timeoutID = setTimeout(() => { 
    image.classList.remove('highlight');
    clearTimeout(timeoutID);
  }, 1000)
} 
.highlight {
  box-shadow: 0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: dance infinite linear 0.5s;
}

@keyframes dance {
  0% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
<img src="https://picsum.photos/400/100" id="c4">

<div class="flex-nav" id="n1">
<a href="#" style="order:3">2k</a>
<a href="#" style="order:2">4k</a>
<a href="#" style="order:4">1080p</a>
<a href="#C2" style="order:1">8k</a>
</div>

user_72165080 

let hide;
function highlight(){
  clearTimeout(hide);
  document.getElementById("highlight").classList.add("highlight");
  hide= setTimeout(() => document.getElementById("highlight").classList.toggle("highlight"), 3000);
}
.highlight{
box-shadow: 1px 5px 6px 3px black;
}
<div id="highlight" onclick="highlight()"> Hello, I am a beginner in web dev.</div>

user_172284840
Related