Selected values for HTML form not being recognized using Vanilla JS

Question

I am not able to determine why the selected values for radio groups 'complexity' or 'time' are not being established as variables as requested. Per html, each group has a default checked option although when I request the variables in the DOM i am given 'undefined' when it should be "1" for both values.

Thank you

var complexity = document.getElementsByName('complexity').value,
        time = document.getElementsByName('time').value,
    value = Number(complexity) * Number(time);

document.getElementById('value').innerHTML = value;

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="Agile Estimation Calculator">
        <meta name="author" content="Jon Vojtush">
        <title>Agile Estimation Calculator</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <style>
            body {background-color: #000000; color: #ffffff; text-align: center;}
            div.row {padding: 20px 0px; margin: auto; max-width: 60%;}
            img#github {max-height: 30px;}
            a#total {font-size: 22px; background-color: #ffffff; color: #000000; font-weight: 600;}
            #submit {margin-top: 30px;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2>Agile Estimation Calculator</h2>
                </div>
            </div>
            <hr />
            <form id="calculator">
                <fieldset id="complexity">
                    <div class="row">
                        <legend>Complexity</legend>
                        <div class="col">
                            <input id="complexity-easy" type="radio" value="1" name="complexity" aria-label="Easy level of complexity" checked><br />
                            <label for="complexity-easy" class="form-label">Easy</label>
                        </div>
                        <div class="col">
                            <input id="complexity-moderate" type="radio" value="2" name="complexity" aria-label="Moderate level of complexity"><br />
                            <label for="complexity-moderate" class="form-label">Moderate</label>
                        </div>
                        <div class="col">
                            <input id="complexity-difficult" type="radio" value="3" name="complexity" aria-label="Difficult level of complexity"><br />
                            <label for="complexity-difficult" class="form-label">Difficult</label>
                        </div>
                    </div>
                </fieldset>
                &nbsp;
                <fieldset id="time">
                    <div class="row">
                        <legend>Time</legend>
                        <div class="col">
                            <input id="time-day" type="radio" value="1" name="time" aria-label="1 day or less of effort" checked><br />
                            <label for="time-day" class="form-label">1 Day or Less</label>
                        </div>
                        <div class="col">
                            <input id="time-week" type="radio" value="2" name="time" aria-label="2 - 5 days of effort"><br />
                            <label for="time-week" class="form-label">2-5 Days</label>
                        </div>
                        <div class="col">
                            <input id="time-bi" type="radio" value="4" name="time" aria-label="1 - 2 weeks of effort"><br />
                            <label for="time-bi" class="form-label">1-2 Weeks</label>
                        </div>
                        <div class="col">
                            <input id="time-month" type="radio" value="6" name="time" aria-label="2 weeks - 1 months of effort"><br />
                            <label for="time-month" class="form-label">2 Weeks - 1 Month</label>
                        </div>
                    </div>
                </fieldset>
                <div class="row">
                    <div class="col"> 
                        <a id="total"><span id="value"></span> Points</a><br />
                        <button type="submit" class="btn btn-primary" id="submit" onclick="document.getElementById('value').innerHTML = value; return false">Update</button>
                    </div>
                </div>
            </form>
            <hr />
            <div class="row">
                <div class="col">
                    <a target="_blank" title="Support This Developer on GitHub" href="https://github.com/sponsors/JonVojtush"><img id="github" src="github.png" alt="Support This Developer on GitHub"></a>
                </div>
            </div>
        </div>
    </body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName - a `NodeList` does not have a `value` property — Robin Zigmond, Aug 02 '21 at 18:20
[document.getElementsByName()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName) returns NodeList. Value is property of the element in this NodeList. — Lluser, Aug 02 '21 at 18:21

score 1 · Answer 1 · answered Aug 02 '21 at 18:23

1

The problem is that getElementsByName returns an array of elements (nodelist), you only want the value of the checked radio so you can use

var complexity = document.querySelector('input[name="complexity"]:checked').value;

which is 1 in your example code

answered Aug 02 '21 at 18:23

john Smith

17,409
11
76
117

Yes, I have find the same answer. It applies well to radio buttons :) – Godev Aug 02 '21 at 18:36

Selected values for HTML form not being recognized using Vanilla JS

1 Answers1