Giving returned value their own span tag

JavaScript
1

Hi there,

I have the following countdown script that outputs the number of days left until a specified date.

This works fine, but I would like to wrap each number retuned in a span so I can give each number a style as at the moment it is just outputting a number in a div.

Can anyone tell me how I can do this?

Thanks!

2

#1: You can apply styles to divs.

#2: You’re trying to wrap each individual number in a span?
Convert the number to a string.
split the string;
join the string, using "</span><span>" as the glue.
Output the result wrapped in a span: "<span>"+out+"</span>"

1 Like
3

Hi,

Thanks for the reply.

I have tried this:

var str = days;
var res = str.split(" ");
document.getElementById("demo2").innerHTML = res;

But I don’t think it is right.

4

each line in my previous post contains a link to a function. Try giving them a read.

1 Like
5

Try this:

JS

  let ouputHTML= '';
  if (days) {
  	ouputHTML+=`<span class="days"> ${days} days</span>,`;
  }

  if (hours) {
  	ouputHTML+=`<span class="hours"> ${hours} hours</span>, and`;
  }
  if (minutes) {
  	ouputHTML+=`<span class="minutes"> ${hours} minutes</span>, and`;
  }
  	ouputHTML+=`<span class="seconds"> ${seconds} seconds</span>`;

  document.getElementById("countdown").innerHTML = ouputHTML;

CSS

.days{ font-size:2em;}
.hours{ font-weight:bold;}
.minutes{ font-style:italic}
.seconds{ color:red;}

Note, the IF(—) logic is there to prevent 0s (“0 Days, 0 Hours”…etc). You can write the string template (a widely supported feature of ES6) as one line if you want the 0s to be displayed.

hope that helps

6

Thank you :slight_smile: I will try that

7

I had an old countdown timer and modified your code a little - the css isn’t the greatest, but it should get you working. I have to say you really don’t have to do much to the code as that is great. It’s basically just HTML/CSS work that I did.

https://jsfiddle.net/Strider64/x2sypdgv/

1 Like
8

Thanks @Pepster64 I had a look and it looks like it groups the numbers together rather than individually. I will try to work out how to split them :slight_smile:

9

The variables days, hours, minutes and seconds are all separate. They could be put into anything HTML tag, I just used the old HTML/CSS tags just as an example. I just used .textContent as I don’t like using .innerHTML.

10

Thanks, I see.

The issue I have is actually separating the numbers in the days, so each single digit is in it’s own span or div. At the moment they are in a single div, e.g. <div class="day">90</div> but I am trying to have something like

<div class="day"><span>9</span><span>0</span></div>

12

Ah, I guess I didn’t fully understand the original request. If what you need is every INDIVIDUAL DIGIT wrapped in a tag I would first write a helper function:

		 function splitAndWrap(str,bef,aft){
			 str= str.toString().split('').join(aft+bef);
			 return  str  ?  bef+str+aft:''  ;
		 }

Then, modify my earlier suggestion:

		 if (days) {
  	ouputHTML+=`<span class="days"> ${splitAndWrap(days,'<span>','</span>')} days</span>,`;
  }

  if (hours) {
  	ouputHTML+=`<span class="hours"> ${splitAndWrap(hours,'<span>','</span>')} hours</span>, and`;
  }
  if (minutes) {
  	ouputHTML+=`<span class="minutes"> ${splitAndWrap(minutes,'<span>','</span>')}minutes</span>, and`;
  }
  	ouputHTML+=`<span class="seconds"> ${splitAndWrap(seconds,'<span>','</span>')} seconds</span>`;

and that should do it

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.