0

I am new to JavaScript and I just copy a code for Download Button Counter. Now I want to change the text color of the counter. Could anybody help me?

Code

var downloadButton = document.getElementById("download");
var counter = 30;
var newElement = document.createElement("p");
newElement.innerHTML = "Job Advertisement will be visible after 30 Seconds ";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
  counter--;
  if (counter < 0) {
    newElement.parentNode.replaceChild(downloadButton, newElement);
    clearInterval(id);
  } else {

    newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";

  }
}, 1000);
<div>
  <button id="download">Download</button>
</div>

1
  • How about using css? Does it have to be javascript? If so, set the style attribute: element.style = "color: whatever"
    – F. Müller
    Jul 27, 2020 at 16:13

3 Answers 3

0

Try this:

newElement.style.color = "red"

Or whatever color you want.

0

You can use the CSS color property.

newElement.innerHTML = "<span style='color:green;'>You can download the file in " + counter.toString() + " seconds.</span>";

You can use classes as well.

newElement.innerHTML = "<span class='text-primary'>You can download the file in " + counter.toString() + " seconds.</span>";
3
  • Can I also use bootstrap here? Jul 27, 2020 at 16:10
  • @PakWorkForce Yes. Jul 27, 2020 at 16:12
  • @PakWorkForce No problem. Jul 27, 2020 at 16:13
0

Check below code for you requirement.

var downloadButton = document.getElementById("download");
var counter = 30;
var newElement = document.createElement("p");
newElement.innerHTML = "Job Advertisement will be visible after <span style='color: red;'>30</span> Seconds";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
  counter--;
  if (counter < 0) {
    newElement.parentNode.replaceChild(downloadButton, newElement);
    clearInterval(id);
  } else {

    newElement.innerHTML = "You can download the file in <span style='color: red;'>" + counter.toString() + "</span> seconds.";

  }
}, 1000);
<div>
  <button id="download">Download</button>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.