Retaining CSS when changing text dynamically with javascript

Question

I've been trying to randomize a number with a button, but every time I clicked the button, the number randomizes, but the text loses it's CSS style.

CSS

.numberStyle {
  padding: 10px 10px 10px 10px;
  color: blue;
}

.numberStyle span {
  font-size: 100px;
}

Html

<class id="number1" class="numberStyle"><span>1</span></class>
<input type="button" value="MATCH!" style="font-size:50px;"></input>

Javascript

function randomize() {
  no1 = Math.ceil(Math.random() * 3);
}

function print() {
  $("#number1").text(no1);
}

$().ready(function() {

  $(":input").click(function() {
    randomize()
    print()
    alert("Change")
  })

})

my JSFiddle link : https://jsfiddle.net/he4rtbr0ken/9jfud4nz/2/

Jeff Tabachnick · Accepted Answer · 2016-02-26 02:08:17Z

1

You want to change the text within the span rather than #number1

function print() {
    $("span").text(no1);
}

answered Feb 26, 2016 at 2:08

Jeff Tabachnick

1531 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Centijo Over a year ago

This doesn't work if there's more than one span on the page. The selector isn't specific enough.

Clark Ozanne Over a year ago

The point of a span is the same as any other tag, which is to categorize. If they need more specificity they should consider to either add a class or use a different tag all together. This answer is the most direct with the given information.

Damon · Accepted Answer · 2016-02-26 02:03:02Z

0

You are targeting the parent of the <span> element and then changing its text which is essentially removing the span and replacing it with only the number. You can fix this by targeting the span or including the span in the text you are adding.

answered Feb 26, 2016 at 2:03

Damon

4,3562 gold badges19 silver badges27 bronze badges

Comments

Weiping · Accepted Answer · 2016-02-26 02:16:31Z

0

Thanks for the answer!

I've targeted <span> element and it works.

replaced print() function with the codes below.

function print() {
  $("#number1 > span").text(no1);
}

answered Feb 26, 2016 at 2:16

Weiping

533 bronze badges

Collectives™ on Stack Overflow

Retaining CSS when changing text dynamically with javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related