javascript - onclick 后功能没有启动

标签 javascript onclick getelementbyid

嗨，我试着为我的 friend 们做一个测验。我在我的编辑器中设置了功能并且它起作用了，当我将它移动到服务器时，按下按钮后没有任何反应。

我的 html 代码是:

<div align="center"><img src="../obrazki/logo/logo4.jpg" class="logo"/></div>
<form  method="post" name="Formularz">
<strong>1. Question 1</strong><br>
<input  type="radio" name="a" value="5" />a) answer 1<br/>
<input  type="radio" name="a" value="3" />b) answer 2<br/>
<input  type="radio" name="a" value="1" />c) answer 3<br/>
<br/>
 .
 .
 .
<strong>15. Question 15</strong><br> 
<input  type="radio" name="b" value="5" />a) answer 1 <br/>
<input  type="radio" name="b" value="3" />b) answer 2<br/>
<input  type="radio" name="b" value="1" />c) answer 3<br/>
<br/>
</form>
<form method="post" name="formularz2" >
<strong>16. question16</strong><br> 
<input  type="radio" name="p" value="9" />a) answer 1<br/>
<input  type="radio" name="p" value="7" />b) answer 2<br/>
<input  type="radio" name="p" value="5" />c) answer 3<br/>
<input  type="radio" name="p" value="3" />d) answer 4<br/>
<input  type="radio" name="p" value="1" />e) answer 5<br/>
<br/>
.
.
.
<strong>20. Question 20</strong><br> 
<input  type="radio" name="w" value="9" />answer 1<br/>
<input  type="radio" name="w" value="7" />answer 2<br/>
<input  type="radio" name="w" value="5" />answer 3<br/>
<input  type="radio" name="w" value="3" />d) answer 4<br/>
<input  type="radio" name="w" value="1" />e) answer 5<br/>
<br/>
</form>
<button  type="button" onclick="checkRadio()">test</button>
<a  href="../index.htm"><p  align="center">Strona Główna</p></a>
<div id="suma"></div>
<div  id="suma2"></div>

我的脚本是这样的:

<script type="text/javascript">
 function checkRadio() {
alert("hello World");
var form = document.getElementById('Formularz');
var form2 = document.getElementById('Formularz2');
var suma = 0;
var suma2= 0;
for ( var i=0; i<form.elements.length; i++)
if (form.elements[i].checked) {
        suma=suma+parseInt(form.elements[i].value);
        document.getElementById("suma").innerHTML = suma;
}
alert(suma);
for ( var i=0; i<form2.elements.length; i++)
if (form2.elements[i].checked) {
        suma2=suma2+parseInt(form2.elements[i].value);
        document.getElementById("suma2").innerHTML = suma2;
}
alert(suma2);
if (suma<9){
    if (suma2<20) {window.location="spider_bushi.htm"};
    else if (suma2<30) {window.location="spider_courtier.htm"};
    else {window.location="spider_shugenja.htm"}; 
}
 else if (suma<17){
    if (suma2<10) {window.location="scorpion_ninja.htm"};
    else if (suma2<20) {window.location="scorpion_bushi.htm"};
    else if (suma2<30) {window.location="scorpion_courtier.htm"};
    else {window.location="scorpion_shugenja.htm"};
}
else if (suma<26){
        if (suma2<20) {window.location="crab_bushi.htm"};
    else if (suma2<30) {window.location="crab_courtier.htm"};
    else if (suma2<40) {window.location="crab_shugenja.htm"};
    else {window.location="crab_monk.htm"}; 
}
else if (suma<34){
    if (suma2<15) {window.location="mantis_bushi.htm"};
    else if (suma2<30) {window.location="mantis_courtier.htm"};
    else {window.location="mantis_shugenja.htm"}; 
}
else if (suma<42){
    if (suma2<15) {window.location="unicron_bushi.htm"}; 
    else if (suma2<30) {window.location="unicron_courtier.htm"}; 
    else {window.location="unicron_shugenja.htm"}; 
}
else if (suma<51){
    if (suma2<20) {window.location="dragon_bushi.htm"}; 
    else if (suma2<30) {window.location="dragon_courtier.htm"};
    else if (suma2<40) {window.location="dragon_shugenja.htm"};
    else {window.location="dragon_monk.htm"}; 
}
else if (suma<60){
    if (suma2<20) {window.location="phoenix_bushi.htm"}; 
    else if (suma2<30) {window.location="phoenix_courtier.htm"}; 
    else if (suma2<40) {window.location="phoenix_shugenja.htm"}; 
    else {window.location="phoenix_monk.htm"}; 
}
    else if (suma<68){
    if (suma2<16) {window.location="crane_bushi.htm"}; 
    else if (suma2<31) {window.location="crane_courtier.htm"};
    else {window.location="crane_shugenja.htm"}; 
}
    else if (suma<76){
    if (suma2<16) {window.location="lion_bushi.htm"}; 
    else if (suma2<31) {window.location="lion_courtier.htm"};
    else {window.location="lion_shugenja.htm"};
}
else { alert("brak") }
} 
</script>

脚本正在运行，因为在加载页面时放置一个“hello World”会起作用。但是按钮根本不启动 checkRadio 功能，它甚至不转到“hello world”行。 请帮忙。

最佳答案

您的代码中几乎没有错误。

首先，您使用的是 ;不必要地在 if-else block 中。

if (suma2<20) {window.location="crab_bushi.htm"};
    else if (suma2<30) {window.location="crab_courtier.htm"};
    else if (suma2<40) {window.location="crab_shugenja.htm"};
    else {window.location="crab_monk.htm"};

语句 var form = document.getElementById('Formularz');是错的。因为没有名为 Formularz 的表单 ID .

我已经纠正了这些错误。

HTML:

<div align="center"><img src="../obrazki/logo/logo4.jpg" class="logo"/></div>
<form  method="post" name="Formularz" id="Formularz">
<strong>1. Question 1</strong><br>
<input  type="radio" name="a" value="5" />a) answer 1<br/>
<input  type="radio" name="a" value="3" />b) answer 2<br/>
<input  type="radio" name="a" value="1" />c) answer 3<br/>
<br/>
 .
 .
 .
<strong>15. Question 15</strong><br> 
<input  type="radio" name="b" value="5" />a) answer 1 <br/>
<input  type="radio" name="b" value="3" />b) answer 2<br/>
<input  type="radio" name="b" value="1" />c) answer 3<br/>
<br/>
</form>
<form method="post" name="formularz2" id="formularz2" >
<strong>16. question16</strong><br> 
<input  type="radio" name="p" value="9" />a) answer 1<br/>
<input  type="radio" name="p" value="7" />b) answer 2<br/>
<input  type="radio" name="p" value="5" />c) answer 3<br/>
<input  type="radio" name="p" value="3" />d) answer 4<br/>
<input  type="radio" name="p" value="1" />e) answer 5<br/>
<br/>
.
.
.
<strong>20. Question 20</strong><br> 
<input  type="radio" name="w" value="9" />answer 1<br/>
<input  type="radio" name="w" value="7" />answer 2<br/>
<input  type="radio" name="w" value="5" />answer 3<br/>
<input  type="radio" name="w" value="3" />d) answer 4<br/>
<input  type="radio" name="w" value="1" />e) answer 5<br/>
<br/>
</form>
<button  type="button" onclick="checkRadio()">test</button>
<a  href="../index.htm"><p  align="center">Strona Główna</p></a>
<div id="suma"></div>
<div  id="suma2"></div>

JS:

function checkRadio() {
    alert("hello World");
    var form = document.getElementById('Formularz');
    var form2 = document.getElementById('Formularz2');
    var suma = 0;
    var suma2 = 0;
    for (var i = 0; i < form.elements.length; i++)
    if (form.elements[i].checked) {
        suma = suma + parseInt(form.elements[i].value,10);
        document.getElementById("suma").innerHTML = suma;
    }
    alert(suma);
    for ( i = 0; i < form2.elements.length; i++)
    if (form2.elements[i].checked) {
        suma2 = suma2 + parseInt(form2.elements[i].value,10);
        document.getElementById("suma2").innerHTML = suma2;
    }
    alert(suma2);
    if (suma < 9) {
        if (suma2 < 20) {
            window.location = "spider_bushi.htm";
        } else if (suma2 < 30) {
            window.location = "spider_courtier.htm";
        } else {
            window.location = "spider_shugenja.htm";
        }
    } else if (suma < 17) {
        if (suma2 < 10) {
            window.location = "scorpion_ninja.htm";
        } else if (suma2 < 20) {
            window.location = "scorpion_bushi.htm";
        } else if (suma2 < 30) {
            window.location = "scorpion_courtier.htm";
        } else {
            window.location = "scorpion_shugenja.htm";
        }
    } else if (suma < 26) {
        if (suma2 < 20) {
            window.location = "crab_bushi.htm";
        } else if (suma2 < 30) {
            window.location = "crab_courtier.htm";
        } else if (suma2 < 40) {
            window.location = "crab_shugenja.htm";
        } else {
            window.location = "crab_monk.htm";
        }
    } else if (suma < 34) {
        if (suma2 < 15) {
            window.location = "mantis_bushi.htm";
        } else if (suma2 < 30) {
            window.location = "mantis_courtier.htm";
        } else {
            window.location = "mantis_shugenja.htm";
        }
    } else if (suma < 42) {
        if (suma2 < 15) {
            window.location = "unicron_bushi.htm";
        } else if (suma2 < 30) {
            window.location = "unicron_courtier.htm";
        } else {
            window.location = "unicron_shugenja.htm";
        }
    } else if (suma < 51) {
        if (suma2 < 20) {
            window.location = "dragon_bushi.htm";
        } else if (suma2 < 30) {
            window.location = "dragon_courtier.htm";
        } else if (suma2 < 40) {
            window.location = "dragon_shugenja.htm";
        } else {
            window.location = "dragon_monk.htm";
        }
    } else if (suma < 60) {
        if (suma2 < 20) {
            window.location = "phoenix_bushi.htm";
        } else if (suma2 < 30) {
            window.location = "phoenix_courtier.htm";
        } else if (suma2 < 40) {
            window.location = "phoenix_shugenja.htm";
        } else {
            window.location = "phoenix_monk.htm";
        }
    } else if (suma < 68) {
        if (suma2 < 16) {
            window.location = "crane_bushi.htm";
        } else if (suma2 < 31) {
            window.location = "crane_courtier.htm";
        } else {
            window.location = "crane_shugenja.htm";
        }
    } else if (suma < 76) {
        if (suma2 < 16) {
            window.location = "lion_bushi.htm";
        } else if (suma2 < 31) {
            window.location = "lion_courtier.htm";
        } else {
            window.location = "lion_shugenja.htm";
        }
    } else {
        alert("brak");
    }
}

即使是现在，代码也无法完美运行(如预期)。原因是您在同一页面中使用了两个表单。在 stack-overflow 上已经有很多关于在同一页面处理多个表单的答案。

JavaScript 代码调试建议:

使用 Chrome 调试器或 Firebug 进行逐行 JS 代码调试。如果开发人员控制台打开，执行将中断。它也适用于 Firebug 。

Link

此外，您始终可以在 JSFIDDLE 测试您的 javascript 代码。 JS Fiddle 是最好的 JavaScript 在线 IDE。它查明 JS 错误，甚至显示错误消息。

关于javascript - onclick 后功能没有启动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16139453/

上一篇：javascript - 移动后使可移动图像按钮静止

下一篇：javascript - Socket.io 不从客户端向服务器发送数据

相关文章：

javascript - 使用 react 钩子(Hook)和 typescript 为操作对象创建接口(interface)的正确方法是什么

java - LibGdx 中的输入 - 操作处理

java - onClick MediaPlayer 错误所有音频均已播放

javascript - 按下按钮时在电子邮件中显示 HTML 下拉选择

javascript - document.getElementById ('articleTitle' ).value 不起作用

Javascript For Loop On Array of Input fields 与 document.getElementById 相关

javascript - Chrome 模式输入验证上的正则表达式

javascript - 如何将 View 数组添加到可 ScrollView

javascript - 通过 href 滚动到元素与 Bootstrap 模式冲突

javascript - 如何使多个 document.getElementById() 在同一页面上工作？

©2024 IT工具网  联系我们