Добавить стиль к элементу с пользовательского ввода

Question

У меня есть базовый генератор для радиуса границы, где пользователь вводит номер по своему выбору и вводит номер в код предварительного просмотра. Однако я хочу иметь окно предварительного просмотра, которое изменяется в соответствии с номером, который они вставили. Я на полпути, но не могу понять последний бит.

HTML:

<label>Border Radius:</label> 
<input name="border-radius" id="jj_input" class="jj_input" type="text" size="2" value='' onkeyup='changeRadius()' /> 
<span>px</span> 

<div class="yourcode"> 
    <p>border-radius: <span id="radius"></span>px; </p> 
    <p>webkit-border-radius: <span id="radius2"></span>px; </p> 
</div> 

<div id="preview"> 
    <span class="preview_text">Preview Text</span> 
</div> 

Javascript:

function changeRadius(){ 
    var jj_input = document.getElementById('jj_input').value; 
    document.getElementById('radius').innerHTML = jj_input; 
    document.getElementById('radius2').innerHTML = jj_input; 

    document.getElementById('preview').style.borderRadius = 'WHAT_GOES_HERE?' ; 
} 

Где говорит "WHAT_GOES_HERE?", Я хочу, это значение будет такой же, как jj_input.

Любые идеи?

Answer 1

document.getElementById('preview').style.borderRadius = jj_input + 'px'; 

Мы просто назначая значение element.style.borderRadius в том, что из jj_input и конкатенации в px.