Document getelementbyid is not a function ошибка

I’m learning jQuery and was following a tutorial, a very strange error has perplexed me.
Here’s my html :

<!doctype html>
<html>
  <head>
    <title> Simple Task List </title>
    <script src="jquery.js"></script>
    <script src="task-list.js"></script>
  </head>

  <body>
    <ul id="tasks">

    </ul>
      <input type="text" id="task-text" />
      <input type="submit" id="add-task" />
  </body>
</html>

and The jQuery :

$(document).ready(function(){
    //To add a task when the user hits the return key
    $('#task-text').keydown(function(evt){
      if(evt.keyCode == 13)
      {
        add_task(this, evt);
      }
      });
    //To add a task when the user clicks on the submit button
      $("#add-task").click(function(evt){
        add_task(document.getElementByID("task-text"),evt);
        });
    });

function add_task(textBox, evt){
  evt.preventDefault();
  var taskText = textBox.value;
  $("<li>").text(taskText).appendTo("#tasks");
  textBox.value = "";
};

When I add elements By hitting the return key, there’s no problem.
But When I click the Submit Button then firebug shows this error

document.getElementByID is not a function
[Break On This Error] add_task(document.getElementByID("task-text"),evt);
task-list.js (line 11)

I tried to use jQuery instead replacing it with

$("#task-text")

This time the error is :

$("<li>").text(taskText).appendTo is not a function
[Break On This Error] $("<li>").text(taskText).appendTo("#tasks");
task-list.js (line 18
which results in the following error

I’ve been trying to debug this for some time but i just don’t get it. Its probably a really silly mistake that i’ve made. Any help is most appreciated.

Edit :
I’m using jQuery 1.6.1

Источник

Сообщение

TypeError: "x" is not a function

Тип ошибки

Что пошло не так?

Была сделана попытка вызвать значение как функцию, но оно на самом деле не является функцией. Некоторый код ожидает, что вы предоставите функцию, но этого не происходит.

Возможно, есть ошибка в имени функции? Возможно, объект, метод которого вы вызываете, не содержит в себе этой функции? Для примера, JavaScript объекты не имеют map функции, а JavaScript Array — имеют.

Есть множество функций, нуждающихся в колбэк-функциях. Вы должны будете предоставить колбэк-функцию для того, чтобы эти методы работы правильно:

Когда работаете с Array или TypedArray объектами:
- Array.prototype.every(), Array.prototype.some(), Array.prototype.forEach(), Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), Array.prototype.reduceRight(), Array.prototype.find()
Когда работаете с Map (en-US) и Set объектами:
- Map.prototype.forEach() (en-US) и Set.prototype.forEach()

Примеры

Ошибки в имени функции

В данном случае, случающемся очень часто, есть опечатка в имени метода:

var x = document.getElementByID("foo");
// TypeError: document.getElementByID is not a function

Корректное имя функции — getElementById:

var x = document.getElementById("foo");

Функция вызвана с неверным объектом

Для некоторых методов вы должны предоставить колбэк-функцию, и она будет работать только на корректных объектах. В этом примере используется Array.prototype.map(), в котором Array будет работать только с массивами.

var obj = { a: 13, b: 37, c: 42 };

obj.map(function(num) {
  return num * 2;
});

// TypeError: obj.map is not a function

Использование с массивом:

var numbers = [1, 4, 9];

numbers.map(function(num) {
  return num * 2;
});

// Array [ 2, 8, 18 ]

Смотрите также

Источник

30 / 47 / 19

Регистрация: 23.10.2014

Сообщений: 1,001

06.06.2016, 12:57. Показов 20150. Ответов 14

Скажите пожалуйста класс document встроенный или надо какие то библиотеки подключать? Почему у меня все время пишет ошибки типа «getElementById is not function» и т.п.???

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

Ренегат

Эксперт HTML/CSS

1740 / 1085 / 386

Регистрация: 06.08.2014

Сообщений: 5,203

Записей в блоге: 1

06.06.2016, 13:14

Dark Byte, это встроенный объект языка, все библиотеки его используют

вы лучше покажите код, который у вас выкидывает ошибки

105 / 93 / 50

Регистрация: 17.09.2015

Сообщений: 610

06.06.2016, 13:16

Ничего не надо подключать, вот пример.

Dark Byte

30 / 47 / 19

Регистрация: 23.10.2014

Сообщений: 1,001

06.06.2016, 13:32

[ТС]

Код такой:

Javascript

var field = document.getElementsById("game-field");
 
for (var i = 0; i < 10; i++)
{
    var block = document.createElement("div");
    block.ids = "game-block";   
    field.appendChild(block);
}

супермизантроп

Эксперт JS

3931 / 2970 / 690

Регистрация: 18.04.2012

Сообщений: 8,622

06.06.2016, 13:42

document — это, во-первых, объект, а никак не

~~класс~~

во-вторых, ошибка, которую показывает вам консоль, трактуется однозначно — элемент, к которому вы обратились по его идентификатору, ещё не «прочитан» парсером браузера

30 / 47 / 19

Регистрация: 23.10.2014

Сообщений: 1,001

06.06.2016, 14:08

[ТС]

Цитата
Сообщение от kalabuni
Посмотреть сообщение

ошибка, которую показывает вам консоль, трактуется однозначно — элемент, к которому вы обратились по его идентификатору, ещё не «прочитан» парсером браузера

Если бы это было так то он бы так и писал наверное? Он пишет то совсем другую ошибку!

kalabuni

супермизантроп

Эксперт JS

3931 / 2970 / 690

Регистрация: 18.04.2012

Сообщений: 8,622

06.06.2016, 14:30

Цитата
Сообщение от Dark Byte
Посмотреть сообщение

Если бы это было так то он бы так и писал наверное? Он пишет то совсем другую ошибку!

так он именно это и пишет, проверьте

HTML5

<script>
// пытаемся изменить цвет шрифта элемента, который парсером ещё не прочитан
document.getElementById ('myDiv').style.color = 'red';
// смотрим консоль ошибок и видим там "getElementById is not function"
</script>
 
<div id="myDiv">текст</div>

30 / 47 / 19

Регистрация: 23.10.2014

Сообщений: 1,001

06.06.2016, 14:51

[ТС]

Цитата
Сообщение от kalabuni
Посмотреть сообщение

«getElementById is not function

1. пикаем google translate
2. получаем: getElementById не функция
3. ???
4. PROFIT!!!

Хитрая блондиночка $)

1470 / 985 / 399

Регистрация: 21.12.2015

Сообщений: 3,785

06.06.2016, 15:04

Цитата
Сообщение от Dark Byte
Посмотреть сообщение

«getElementById is not function» и т.п.?

Может в этом слове есть кириллица? Такое бывает, и очень сложно отличить «е» от «e», хотя для компьютера это не одно и то же.

Dark Byte

30 / 47 / 19

Регистрация: 23.10.2014

Сообщений: 1,001

06.06.2016, 16:00

[ТС]

Цитата
Сообщение от Hikari
Посмотреть сообщение

Разумеется нет, что я дебил чтоли писать на английской раскладке, а потом переключиться на русскую специально чтобы поставить ‘e’ на ней и обратно.

Добавлено через 7 минут
О кажется понял в чем дело. У меня опечатка была действительно, но не в раскладке. Было getElementsById а не getElementById. Сейчас поменял все стало нормально. Но почему у меня не получается добавлять блоки? Они не добавляются!!! Вот полный код:

HTML5

<!doctype html>
 
<html>
 
    <head>
        
        <meta charset="utf-8">
        
        <link href="styles.css" rel="stylesheet">
        
        <script src="scripts.js"></script>
 
        <title>Minesweeper</title>
        
    </head>
 
    <body>
        
        <form>      
            <button id="button-fill" onclick="fill_click()">fill</button>
        </form>
        
        <div id="game-field">
        </div>
        
    </body>
    
</html>

CSS

#game-field {
    background-color: gray;
    width: 500px;
    height: 500px;
    margin: 200px 200px 200px 500px;
}
 
div.game-block {
    background-color: green;
    width: 10px;
    height: 10px;
}
 
#button-fill {
    width: 50px;
    height: 25px;
}

Javascript

function fill_click() {
    var field = document.getElementById("game-field");
 
    for (var i = 0; i < 10; i++)
    {
        var block = document.createElement("div");
        block.class = "game-block";     
        field.appendChild(block);
    }
}

Добавлено через 36 минут
Оказывается надо было не class, а className писать. Но теперь другая проблема. Все эти блоки появляются на долю секунды и пропадают! Куда они деваются и как сделать чтобы они на совсем остались?

супермизантроп

Эксперт JS

3931 / 2970 / 690

Регистрация: 18.04.2012

Сообщений: 8,622

06.06.2016, 16:25

пропишите в классе .game-block правило overflow: hidden, ибо 10 пикселей высоты — это маловато будет

30 / 47 / 19

Регистрация: 23.10.2014

Сообщений: 1,001

06.06.2016, 16:31

[ТС]

Цитата
Сообщение от kalabuni
Посмотреть сообщение

пропишите в классе .game-block правило overflow: hidden, ибо 10 пикселей высоты — это маловато будет

А причем тут это? Я же говорю моргает на долю секунды. Их видно. Но они сразу пропадают. Это не то маленький размер. Тут в чем то другом дело.

Михаил_96

20 / 20 / 13

Регистрация: 22.11.2015

Сообщений: 109

06.06.2016, 18:13

Лучший ответ Сообщение было отмечено Dark Byte как решение

Решение

Цитата
Сообщение от Dark Byte
Посмотреть сообщение

Синтаксис выучил, но с html через него не работал.

Javascript

1	(function(){var c;})()for(;;){c=2}var c = class class_{}.__proto__;alert(alert(console.log(c)));

Вот это все правильно по синтаксу, но вовсе неправильно по логике, более того — это просто дебильный код. Поэтому, когда пишете, что вы выучили синтаксис того или иного языка, то это ничего не означает. А на работах за это еще увольняют))

По теме

HTML5

1
2
3

<form>      
    <button id="button-fill" onclick="fill_click()">fill</button>
</form>

Тег формы тут не нужен, ибо он создан для отправлений сообщений на сервер

30 / 47 / 19

Регистрация: 23.10.2014

Сообщений: 1,001

06.06.2016, 18:34

[ТС]

Цитата
Сообщение от Михаил_96
Посмотреть сообщение

В коде нефига не понял. В основном из-за полного отсутствия форматирования. При чем это тут вообще? Я вообще то на работу с js связанную пока и не устраиваюсь. Чего вы все до меня докопались?

Цитата
Сообщение от Михаил_96
Посмотреть сообщение

По теме

Не понял. А в чем разница? Разве у меня не то же самое написано?

Цитата
Сообщение от Михаил_96
Посмотреть сообщение

Тег формы тут не нужен, ибо он создан для отправлений сообщений на сервер

О кажется и правда в этом была проблема! Просто я читал что button может использоваться только на форме… Не знал что можно и отдельно.

20 / 20 / 13

Регистрация: 22.11.2015

Сообщений: 109

06.06.2016, 20:45

Цитата
Сообщение от Dark Byte
Посмотреть сообщение

Ладно, простите мою бестактность, я не хотел докапываться до вас)

Источник

Document getelementbyid is not a function ошибка

Сообщение

Тип ошибки

Что пошло не так?

Примеры

Ошибки в имени функции

Функция вызвана с неверным объектом

Смотрите также

Решение

А вот еще интересные материалы: