Why cannot I overwrite this CSS with a JavaScript function?

Question

I wish to have this code:

$('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function(){ $('#form1').submit(); }, 200);
  document.getElementById( "textdisplay" ).style.color = "yellow";
});

overwrite this CSS masterpiece by "Joash" https://codepen.io/joashp/pen/dYXNwj, so that when I click the button, the text receiving Joash's animation will turn yellow and stay that way until function timeout ends.

It is not working and the animation just continues.

Here is my code:

jQuery('.text').html(function(i, html) {
  var chars = jQuery.trim(html).split("");

  return '<span>' + chars.join('</span><span>') + '</span>';
});
jQuery('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function() {
    jQuery('#form1').submit();
  }, 2000);
  document.getElementById("textdisplay").style.color = "yellow";
});

body {
  background: #161616;
  color: #bdbdbd;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 40px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#submitbutton {
  width: 35%;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 25px;
  background-color: #e4bb97;
  border: 2px solid #3D3B3C;
  cursor: pointer;
  font-weight: 900;
  font-size: 0.5em;
  color: #3D3B3C;
  transition: background-color 0.2s;
  border-radius: 17px;
}

#form1 {
  color: red;
  background-color: green;
  width: 150px;
  height: 150px;
}

@import url(https://fonts.googleapis.com/css?family=Oxygen);
#textdisplay,
#textdisplay-hover:hover {
  /*
   * Elements settings
   */
}

#textdisplay span,
#textdisplay-hover:hover span {
  -webkit-animation-name: color-text-flow-keys;
  animation-name: color-text-flow-keys;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  5% {
    color: #5cd666;
  }
  10% {
    color: #a55cd6;
  }
  100% {
    color: #64d65c;
  }
}

@keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  90% {
    color: #5cd666;
  }
  95% {
    color: #d67e5c;
  }
  100% {
    color: #64d65c;
  }
}

#color-text-flow span:nth-of-type(1),
#color-text-flow-hover:hover span:nth-of-type(1) {
  -webkit-animation-delay: -19.8s;
  animation-delay: -19.8s;
}

#color-text-flow span:nth-of-type(100),
#color-text-flow-hover:hover span:nth-of-type(100) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

body {
  background-color: #1a1a1a;
  color: #fefefe;
  font-family: 'Ubuntu';
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.3em;
  line-height: 2;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  text-align: center;
}

.container {
  position: absolute;
  top: 80%;
  left: 50%;
  width: 10%;
  height: 10%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.txt {
  display: block;
}

a {
  text-decoration: none;
  position: absolute;
  bottom: 10px;
  right: 10px;
  text-align: right;
  color: #eee;
  font-size: 15px;
  line-height: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form1">
    <input type="text" name="username" placeholder="Username" id="username" required>
    <button type="submit" id="submitbutton"></button>
  </form>
</div>
<div id="container">
  <div id='textdisplay'>
    <span>BlueBox</span>
  </div>
</div>

.style.Color Capitalization matters in programming (and there's also no submitbutton in the link, please post all relevant code in the question itself in a minimal reproducible example) — CertainPerformance
– CertainPerformance, Commented Oct 21, 2019 at 8:06
The text which will ultimately have to use this color information is a direct child of #textdisplay span. Since it will inherit from its element ancestors, it will use the computed value of this #textdisplay span element, which is set in the animation color-text-flow-keys. Changing the grand-parent #textdisplay will have as little influence as if you did change the color of let's say body. — Kaiido
– Kaiido, Commented Oct 21, 2019 at 11:32

CertainPerformance · Accepted Answer · 2019-10-23 06:02:53Z

For a more minimal example, you can remove all the CSS except #textdisplay span { and @keyframes color-text-flow-keys {:

jQuery('.text').html(function(i, html) {
  var chars = jQuery.trim(html).split("");

  return '<span>' + chars.join('</span><span>') + '</span>';
});
jQuery('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function() {
    console.log('submitting');
  }, 2000);
  document.getElementById("textdisplay").style.color = "yellow";
});

#textdisplay span {
  -webkit-animation-name: color-text-flow-keys;
  animation-name: color-text-flow-keys;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  90% {
    color: #5cd666;
  }
  95% {
    color: #d67e5c;
  }
  100% {
    color: #64d65c;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form1">
    <input type="text" name="username" placeholder="Username" id="username" required>
    <button type="submit" id="submitbutton">submit</button>
  </form>
</div>
<div id="container">
  <div id='textdisplay'>
    <span>BlueBox</span>
  </div>
</div>

It looks like the infinite animation, with its color:, results in the color property of the element being ignored. One way to fix it would be to run the animation only when the element has a particular class, and remove the class when the button is clicked:

jQuery('.text').html(function(i, html) {
  var chars = jQuery.trim(html).split("");

  return '<span>' + chars.join('</span><span>') + '</span>';
});
jQuery('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function() {
    console.log('submitting');
  }, 2000);
  document.querySelector('#textdisplay > span').classList.remove('anim');
  document.getElementById("textdisplay").style.color = "yellow";
});

#textdisplay span.anim {
  -webkit-animation-name: color-text-flow-keys;
  animation-name: color-text-flow-keys;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes color-text-flow-keys {
  0% {
    color: #d65c97;
  }
  90% {
    color: #5cd666;
  }
  95% {
    color: #d67e5c;
  }
  100% {
    color: #64d65c;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form id="form1">
    <input type="text" name="username" placeholder="Username" id="username" required>
    <button type="submit" id="submitbutton">submit</button>
  </form>
</div>
<div id="container">
  <div id='textdisplay'>
    <span class="anim">BlueBox</span>
  </div>
</div>

I'm going to name my firstborn child "CertainPerformance", thank you!

Collectives™ on Stack Overflow

Why cannot I overwrite this CSS with a JavaScript function?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related