(has the minutes and seconds but with the text "time" behind it.)

(this is just a still image it is moving.)

What I would like it to do:

(this is just a still image it is moving.)

Also if I remove where the time normally is it will not have the effect, it just needs to be changed.

Thanks in advance :D

CodePudding user response：

Get a reference to the h1, and set the data-text to the new value, you can also set the innerHTML at the same time.

const theH1 = document.getElementById("wrapper").children[0];  
// it's the first element child of the wrapper div

const theTime = "00:00:00";

theH1.dataset.text = theTime;
theH1.innerHTML = theTime;

CodePudding user response：

You can just update the element attribute value for dataset data-text using Element.setAttribute(AttributeName, AttributeValue)..

Here's an example, but in your case you should use jsonData['schedule'][0][day.toLowerCase()][0][checkperiod()[0]] as the attribute value.

var element = document.getElementById("wrapper").firstElementChild;

element.setAttribute('data-text','00:00');

.glitch {
  position: relative;
  color: white;
  font-size: 4em;
  letter-spacing: 0.5em;
  /* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #ff00cc;
  /* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
  clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #00c8ff, 2px 2px #ff00cc;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

<div id="app">
    <div id="wrapper">
        <h1  data-text="test">test</h1>
        <h2  data-text="time">time</h2>
    </div>
</div>