How do I compare the value of an element returned by getElementsByName to a string?

Question

I'm making a quiz with a text input. This is what I have so far:

<html>
    <head>
        <script type="text/javascript">
            function check() {
                var s1 = document.getElementsByName('s1');
                if(s1 == 'ō') {
                    document.getElementById("as1").innerHTML = 'Correct';
                } else {
                    document.getElementById("as1").innerHTML = 'Incorrect';
                }
                var s2 = document.getElementsByName('s2');
                if(s2 == 's') {
                    document.getElementById("as2").innerHTML = 'Correct';
                } else {
                    document.getElementById("as2").innerHTML = 'Incorrect';
                }
                //(...etc...)
                var p3 = document.getElementsByName('p3');
                if(p3 == 'nt') {
                    document.getElementById("ap3").innerHTML = 'Correct';
                } else {
                    document.getElementById("ap3").innerHTML = 'Incorrect';
                }
            }
        </script>
    </head>
    <body>
        1st sing<input type="text" name="s1"> <div id="as1"><br>
        2nd sing<input type="text" name="s2"> <div id="as2"><br>
        <!-- ...etc... -->
        3rd pl<input type="text" name="p3"> <div id="ap3"><br>
        <button onclick='check()'>Check Answers</button>
    </body>
</html>

Every time I check answers it always says Incorrect and only shows the first question. I also need a way to clear the text fields after I check the answers. One of the answers has a macro. Thanks in advance.

You do realize this quiz can be hacked by anyone with a browser plugin, right? — toniedzwiedz, Nov 12 '12 at 15:08
In addition to the problems with `getElementsByName` you also have a logic error for your `p1` item. You probably mean `if(p1 == 'mus')` — j08691, Nov 12 '12 at 15:14
as said you should check not to make confusion between p1 and p2 and also you should be carefull to close the tags, perhaps it is the reason why you're only displays one inputs (if I understood well your problem) — epsilones, Nov 12 '12 at 15:16
Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Jun 04 '19 at 14:27

Shadow The GPT Wizard · Accepted Answer · 2012-11-12T15:15:30.397

The method getElementsByName returns a NodeList, you can't really compare that against a string. If you have only one element with such name, you need to grab the first element from that list using such code instead:

var s1 = document.getElementsByName('s1')[0].value;

To make it more flexible and elegant plus avoid error when you have typo in a name, first add such function:

function SetStatus(sName, sCorrect, sPlaceholder) {
    var elements = document.getElementsByName(sName);
    if (elements.length == 1) {
        var placeholder = document.getElementById(sPlaceholder);
        if (placeholder) {
            var value = elements[0].value;
            placeholder.innerHTML = (value === sCorrect) ? "Correct" : "Incorrect";
        } else {
            //uncomment below line to show debug info
            //alert("placeholder " + sPlaceholder+ " does not exist");
        }
    } else {
        //uncomment below line to show debug info
        //alert("element named " + sName + " does not exist or exists more than once");
    }
}

Then your code will become:

SetStatus('s1', 'ō', 'as1');
SetStatus('s2', 's', 'as2');
//...

Still only seeing first question after clicking button. Here is my check function: `function check() { SetStatus('s1', 'ō', 'as1'); SetStatus('s2', 's', 'as2'); SetStatus('s3', 't', 'as3'); SetStatus('p1', 'mus', 'ap1'); SetStatus('p2', 'tis', 'ap2'); SetStatus('p3', 'nt', 'ap3'); }` — sears, Nov 12 '12 at 15:26
@sks you need to close your `
` tags, e.g. `
`. Your current HTML is invalid. — Shadow The GPT Wizard, Nov 12 '12 at 15:27

score 0 · Answer 2 · answered Nov 12 '12 at 15:08

0

document.getElementsByName('s1') is an array you should use document.getElementsByName('s1')[0] to get certain element(first in this case)

answered Nov 12 '12 at 15:08

dav

8,931
15
76
140

2

That's actually a NodeList not an array. You access it the same way, but you can't use array functions on it. (pop, push, etc) "TypeError: Object # has no method 'pop'" – tbwiii Nov 12 '12 at 15:42

How do I compare the value of an element returned by getElementsByName to a string?

2 Answers2