JavaScript не работает должным образом, когда я загружаюсь с другой страницы

Когда я загружаю javascript из отдельного файла, он не работает должным образом, но когда я загружаю тот же сценарий изнутри файла

var button = document.querySelector("button");
	var p = document.querySelector("p");
	button.addEventListener("click",function(){
		p.textContent = "Someone Clicked";
	});

<!DOCTYPE html>
<html>
	<body>
	<script type = "text/javascript" src = "listen.js"></script>
		<a href = "https://www.google.co.in">My Link</a>
		<img src = "logo.png">
		<button>Click Me</button>
		<p>No one Has Clicked yet!</p>
	</body>
</html>

ge работает правильно.

Мы не можем помочь вам без дополнительной информации, но я предполагаю, что вы помещаете свой скрипт перед своей DOM. Страница отображается по порядку сверху вниз. Ваш Javascript-файл должен находиться под домом, с которым он взаимодействует. Если ваш тег скрипта находится над элементами, которые вы пытаетесь использовать, то document.querySelector("button") вернет undefined, что приведет к тому, что button.addEventListener сгенерирует исключение. Проверить консоль (F12)

— 15.05.2018 18:38

Попробуйте добавить document.addEventListener ("DOMContentLoaded", функция (событие) {console.info ("DOM полностью загружен и проанализирован");});

— 15.05.2018 18:48

javascript

15.05.2018 18:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы загружаете файл js в заголовок и выбираете кнопку и тег p, которые в то время не присутствуют в DOM. либо вы можете загрузить свой скрипт внизу страницы следующим образом:

 `<body>
    <a href = "https://www.google.co.in">My Link</a>
    <img src = "logo.png">
    <button>Click Me</button>
    <p>No one Has Clicked yet!</p>
    <script type = "text/javascript" src = "listen.js"></script>
  </body>`

или вы можете поместить свой скрипт в функцию window.onload (). Он будет ждать загрузки страницы, а затем запустит ваш код.

window.addEventListener('load', function () {
    var button = document.querySelector("button");
    var p = document.querySelector("p");
    button.addEventListener("click",function(){
      p.textContent = "Someone Clicked";
    });
}, false);

Большое спасибо

— 16.05.2018 05:59

15.05.2018 18:59