Почему JS работает только на одной странице

Question

Всем хорошего дня! Подскажите, кто в курсе...

Есть сайт на WordPress и туда вставил HTML контейнер и подключил внутри скрипт JS. Но беда в том, что этот скрипт работает только на одной странице (на той, где он был первый раз вписан), на других не работает. Так как сам не кодер в JS, подскажите плиз, может кто в курсе?

Пробовал менять переменные, но без результатов.

Ниже прилагаю код:

HTML:

<label for="weather"><h4>Number of persons: </h4></label>
<select id="weather">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

JS:

var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  var choice = select.value;

  if (choice === '1') {
    para.textContent = 'Total: 190$';
  } else if (choice === '2') {
    para.textContent = 'Total: 120$';
  } else if (choice === '3') {
    para.textContent = 'Total: 90$';
  } else if (choice === '4') {
    para.textContent = 'Total: 85$';
  } else if (choice === '5') {
    para.textContent = 'Total: 85$';
  } else if (choice === '6') {
    para.textContent = 'Total: 82$';
  } else if (choice === '7') {
    para.textContent = 'Total: 76$';
  } else if (choice === '8') {
    para.textContent = 'Total: 74$';
  } else if (choice === '9') {
    para.textContent = 'Total: 72$';
  } else if (choice === '10') {
    para.textContent = 'Total: 66$';
  } else {
    para.textContent = '';
  }
}

Answer 1

Используйте правильное подключение JS и CSS файлов с помощью wp_enqueue_script() Или подключите ваш скрипт в footer.php

Answer 2

Для начала нужно определить подключен скрипт или нет. Попробуйте где то в скрипте сделать console.log('Hello'), если в консоли Вы увидите Hello, но скрипт не работает, тогда нужно искать проблему в самом скрипте. Возможно проблема из за слишком широкого диапазона выборки

var select = document.querySelector('select');
var para = document.querySelector('p');

Этот кусок кода слишком неконкретный. Он находит первый селект и первый параграф на странице и пытается что то с ними сделать, соответственно если на странице не один селект и параграф, то скрипт может работать не так, как было задумано.

БЛОГ НА HUSL

Почему JS работает только на одной странице

Ответы (2 шт):