从javascript更改html中的字体和值_Javascript_Html_Forms

从javascript更改html中的字体和值

javascript html forms

从javascript更改html中的字体和值,javascript,html,forms,Javascript,Html,Forms,我有一个html表单，我想在点击按钮时将文本从“冠军联赛琐事”更改为“曼彻斯特”。它只改变了一秒钟的削减，然后又回到了“冠军联赛琐事”。我不明白为什么它会变回来。有什么想法吗 <script type="text/javascript" src="quiz.js" ></script> <body> <form action="" method="post" onsubmit="return checkscript()"> <h1&

我有一个html表单，我想在点击按钮时将文本从“冠军联赛琐事”更改为“曼彻斯特”。它只改变了一秒钟的削减，然后又回到了“冠军联赛琐事”。我不明白为什么它会变回来。有什么想法吗

<script  type="text/javascript" src="quiz.js" ></script>
<body>
<form action="" method="post" onsubmit="return checkscript()">
    <h1>Choose a Quiz</h1>

    <p><input type="radio" name="Radio" value="1" /><font size="5"
    color="#0033CC" id="cl">Champions League Trivia</font><br />
    <br />
    <input type="radio" name="Radio" value="2" /><font size="5"
    color="#CC0000" id="epl">English Premier League Trivia</font><br />
    <br />
    <input type="radio" name="Radio" value="3" /><font size="5"
    color="#660033" id="ll">La Liga Trivia</font><br />
    <br />
    <input type="submit" name="Submit" value="Go" onclick="quizRun()" /></p>
    </form>
    <p id="result"></p>
    </body>
    </html>


选择测验
冠军联赛琐事



英超联赛琐事



西甲琐事

下面是javascript

function quizRun()
{
var inputs = document.getElementsByTagName("input");
var choice = 0;
if (inputs[0].checked) {
        choice = 1;
        var cl = document.getElementById('cl');
        cl.textContent = 'Manchester';
}
if (inputs[1].checked) {
        choice = 2;

}
if (inputs[2].checked) {
        choice = 3;
}
}
function checkscript()
{
    var inputs = document.getElementsByTagName("input");
    for (var i=0, l=inputs.length; i<l; i++) {
        if (inputs[i].name === "Radio" && inputs[i].checked) return true;
    }
    return false;
}

函数quizRun（）
{
var inputs=document.getElementsByTagName（“输入”）；
var选择=0；
如果（输入[0]。已选中）{
选择=1；
var cl=document.getElementById（'cl'）；
cl.textContent=‘曼彻斯特’；
}
如果（输入[1]。已选中）{
选择=2；
}
如果（输入[2]。已选中）{
选择=3；
}
}
函数checkscript（）
{
var inputs=document.getElementsByTagName（“输入”）；
对于（var i=0，l=inputs.length；i尝试使用cl.innerHTML='Manchester'；

编辑：
您的表单标记没有任何操作，因此页面可能会刷新，导致原始值返回。向表单提交事件添加return false
或preventDefault
将阻止表单提交。
我尝试了您的脚本，我发现：值会更改，但表单已提交，因此页面会重新加载并重试文本变回。
发生的情况是，您的按钮是type=“submit”
。当您提交表单时，页面将被重新加载，并返回原始值
如果您不想提交表单，只需将“Go”按钮更改为type=“button”
实际上我自己也尝试过该代码，innerHTML或innerText也不起作用@ben fossen
因此，出现这种情况的唯一原因是因为值实际上发生了更改，但是表单提交并重置了值
好的，我想这可能就是问题所在。有办法解决吗？我不希望它重新加载。onsubmit=“return checkscript（）”，如果你不想要，为什么要返回true？是的，它应该总是返回false。我现在明白了。