CODEWITHSUNDEEP
javascript
Faiz
Faiz

Reputation: 79

What is wrong with my custom radio button made in JavaScript?

I am trying to make a simple radio button in JavaScript. The problem is whenever I check the bool of BtnIsChkd (ButtonIsChecked) nothing happens while I expect an alert box!
Here's my code:- 

<!DOCTYPE html>

<html>
    <head>
        <title>JavaScript Practice</title>
        <style type="text/css">
            *{
                font-family:ebrima;
            }
            #radio{
                height:30px;
                width:30px;
                border:2px solid cyan;
                border-radius:20px;
                float:left;
            }
            #dot{
                z-index:2;
                height:20px;
                width:20px;
                background:cyan;
                border-radius:20px;
                margin-left:-27px;
                margin-top:7px;
                float:left;
                display:none;
                }
        </style>

    </head>

    <body">
            <div id="radio" onClick="checkTheButton()"></div>
            <div id="dot" style="display:none;" onClick="checkTheButton()"></div>
            <button type="button" onClick="testing()">Check</button>
            <script>

                    var BtnIsChkd = false;

                function checkTheButton() {

                    var button = document.getElementById('radio');
                    var dot = document.getElementById('dot');

                    if(dot.style.display == "none")
                    {
                        dot.style.display = "block";
                        BtnIsChkd = true;
                    } else{
                        dot.style.display = "none";
                        BtnIsChkd = false;
                    }
                }
                function testing(){
                    if(BtnIsChkd == "true"){
                        alert("Yes");
                    }
                    else if(BtnIsChkd == "false") {
                        alert("No");
                    }
                }
            </script>
    </body>
</html>

Upvotes: 0

Views: 66

Answers (3)

Johann Echavarria
Johann Echavarria

Reputation: 9965

Just delete double quotes in the body starting tag: 

<body">

Upvotes: 0

Jan-Paul Kleemans
Jan-Paul Kleemans

Reputation: 828

Inside your function testing() you check if BtnIsChkd is equal to the String true or false while the BtnIsChkd is set to a boolean inside your checkTheButton() function.

Your function testing() has to look like this:

           function testing(){
                if(BtnIsChkd === true){
                    alert("Yes");
                }
                else if(BtnIsChkd === false) {
                    alert("No");
                }
            }

Upvotes: 1

Tyler McGinnis
Tyler McGinnis

Reputation: 35286

You have quotes on your booleans. In testing() use BtnIsChkd == true instead of "true" and the same for false.

        function testing(){
            if(BtnIsChkd == true){
                alert("Yes");
            }
            else if(BtnIsChkd == false) {
                alert("No");
            }
        }

Upvotes: 2

Related Questions