HTML onclick=“;myFunction”;不起作用

HTML onclick="myFunction" not working

本文关键字：myFunction 不起作用 onclick HTML      更新时间：2023-09-26

首先，我检查了几个教程网站，以澄清语法，如OnClick事件和prompt属性，并将javascript从body重新定位到head（我听说这可以解决与浏览器相关的问题）。

由于某些原因，OnClick事件不起任何作用。我已经测试了网站在浏览器和单选按钮加载正确。

<!DOCTYPE html>
<html>
<head>
<script>
    function checkSkillLevel() {
        if(document.getElementById('skill_Easy').checked) {
            var ok = prompt("You chose Easy");
        }
        else if(document.getElementById('skill_Medium').checked) {
            var ok = prompt("You chose Medium");
        }
        else if document(getElementById('skill_Hard').checked) {
            var ok = prompt("You chose Hard");
        }
        else {
            var ok = prompt("Welcome to my tic tac toe game! To get started, please pick a skill level.");
        }
    }
</script>
</head>
<body>
<table cellpadding="10">
    <tr>
            <td><h1>Tic Tac Toe</h1></td>
    </tr>
    <tr>
        <td>
            <form action="" onclick="checkSkillLevel()">
            <input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
            <input type="radio" name="skill" value="Medium" id="skill_Medium">Medium<br>
            <input type="radio" name="skill" value="Hard" id="skill_Hard">Hard<br>
        </td>
    </tr>

此外，对于任何想法，我更喜欢纯Javascript（请不要JQuery）。

您应该将onclick添加到所有输入中，并更正以下行中的拼写错误：

else if document(getElementById('skill_Hard').checked) {

应为：

else if(document.getElementById('skill_Hard').checked) {

希望这能有所帮助。

代码段

function checkSkillLevel() {
  if(document.getElementById('skill_Easy').checked) {
    var ok = prompt("You chose Easy");
  }
  else if(document.getElementById('skill_Medium').checked) {
    var ok = prompt("You chose Medium");
  }
  else if(document.getElementById('skill_Hard').checked) {
    var ok = prompt("You chose Hard");
  }
  else {
    var ok = prompt("Welcome to my tic tac toe game! To get started, please pick a skill level.");
  }
}
<table cellpadding="10">
  <tr>
    <td><h1>Tic Tac Toe</h1></td>
  </tr>
  <tr>
    <td>
        <input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();"/>Easy<br/>
        <input type="radio" name="skill" value="Medium" id="skill_Medium" onclick="checkSkillLevel();"/>Medium<br/>
        <input type="radio" name="skill" value="Hard" id="skill_Hard" onclick="checkSkillLevel();"/>Hard<br/>
        
    </td>
  </tr>
</table>

为每个单选按钮添加一个onclick attr或一个onchange attr，它就会工作。

这一切都是关于哪些元素正在侦听onclick事件。表单没有onclick，而是有onsubmit。不过，按钮具有onclick。

<td>
    <form action="" onclick="checkSkillLevel()">
    <input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
    <input type="radio" name="skill" value="Medium" id="skill_Medium">Medium<br>
    <input type="radio" name="skill" value="Hard" id="skill_Hard">Hard<br>
</td>

成为：

<td>
    <form action="">
    <input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
    <input type="radio" name="skill" value="Medium" id="skill_Medium" onclick="checkSkillLevel();">Medium<br>
    <input type="radio" name="skill" value="Hard" id="skill_Hard" onclick="checkSkillLevel();">Hard<br>
</td>

此外，我还有一件事。为什么要使用prompt()向用户显示他们的选择？请改用alert()。

相关文章：