如何使用javascript使用onclick在div中显示特定字体类型？

Question

I have a form with radio buttons each of which representing a different font. When the user selects one and hits create the font should appear in the display div.

Here is part of HTML and one of the buttons on the form:

<div id="form">
    <form id="nameForm" method="get" action="nowhere.php">
        <div class="formbox">
            <div id="radioTitle">
                Pick a font:
            </div>
            <label for="normal" class="normal">Normal</label>    
            <input type="radio" name="fonts" id="normal" />
    </form>
</div>

<div id="display">  
</div>

I'm not sure how to grab the font and get the specific one to display in the div using javascript.

function fonts(){
    if(wholeForm.normal.checked == true){

    }
}

Answer 1

CSS:

.new-font {
  font-family: ...;
}

JS:

wholeForm.className = wholeForm.className + " otherclass";

Answer 2

Check out this example:

http://jsfiddle.net/ug6Lu/3/

Note that you need any selected font to either be installed on the user's computer or loaded using css/javascript.

HTML:

<div id="form">
    <form id="nameForm" method="get" action="nowhere.php">
        <div class="formbox">
            <div id="radioTitle">
                Pick a font:
            </div>
            <label for="normal" class="normal">Normal</label>    
            <input type="radio" name="fonts" id="normal" />
    </form>
</div>

<div id="display">  
Example Text
 </div>

JS:

var checkRadio = document.getElementById('normal');
checkRadio.addEventListener("click", modifyFont, false);

function modifyFont(e){
    if(e.target.checked == true) {
        document.getElementById('display').style.fontFamily = "monospace";
    }
}