CODEWITHSUNDEEP
javascripthtml
Jayanga Kaushalya
Jayanga Kaushalya

Reputation: 2744

getElementsByName returns undefined

This is my javascript:

<script type="text/javascript">
    var crct_answrs = new Array(<?php echo implode(',', $crct_ans); ?>);
    var answrs = new Array();

    function check_ans(){
        for(var i = 1; i < 11; i++){
            var tst = "ques"+i;
            var radio = document.getElementsByName(tst);
            for (var x = 0; x < radio.length; x ++) {
                if (radio[x].checked) {
                    answrs = radio.value;
                }   
            }
        }       
    }   
</script>

This is part of HTML:

<form>
            <div id="quest1" class="question">
                <div class="prblm">
                    <?php echo $questions[1]; ?></div>
                <table class="answrs">
                    <tr>
                        <td><?php echo $answrs[1][1]; ?></td>
                        <td><input name="ques1" type="radio" value="1"></td>
                    </tr>
                    <tr>
                        <td><?php echo $answrs[1][2]; ?></td>
                        <td><input name="ques1" type="radio" value="2"></td>
                    </tr>
                    <tr>
                        <td><?php echo $answrs[1][3]; ?></td>
                        <td><input name="ques1" type="radio" value="3"></td>
                    </tr>
                    <tr>
                        <td><?php echo $answrs[1][4]; ?></td>
                        <td><input name="ques1" type="radio" value="4"></td>
                    </tr>
                </table>
            </div>

I have 10 same pattern div tags with tables and the input name is change accordingly. check_ans() runs on onclick. But all the time getElementsByName returns undefined. Why this happens. Please help me. Thanks!

Upvotes: 0

Views: 4248

Answers (3)

Marv-el
Marv-el

Reputation: 1

I sometimes get an undefined var assigned to document.getElementsByName(name).

So I would try to see if any answers from the web would help. Alas, nothing worked.

So I went ahead and tested the array I thought I should be getting. and the elements were there. So just ignore the 'undefined' and proceed working with the var.

Upvotes: -1

Code Maverick
Code Maverick

Reputation: 20415

Your error lies in:

if (radio[x].checked) {
    answrs = radio.value;
}

answrs is an array and needs to set values to the index of the corresponding iterator it's on. radio.value is trying to access value from the radio array, but has left out it's index as well. Look at my solution below for the fix:

I've got a jsFiddle working.

JavaScript:

var answrs = [];

function check_ans() {
    for (var i = 1; i <= 10; i++) {
        var radio = document.getElementsByName("ques" + i);
        for (var x = 0; x < radio.length; x++) {
            if (radio[x].checked) {
                answrs[i-1] = radio[x].value;
            }
        }
    }
    console.log(answrs);
}​

Output:

When selecting an answer 1, 2, 3, 4, 3, 2, 1, 2, 3, 4 for questions 1-10 the array is:

["1", "2", "3", "4", "3", "2", "1", "2", "3", "4"]

Upvotes: 3

Piotr Kochański
Piotr Kochański

Reputation: 22672

Hmmm. This worked for me (I've removed some PHP code)

<html>
<head>
<script type="text/javascript">
    var crct_answrs = new Array();
    var answrs = new Array();

    function check_ans(){

        for(var i = 1; i < 11; i++){
            var tst = "ques"+i;

            var radio = document.getElementsByName(tst);
            alert(radio);
            for (var x = 0; x < radio.length; x ++) {
                if (radio[x].checked) {
                    answrs = radio.value;
                }   
            }
        }       
    }   
</script>
</head>
<body>
<button type="button" onclick="check_ans();">test</button>
            <div id="quest1" class="question">
                <div class="prblm">
                    <?php echo $questions[1]; ?></div>
                <table class="answrs">
                    <tr>
                        <td><?php echo $answrs[1][1]; ?></td>
                        <td><input name="ques1" type="radio" value="1"></td>
                    </tr>
                    <tr>
                        <td><?php echo $answrs[1][2]; ?></td>
                        <td><input name="ques1" type="radio" value="2"></td>
                    </tr>
                    <tr>
                        <td><?php echo $answrs[1][3]; ?></td>
                        <td><input name="ques1" type="radio" value="3"></td>
                    </tr>
                    <tr>
                        <td><?php echo $answrs[1][4]; ?></td>
                        <td><input name="ques1" type="radio" value="4"></td>
                    </tr>
                </table>
            </div>

<body/>
</html>

Any differences from your code? alert call shows values.

Upvotes: 0

Related Questions