Почему в консоли отображается сообщение о невозможности чтения свойства, когда я пытаюсь использовать дочернее свойство и offsetWidth? - PullRequest
Новая
       35

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

1 голос
/ 19 марта 2020

Я новичок в кодировании и программировании, и я следил на Youtube за экранной записью программиста, делающего адаптивный слайдер миниатюр, используя HTML, CSS и Javascript. Я дошел до того, что я пытаюсь проверить, был ли мой Javascript зарегистрирован в консоли, но я продолжаю получать это сообщение об ошибке: "script. js: 3 Uncaught TypeError: Невозможно прочитать свойство 'children' null at script. js: 3 "Комментирование строки 3 решает проблему, но затем та же ошибка отображается для строки 4:" script. js: 3 Uncaught TypeError: Невозможно прочитать свойство 'offsetWidth' null в сценарии. js: 4 "

Может кто-нибудь сказать мне, почему это происходит? Мой код ниже. 

const container=document.querySelector(".thumbnail-container");
	const allBox=container.children;
	const containerWidth=container.offsetWidth;
	const margin=30;
	var item=0;
	
	
	// item setup per slide
	
	responsive=[
	{breakPoint:{width:0,item:1}}, //if width greater than 0 (1 will item show)
	{breakPoint:{width:600,item:2}}, //if width greater than 600 (2 will item show)
	{breakPoint:{width:1000,item:4}} //if width greater than 1000 (4 will item show)
	]
	
	function load(){
		for(let i=0; i<responsive.length;i++){
			if(window.innerWidth>responsive[i].breakPoint.width){
				items=responsive[i].breakPoint.item
			}
		}
		start();
	}
	
	function start(){
		for(let i=0;i<allBox.length;i++){
			//width and margin setup of items
			//allBox[i].style.width=containerWidth/items;
			console.log(allBox[i])
		}
	}
	
	window.onload=load();
<div class="thumbnailslider">
			<div class="thumbnailcontainer">
				<div class="artitem">
				1
				</div>
				<div class="artitem">
				2
				</div>
				<div class="artitem">
				3
				</div>
				<div class="artitem">
				4
				</div>
				<div class="artitem">
				5
				</div>
				<div class="artitem">
				6
				</div>
				<div class="artitem">
				7
				</div>
				<div class="artitem">
				8
				</div>
			</div>
			
			<!-- Control Slides -->
			<div class="artcontrols">
				
			</div>
		</div>
		<script src="script.js"></script>

1 Ответ

1 голос
/ 19 марта 2020

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

const container=document.querySelector(".thumbnailcontainer");
...