Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2017, 18:17
Новичок на форуме
Отправить личное сообщение для buttHurtGenerator Посмотреть профиль Найти все сообщения от buttHurtGenerator
 
Регистрация: 01.08.2017
Сообщений: 2

Cannot read property 'style'
Никогда не думал, что обращусь к форумчанам за советом, но этот момент настал. Я нахожусь в полном непонимании совместной работы JScript, html и CSS. Опишу суть проблемы.

Есть три файла:


1. файл test.html (в нем есть две ссылки на файл testCSS.css и testJScript.js), его функционал ограничивается созданием блока div с id "pen";

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel ="stylesheet"  type="text/css" href="testCSS.css">
  <script src="testJScript.js"></script>
</head>

<body>
	<div id = "pen">
	</div>
</body>

</html>



2. файл testCSS.css с описанием свойств объекта "pen": height (для последующего изменения в JS ), background-color (для проверки работы);

#pen {
	height:100px;
	background-color:red;
}



3. файл testJScript.js, призванный для изменения единственного свойства объекта "pen" - height.

var pen = document.getElementById(pen);
pen.style.height = "300px";

alert(pen.style.height);


Каков результат работы? Может быть, для вас это будет смешно, но для меня результат работы оказался очень неочевидным:



И так, я объявил объект "pen", задал ему стили, затем посредством js пытался эти стили изменить. Для меня непонятно, почему при обращении к стилям объекта "pen" консоль мне пишет, что не может прочитать их.
Сначала я решил, что проблема в том, что таблица стилей загружается позже скрипта. Потом, что интерпретатор обнаружает объект "pen" позже загрузки скрипта (хотя тогда консоль написала бы, что объекта "pen" не существует). В общем, вариантов было много и все они не приводили к устранению проблемы.

Не могли бы вы мне помочь разобраться в этом вопросе?

# "Тыкнуть" мордой в ошибку.
# Продемонстрировать правильную логику рассуждений.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2017, 18:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,059

buttHurtGenerator,
нет элемента на странице, скрипт поставить вниз страницы, либо обернуть onload. и выкинуть строку
var pen = document.getElementById(pen);


либо добавить кавычки
var pen = document.getElementById("pen");

Последний раз редактировалось рони, 01.08.2017 в 18:33.
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2017, 18:38
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
  	#pen {
	height:100px;
	background-color:red;
}
  </style>
</head>
<body>
	<div id = "pen">
	</div>
<script> // это <script src="testJScript.js">
var pen = document.getElementById("pen")
pen.style.height = "300px";
alert(pen.style.height);
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2017, 20:42
Новичок на форуме
Отправить личное сообщение для buttHurtGenerator Посмотреть профиль Найти все сообщения от buttHurtGenerator
 
Регистрация: 01.08.2017
Сообщений: 2

Лол, так я вводил переменную "pen" в функцию getElementById(), хотя сама переменная объявлена не была. К этому прибавляется несвоевременная обработка скрипта.
Спасибо, я все понял.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
uncaught TypeError: Cannot read property 'top' of undefined makedonets Общие вопросы Javascript 0 22.03.2017 12:45
Cannot read property 'addEventListener' of null DivMan Общие вопросы Javascript 4 15.04.2016 14:21
Cannot read property 'safari' of undefined vladik_vodopadik Javascript под браузер 1 14.12.2015 17:35
Cannot read property 'style' of null gurg0n Общие вопросы Javascript 8 15.06.2013 19:33
JavaScript error: Cannot read property 'style' of null mainne Javascript под браузер 4 03.03.2012 17:15