javascript - 调用 Javascript 函数处理表单后，HTML 表单未打印到浏览器

Question

<script type="text/javascript">

function gr8r( form ) {

document.write( '"' + form.s1.value + '"' );    

if ( form.s1.value > form.s2.value ) 
    document.write( ' is gr8r than ' );
else
    document.write( ' is not gr8r than ' );

document.write( '"' + form.s2.value + '"' );


}

</script>

<form action="" method="post">

<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />

</form>

我期望的结果是单击按钮后执行 JavaScript，然后显示 html 表单...但 html 表单随后不显示...

非常感谢任何帮助，谢谢!

我想要的输出是:

2 is gr8r than 1

<form action="" method="post">

<input type="text" name="s1" value="" />
<input type="text" name="s2" value="" />
<br />
<input type="button" value="click" onclick="gr8r(this.form)" />

</form>

Answer 1

你可以试试这个:

<script type="text/javascript">
function gr8r( form ) {
    document.getElementById("output").innerHTML = document.getElementById("s1").value;

    if ( document.getElementById("s1").value > document.getElementById("s2").value ) 
        document.getElementById("output").innerHTML += ' is gr8r than ';
    else
        document.getElementById("output").innerHTML += ' is not gr8r than ';

    document.getElementById("output").innerHTML += document.getElementById("s2").value;
}
</script>

<div id="output"></div>
<form action="" method="post">
    <input type="text" id="s1" value="" />
    <input type="text" id="s2" value="" />
    <br />
    <input type="button" value="click" onclick="gr8r(this.form)" />
</form>

div 用于显示输出。 div 和表单的字段都是通过它们的 id 选择的。

如果您想确保用户没有输入字符串，请使用以下 javascript:

function gr8r( form ) {
    if (isFinite(document.getElementById("s1").value) && isFinite(document.getElementById("s2").value)) {
        document.getElementById("output").innerHTML = document.getElementById("s1").value;

        if (document.getElementById("s1").value > document.getElementById("s2").value) 
            document.getElementById("output").innerHTML += ' is gr8r than ';
        else
            document.getElementById("output").innerHTML += ' is not gr8r than ';

        document.getElementById("output").innerHTML += document.getElementById("s2").value;
    }
    else {
        document.getElementById("output").innerHTML = "Please enter only floats!";
    }
}