CODEWITHSUNDEEP
javascripthtml
user5760382
user5760382

Reputation:

HTML onclick="myFunction" not working

First, i have checked several tutorial sites to clarify syntax such as the OnClick event and the prompt property and relocated the javascript from body to head (I heard this can fix browser-related problems).

For some reason OnClick event does nothing. I have tested website in-browser and radio buttons load correctly.

<!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>

Also, I would prefer pure Javascript (no JQuery please) for any ideas.

Upvotes: 0

Views: 1239

Answers (3)

Pierce
Pierce

Reputation: 325

It's all about which elements are listening to the onclick event. The form does not have onclick, it has onsubmit. The buttons have onclick, though.

<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>

Becomes:

<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>

Additionally, I have one other thing. Why are you using prompt() for showing the user their selection? Use alert() instead.

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You should add onclick to all the inputs, and correct the typo in the following line :

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

Should be :

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

Hope this helps.

Snippet

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>

Upvotes: 1

osanger
osanger

Reputation: 2352

Add an onclick-attr or an onchange-attr with the function to each radio-button and it will work.

Upvotes: 0

Related Questions