Question

I am trying to make a basic border radius generator. I have an input field for the user to type in the number of their choice as shown below:

<label>Border Radius:</label>
<input name="border-radius" class="jj_input" type="text" size="2" />

I then have an output area where I want the number they have typed in to appear before “px”

<div class="yourcode">
     border-radius: *NUMBER_APPEARS_HERE*px;
</div>

Im not sure how to go about this, so could someone please point me in the right direction. Please also let me know if this has been answered already. Thanks in advance.

Answer 1

Got it working in the end:

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

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

<script type="text/javascript">
   function changeRadius(){
        var jj_input = document.getElementById('jj_input').value;
        document.getElementById('radius').innerHTML = jj_input;
   }
</script>