Сохранение CSS при динамическом изменении текста с помощью javascript

Question

Я пытался рандомизировать число с помощью кнопки, но каждый раз, когда я нажимал кнопку, число рандомизировалось, но текст теряет свой стиль CSS.

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") 
    }) 

}) 

моя ссылка JSFiddle: https://jsfiddle.net/he4rtbr0ken/9jfud4nz/2/

Answer 1

Вы ориентируетесь родителя <span>, а затем изменить его текст, который по существу удаляет промежуток и заменяет его только номером. Вы можете исправить это, настроив диапазон или включить диапазон в добавляемом тексте.

Answer 2

Вы хотите изменить текст в пролете, а не # number1

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

Answer 3

Спасибо за ответ!

Я нацелил <span> элемент, и он работает.

заменен print() функция с кодами ниже.

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