CODEWITHSUNDEEP
javascripthtmlcss
Rudheim
Rudheim

Reputation: 51

How to fire onlick() function only when a radio button is checked?

I am practising my JS and I am making a battleship game. I have a grid of buttons 10x10. Each button has reply_click() function that gives me id corresponding to the relevant position on the grid.

<button id="00" onclick="reply_click(this.id)"></button>

and

function reply_click(clicked_id) {
   //some code 
}

I want to fire reply_click() function only when a radio button is checked and ignore it in all other scenarios.

I tried to a make a radio button with onclick() function that checks if that radio button is checked, but I was not able to place reply_click() function inside it.

Example:

<input type="radio" id="1s" name="ship" onclick="check()">
<label for="1s">1 square ship</label><br>

and 

function check() {
   if (document.getElementById('1s').checked) {
       //dont know what to put here
   }
}

Upvotes: 1

Views: 72

Answers (3)

DCR
DCR

Reputation: 15665

take a look at this solution. Not really sure what you are asking but this seems like it might help.

function reply_click(clicked_id) 
    {
       console.log(clicked_id);
       if(clicked_id !== "00")console.log('do stuff');
    }


function check(event)
{
    
    if(document.getElementById(event.id).checked)
        {
           reply_click(event.id);
        }
}
<button id="00" onclick="reply_click(this.id)"></button>


<input type="radio" id="1s" name="ship" onclick="check(this)">
<label for="1s">1 square ship</label><br>

Upvotes: 2

Not A Robot
Not A Robot

Reputation: 2684

You can disable the button and only enable when a radio button is checked

function reply_click(clicked_id) {
  console.log("Definaley i am not disabled now: "+clicked_id); 
}


function check()
{
    if(document.getElementById('1s').checked)
        {
          
           document.getElementById("00").disabled = false;
           document.getElementById("00").innerText = "Now i am enable";
        }
}
<input type="radio" id="1s" name="ship" onclick="check()">
<label for="1s">1 square ship</label><br>

<button id="00"  onclick="reply_click(this.id)" disabled>I am disabled</button>

Upvotes: 1

Roland Ruul
Roland Ruul

Reputation: 1242

Add if statement inside reply_click.. eg:

function reply_click(clicked_id) {
    if (document.getElementById('1s').checked) {
        //  Do stuff
    }
}

Upvotes: 1

Related Questions