Ошибка Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')?

Question

[Viktor-77]

Есть форма! В нем есть селект, в котором при выборе нужного сервиса появляются нужные поля - тут все работает как надо!

<div class="form-group">
	<label>Select other type of Service</label>
	<div class="ors-custom-select">
		<select  id="service" type="text" class="form-control required" placeholder="Service type" aria-required="true" name="service_type">
			<option value="">Other type of Service</option>
			<option class="js-show-prod js-show-prod2" value="Hourly/As Directed">Hourly/As Directed</option>
			<option class="js-show-prod2" value="To Airport">To Airport</option>
			<option class="js-show-prod1" value="From Airport">From Airport</option>
			<option class="js-show-prod2" value="Point-to-Point Transfer">Point-to-Point Transfer</option>
			<option class="js-show-prod2" value="Other">Other</option>
		</select>
	</div>
</div>
<div class="form-group">
	<!--Drop-Off Location-->
	<div id="pickup_airport" style="display: none;" wfd-invisible="true">
		<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
			<label for="address2" class="control-label autocomplete-label">* Pick-Up Location</label>
			<div class="ors-autocomplete">
				<input id="address2" ref="locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="* Your pick-up location" name="pick_up_location_hr" aria-required="true" autocomplete="off">
			</div>
		</div>
	</div>
	<div id="pickup_hr" style="display: none;">
		<div class="form-group">
					<label for="pickup_hr">Number of Hours</label>
					<div class="input-group">
					<span class="input-group-text"><i class="fas fa-clock"></i></span>
						<input id="pickup_hr" type="number" min="3" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Number of Hours (3Hrs Minimum)" name="pickup_hr" aria-required="true" min="1" step=".1">
					</div>
		</div>
	</div>
	<!--Drop-Off Location-->
	<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
		<label for="address4" class="control-label autocomplete-label">Drop-Off Location </label>
		<div class="ors-autocomplete">
			<input id="address4" ref="drop_off_locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Your drop-off location" name="drop_off_location" aria-required="true" autocomplete="off">
		</div>
	</div>
</div>

<script type="text/javascript">
	document.getElementById('service').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod" );
		document.getElementById('pickup_hr').style.display = isPear ? "block" : "none";
	});
</script>
<script type="text/javascript">
	document.getElementById('service').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod" );
		document.getElementById('pickup_airport').style.display = isPear ? "block" : "none";
	});
</script>
<script type="text/javascript">
	document.getElementById('service').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod1" );
		document.getElementById('pickup_street').style.display = isPear ? "block" : "none";
	});
</script>
<script type="text/javascript">
	document.getElementById('service').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod2" );
		document.getElementById('pickup_airport').style.display = isPear ? "block" : "none";
	});
</script>

Так же есть аналогичный выбор где тоже есть сервис и здесь выбор не работает.

<div class="form-group">
	<label>Select Return other type of Service</label>
	<div class="ors-custom-select">
		<select  id="service_return" type="text" class="form-control required" placeholder="Service type" aria-required="true" name="service_type_return">
			<option value="">Other type of Service</option>
			<option class="js-show-prod0 js-show-prod20" value="Hourly/As Directed">Hourly/As Directed</option>
			<option class="js-show-prod20" value="To Airport">To Airport</option>
			<option class="js-show-prod10" value="From Airport">From Airport</option>
			<option class="js-show-prod20" value="Point-to-Point Transfer">Point-to-Point Transfer</option>
			<option class="js-show-prod20" value="Other">Other</option>
		</select>
	</div>
</div>

<div class="form-group">
	<!--Drop-Off Location-->
	<div id="pickup_airport_return" style="display: none;" wfd-invisible="true">
		<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
			<label for="address2_return" class="control-label autocomplete-label">* Return Pick-Up Location</label>
			<div class="ors-autocomplete">
				<input id="address2_return" ref="locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="* Your pick-up location" name="pick_up_location_hr_return" aria-required="true" autocomplete="off">
			</div>
		</div>
	</div>
	<div id="pickup_hr_return" style="display: none;">
		<div class="form-group">
			<label for="pickup_hr1">Number of Hours</label>
			<div class="input-group">
				<span class="input-group-text"><i class="fas fa-clock"></i></span>
				<input id="pickup_hr1" type="number" min="3" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Number of Hours (3Hrs Minimum)" name="pickup_hr_return" aria-required="true" min="1" step=".1">
			</div>
		</div>
	</div>
	<!--Drop-Off Location-->
	<div class="form-group ors-autocomplete-wrap ors-autocomplete-wrap-lg">
		<label for="address4_return" class="control-label autocomplete-label">Return Drop-Off Location </label>
		<div class="ors-autocomplete">
			<input id="address4_return" ref="drop_off_locationRef" type="text" autocomplete="off" class="form-control form-control-2 required required_s pac-target-input" placeholder="*Your drop-off location" name="drop_off_location_return" aria-required="true" autocomplete="off">
		</div>
	</div>
</div>

<script type="text/javascript">
	document.getElementById('service_return').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod0" );
		document.getElementById('pickup_hr_return').style.display = isPear ? "block" : "none";
	});
</script>
<script type="text/javascript">
	document.getElementById('service_return').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod0" );
		document.getElementById('pickup_airport_return').style.display = isPear ? "block" : "none";
	});
</script>
<script type="text/javascript">
	document.getElementById('service_return').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod10" );
		document.getElementById('pickup_street_return').style.display = isPear ? "block" : "none";
	});
</script>
<script type="text/javascript">
	document.getElementById('service_return').addEventListener('change', function(){
		let isPear = this.options[this.selectedIndex].classList.contains("js-show-prod20" );
		document.getElementById('pickup_airport_return').style.display = isPear ? "block" : "none";
	});
</script>

И в консоле пишет ошибку Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Answer 1

[Stalker_RED]

В в консоли, в сообщении об ошибке, справа, пишется в каком файле и на какой строке ошибка.
Можно на эту надпись кликнуть, вам прямо подчеркнёт красненьким ту переменную, которая null.

Comments

[Viktor-77]

[Stalker_RED]

Viktor-77, вот там у вас document.querySelector(... ). addEventListener... И если элемент не найден, то querySelector вернёт null, а у null нет свойства addEventListener.