提交HTML输出替换文本一次表单

时间:2013-06-09 20:44:33

标签: javascript html html5

这是我的代码。出于某种原因,已加星标的行有问题。每当我加载页面时,我都会像我应该的那样得到 / 15 。但是,当我提交html表单时,输出会替换 / 15 。是否有输出在 / 15 之前而不是替换它?

<html>
<head>


</head>
<body class="mmmm">
<div class="center">

<script language="JavaScript">
function add(){   
    var rawScore=document.getElementById('rawScore');
    var apScore=document.getElementById('apScore');
    var mcPerc=document.getElementById('mcPerc');

    rawScore.value = 0;
    rawScore.value = Math.round(parseInt(mc.value)
                                + parseInt(one.value)*1.1538
                                + parseInt(two.value)*.9375
                                + parseInt(three.value)*1.25);
    mcPerc.value= Math.round(parseInt(mc.value)/60*1000)/10;
    if (rawScore.value>=73){
        apScore.value="5";
    }
    else if(rawScore.value>=57){
        apScore.value="4";
    }
    else if(rawScore.value>=49){
        apScore.value="3";
    }
    else if(rawScore.value>=38){
        apScore.value="2";
    }
    else{
        apScore.value="1";
    }
}
</script>




 <form class="bbbb" name="frmf">

    Multiple Choice Score:
    <input class="ddddd" type="number" id="mc" value="60" min="0" max="60"/>
    <FONT COLOR="474747">/60</FONT>

    <br/>
    Free Response 1 Score:
    <input class="aaaaa" type="number" id="one" value="13" min="0" max="13"/>
    <FONT COLOR="474747">/13</FONT>

    <br/>
    Free Response 2 Score: 
    <input class="aaaaa" type="number" id="two" value="8" min="0" max="8"/>
    <FONT COLOR="474747">/8</FONT>

    <br/>
    Free Response 3 Score: 
    <input class="aaaaa" type="number" id="three" value="6" min="0" max="6"/>
    <FONT COLOR="474747">/6</FONT>

    <br/>
    <p>
        <input type ="button" value="Calculate Score" onClick="add();"/>
        <br/>
        <br/>
        **AP Score:
        <output class="apScore" type="text" id="apScore"/> /15**
        <p>
            <br/>
            <br/>
            Raw Score:
            <output class="rawScore" type="text" id="rawScore"/>
            <p>
                Multiple Choice Percent:
                <output class="mcPerc" type="text" id="mcPerc"/>
            </p>
        </p>
    </p>
</form>

</div>
</body>

</html>

2 个答案:

答案 0 :(得分:2)

您需要将相应的结束标记添加到<output>元素中。否则,由于浏览器中可能存在错误,它认为跟随它的是值:

**AP Score: <output class="apScore" type="text" id="apScore"></output> /15**

请注意,IE不支持<output>代码。

答案 1 :(得分:-1)

apScore.value = "3" + apScore.value;怎么样? 在它当前的值之前会加上“3” 通常你可以apScore.value="1" + "/15";甚至apScore.value="1/15";