getelementsbyname не возвращает никакого значения

Question

Я провел весь день, читая учебные пособия, но не могу найти ответ на этот основной вопрос.

Все, что я хочу сделать, это получить доступ к значению поля ввода. Я сделал основную заглушку, чтобы попытаться научить себя. Желаемое поведение заключается в том, что когда я нажимаю кнопку "отправить", я должен получить предупреждение со значением числового поля "точки". Однако, когда я размещаю следующий код на своем веб-сайте, а затем нажимаю кнопку "Отправить", ничего не происходит.

<script type="text/javascript">
    function checknumber()
    {
        var testnumber=document.getelementsbyname("points").value;
        alert(testnumber);
    }
</script>
<input type="number" name="points" value="1">Points<br>
<input type="submit" onclick="checknumber();">

Что я делаю неправильно?

Кстати, если я избавлюсь от строки "getelementsbyname" и изменим скрипт следующим образом:

function checknumber()
{
    var testnumber="hello world";
    alert(testnumber);
}

Затем все работает нормально, я получаю всплывающее окно с текстом "Привет мир", как и ожидалось.

Любая помощь будет оценена.

Answer 1

Это потому что getElementsByName возвращает HTMLCollection, Таким образом, вы должны использовать:

function checknumber()
{
    var testnumber=document.getElementsByName("point")[0].value;
    alert(testnumber);
}

или же

function checknumber()
{
    var testnumber=document.getElementsByName("point")[0].value;
    alert(testnumber);
}

Вот демоверсия (нажмите "Запустить с JS", введите любое число и нажмите кнопку; появится всплывающее предупреждение).