Не могу получить элемент

Здравствуйте, поэтому, когда я пытаюсь получить элемент тело в JavaScript, я получаю сообщение об ошибке, что это нулевой. Но всякий раз, когда я использую тот же метод для получения элемента, но в другом файле, он работает отлично.

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

Вот мой HTML:

<table class = "table table-striped" >
    <thead>
        <tr>
            <th scope = "col">ID</th>
            <th scope = "col">Name</th>
            <th scope = "col">Photo</th>
            <th scope = "col">Price</th>
            <th scope = "col">Operation</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

И мой JS

    data_base.body.appendChild(tr);


        const data_base = {
            body: document.getElementsByTagName("tbody")[0],
        }

Вы уверены, что ссылаетесь на скрипт в обоих файлах?

Zach Jensz 17.03.2022 12:57

В разметке нет элемента с именем класса «информация» или «скрытие».

Teemu 17.03.2022 12:57

Да, я пробовал console.info, и это сработало.

Bahram Gozalov 17.03.2022 12:58

Я просто не включил их, так как они не имеют отношения к моей проблеме.

Bahram Gozalov 17.03.2022 12:59

@BahramGozalov Если они не связаны с вашей проблемой, то почему вы включили вызовы document.getElementsByClassName, которые пытаются выбрать эти элементы? Редактировать свой пост и укажите минимальный воспроизводимый пример, пожалуйста.

Sebastian Simon 17.03.2022 13:01

добро пожаловать в бахрам stackoverflow, пожалуйста, убедитесь, что у вас есть тур по Как спросить и минимальный воспроизводимый пример, совершенно неясно, что вы пытаетесь здесь сделать.

Bagus Tesa 17.03.2022 13:01

"они не имеют отношения к моей проблеме" Хорошо, что тогда? Где именно вы пытаетесь получить доступ tbody?

Teemu 17.03.2022 13:01
operation.setAttribute("click", "sitDown()"); смысла нет. Вы, скорее всего, имели в виду operation.addEventListener("click", sitDown);.
Sebastian Simon 17.03.2022 13:07

Прочтите документация.

Sebastian Simon 17.03.2022 13:08

Убедитесь, что ваш сценарий не запущен до того, как элементы будут созданы.

Teemu 17.03.2022 13:26

Спасибо Теему! Это сработало

Bahram Gozalov 17.03.2022 13:28

Кто-нибудь знает, как архивировать вопросы?

Bahram Gozalov 17.03.2022 13:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
12
77
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В последней строке newTable() вы пытаетесь получить доступ к <tbody> с помощью строки data_base.body. Однако это не как работает доступ.

Попробуйте изменить строку на data_base.tBodies[0].

Возможно, вы думаете о document.body для свойства с таким же названием.

data_base.body, кажется, определено несколько правильно перед вызовом функции.
Teemu 17.03.2022 13:25

Вопрос был отредактирован. Так или иначе, видимо, решение было найдено.

Boldewyn 17.03.2022 14:43

Действительно это было. Спасибо за помощь!

Bahram Gozalov 17.03.2022 16:00
Ответ принят как подходящий

вот как вы можете получить элемент ur tbody

const tbody = document.querySelector('tbody');

поэтому вместо

data_base.body.appendChild(tr);

использовать :

tbody.appendChild(tr);

не могли бы вы быть более ясным и сказать, где вы пытаетесь добраться до вашего элемента tbody?

кстати можно заменить

    const tr = document.createElement("tr");

    const td_id = document.createElement("td");

    const td_name = document.createElement("td");

    const image = document.createElement("img");

    const td_image = document.createElement("td");

    td_image.appendChild(image);

    const td_price = document.createElement("td");

    const td_operation = document.createElement("td");

    const operation = document.createElement("button");

    td_operation.appendChild(operation);

    td_id.textContent = i;

    td_name.textContent = data_base.naming;

    image.src = data_base.url;

    image.alt = "Couldn't load image";

    td_price.textContent = data_base.price;

    operation.setAttribute("click", "sitDown()");



    tr.appendChild(td_id);
    tr.appendChild(td_name);
    tr.appendChild(td_image);
    tr.appendChild(td_price);
    tr.appendChild(td_operation);
    data_base.body.appendChild(tr);

с

const tr = document.createElement("tr");

tr.innerHTML = `
<td>${i}</td>
<td>${data_base.naming}</td>
<td><img src = "${data_base.url}" alt = "Couldn't load image"></td>
<td>${data_base.price}</td>
<td><button></button></td>
`;

data_base.body.append(tr);

чтобы сделать ваш код более читабельным

и не добавляйте прослушиватель событий в качестве атрибута, как вы сделали здесь

operation.setAttribute("click", "sitDown()");

Поэтому я получаю его из массива с именем «data_base». Я пробовал ваш метод, но он показывает мне, что он не определен

Bahram Gozalov 17.03.2022 13:16

Можете ли вы предоставить мне более подробную информацию, показать мне исключение ошибки ??

mmh4all 17.03.2022 13:19

script.js:106 Uncaught TypeError: невозможно прочитать свойства null (чтение "appendChild") в appendThis (script.js:106:15) в newTable (script.js:109:5) в giveMe (script.js:137: 9) в script.js:141:1

Bahram Gozalov 17.03.2022 13:25

@BahramGozalov Пожалуйста, добавьте это сообщение об ошибке к своему вопросу, это может помешать закрытию вопроса.

Teemu 17.03.2022 13:32

Итак, позвольте мне понять вашу проблему, у вас есть данные, сохраненные в локальном хранилище, и вы хотите поместить их в вашу таблицу, а не тело? @БахрамГозалов

mmh4all 17.03.2022 13:34

Проблема была исправлена. Это было все потому, что я связал JS перед таблицей

Bahram Gozalov 17.03.2022 13:36

@BahramGozalov проверьте мое отредактированное решение, чтобы предотвратить больше ошибок

mmh4all 17.03.2022 13:48

Другие вопросы по теме