Почему console.log вместо нужного элемента html в console браузера (любого), выводит буквенное значение??

Question

Почему console.log вместо нужного элемента html в console браузера (любого), выводит буквенное значение??

LastFaysti [Анархия] Чижиков Ученик (140), на голосовании 11 месяцев назад

скрипт подключен через <link src="site/main.js"> , открывая панель разработчика (f12), в console

должен выводиться " <button class="btn">click</button> " , но вместо этого оно выводит значение " btn " , просто буквенное значение, как это можно исправить?

HTML:

<body>
<button class="btn">click</button>
</body>

JS:

const btn = document.querySelector('.btn')
console.log('btn')

Answer 1

_ Искусственный Интеллект (834210) 1 год назад

Так у тебя и написано в коде console.log('btn')

Answer 2

Саня Семенов Оракул (60497) 1 год назад

 console.log(btn)// если логировать константу а не строчку то в консоле будет элемент вместо строки

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

в консоле разработчика должен был выводиться элемент button, а не просто тест cube

Саня Семенов Оракул (60497) LastFaysti [Анархия] Чижиков, ты строку передал в console.log вот оно строку и вывело передавал бы элемент вывело бы элемент.

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

вот в этом и вопрос, как вывести именно элемент?

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

При вводе через селектор, оно какого то х... выводит значение null, хотя элемент есть

Саня СеменовОракул (60497) 1 год назад

компилятор всегда прав если говорит нету элемента значит его действительно нету
на странице тоже визуально кнопке не наблюдается на приведенном скрине
еще может быть криво написан селектор

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

можно тогда написать или найти код, где console log будет выводить элемент в консоль корректно? я уже совсем не понимаю в чем ошибка

Саня Семенов Оракул (60497) LastFaysti [Анархия] Чижиков, чтобы вывести корректно надо вызывать так

 console.log(элемент)

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

через класс тоже не работает

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

я тестировал и (div), и (span) ни то ни то не работает

Саня Семенов Оракул (60497) LastFaysti [Анархия] Чижиков,

во первых у тебя ошибка в коде которая выводится красным . не факт что код после ошибки будет работать вообще
во вторых элементы сами не выбираются их надо выбирать отдельно
кинь код текстом - скажу в чем ошибка, тут не видно
https://codepen.io/norbert123/pen/YzBGbXO так должно быть примерно
если не обладаешь спокойствием и упорством то программить это не твое и учи лучше что нибудь другое

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

Вот ваш код, почему то значение выводит опять null , сейчас кину ввиде текста

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="img/x-icon" href="icon/tosha.png">

<script src="js_test.js"></script>
<title>JavaScript</title>
</head>

<body>
<button class="btn">кнопка</button>
</body>

</html>

JS:

btn = document.querySelector('.btn')

//alert(btn) ;
console.log(btn);

Саня Семенов Оракул (60497) LastFaysti [Анархия] Чижиков, попробовал - все выводится (по тому же адресу сохранил). в чем вопрос то ?

LastFaysti [Анархия] ЧижиковУченик (140) 1 год назад

у меня почему то выводиться null, я уже не знаю что думать, уже такие глупые мысли что проблема в visual studia, браузере или самое тупое в моем пк, я только начал изучать js, и у меня сразу же такая ошибка а которой нигде в интернете нету информации

Саня Семенов Оракул (60497) что делает Visual Studio я не знаю. Там же браузерный JS? или nodeJS? вобще код должен работать в браузере а не в IDE а код в примере правильный

Answer 3

Скрипт подключай перед тем как закрывается тег body

Answer 4

 // HTML:

// Скрипт подключаешь с атрибутом defer или в конце body

  


   
     
   
 
 
// JS:    
 
const btn = document.querySelector('.btn');
console.log(btn); // без всяких "btn"....

Answer 5

Это база, товарищ! Нужно знать базовые типы данных. А уже потом у тебя возникнет проблема с null, опять же, это база, все элементы подгружаются по порядку, и скрипт погрузившийся раньше html разметки отработает на пустом документе. В твоем случае querySelector вернет null.