Javascript not entering the if condition

Question

I have been working with html and javascript for a couple of days and I'm stuck at this point. I need to take an answer for an mcq and display whether it is right or wrong Why is the if condition not entered ?

I have just put a simple javascript using GetElemntById and .checked with .value this is not a school assignment this is some thing that i have been planning for a long time

<html>
<head>
    <script>
        document.write("In javascript");
            function myFunction()
            {
                document.write("In the function");
                if(document.getElementById('a1').checked)
                {
                    document.write("in if");
                    var x = document.getElementById('a1').value
                    document.write(x);
                }else
                {
                    document.write("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
                }

            }
    </script>
</head>

<body>

    <p> How much is 2+2 ?? </p>
    4 : <input type="radio" name="ans" id="a1" value="4"><br/ >
    5 : <input type="radio" name="ans" id="a2" value="5"><br/ >
    6 : <input type="radio" name="ans" id="a3" value="6"><br/ >
    7 : <input type="radio" name="ans" id="a4" value="7"><br/ >

    <button onClick="myFunction()">clickz</button>


</body>

</html>

don't use document.write() use alert or console.log if its for debugging. — Neha, Feb 28 '14 at 04:45
if u use document.write(). it erase the all DOM element and write only "In the function". — , Feb 28 '14 at 04:47

charlee · Answer 1 · 2014-02-28T04:53:24.393

1

document.write() call will clear all the contents on the web page if you call it after page loading is completed, which causes all of your radio buttons disappear. So you won't get anything by document.getElementById.

Remove those document.write and use console.log or alert if you want to output any debug logs.

edited Feb 28 '14 at 04:53

answered Feb 28 '14 at 04:46

charlee

1,103
1
8
21

Jeremy D · Answer 2 · 2014-02-28T04:55:27.820

You can't use document.write once the document is loaded. If you do, your browser will open a new document that replaces the current, so, you cannot access any of your html content. This is why your document.getElementById() returned null, and it was not possible to check the property checked.

Replace your document.write() by alert()/console.log()

<script>
    document.write("In javascript");
        function myFunction()
        {
            if(document.getElementById("a1").checked)
            {
                alert("in if");
                var x = document.getElementById('a1').value
                console.log(x);
            }else
            {
                alert("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
            }

        }
</script>

score 0 · Answer 3 · answered Feb 28 '14 at 04:50

<script>
        document.write("In javascript");
            function myFunction()
            {

                if(document.getElementByName('ans').checked)
                {
                    document.write("in if");
                    var x = document.getElementById('a1').value
                    document.write(x);
                }else
                {
                    document.write("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
                }

            }
    </script>

your code will work only if you check 1st answer ,because you use id for that only ,change document.getElementById to document.getElementByName

score 0 · Answer 4 · edited May 23 '17 at 10:26

0

There is a problem with document.write

If document.write is called a after a page has loaded, it will erase all the previous contents, which is the problem in your case.

If document.write is in the body, there is no such problem.

See this thread for more insight why is document.write a bad practise

edited May 23 '17 at 10:26

Community

1
1

answered Feb 28 '14 at 04:52

rahulmishra

611
1
11
27

Bijaya Khadka · Answer 5 · 2014-02-28T05:10:29.997

As other saying. Main problem is with your *"document.write("In javascript");"

It is clearing your input element before going through your condition.

Check it out fiddle example

Click here!

< script > function myFunction() {
    if (document.getElementById('a1').checked) {
        alert("in if")
        var x = document.getElementById('a1').value
        alert(x);
    } else {
        alert("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
    }

} < /script>



<p>How much is 2+2 ??</p>
<div>
        <input type="radio" name="ans" id="a1" value="4"/>
        </br>
        <input type="radio" name="ans" id="a2" value="5" />
        </br>
        <input type="radio" name="ans" id="a3" value="6" />
        </br>
        <input type="radio" name="ans" id="a4" value="7" />
        </br>
        <button onclick="myFunction()">Click me</button>
</div>

Javascript not entering the if condition

5 Answers5