Невозможно выполнить javascript в перенаправленном блоге, но оно работает в другом блоге.

Question

Я успешно выполнил JavaScript в блоге . Но я не могу выполнить JavaScript на определенном сайте блогов. Пожалуйста, взгляните на калькулятор бюстгальтера . Почему это не работает на этом spa сайте? Любой JS в блоге останавливается, чтобы выполнить? Есть CSS проблемы? Пожалуйста, помогите мне разобраться в этом.

Я не получаю никаких сообщений об ошибках.

<form id="bra-calculator">
  <div class="title">
Enter measurements in inches</div>
<div class="half">
    <label for="rib-measurement">Enter rib measurement:</label>
    <input id="rib-measurement" name="rib-measurement" placeholder="Rib Measurement" type="number" />
    <div class="error-message">
Please enter a value greater than or equal to 24</div>
</div>
<div class="half">
    <label for="bust-measurement">Enter bust measurement:</label>
    <input id="bust-measurement" name="bust-measurement" placeholder="Cup Measurement" type="number" />
    <div class="error-message">
Your bust measurement must be at least 1 inch larger than rib</div>
</div>
<input id="submit" type="submit" value="Calculate!" />
</form>
<div id="bra-results">
</div>

Для JS:

var bra_calculator = bra_calculator || (function() {

  var inputs = document.getElementsByTagName('input'),
    ribs_input = document.getElementById('rib-measurement'),
    bust_input = document.getElementById('bust-measurement'),
    validation_flag = false,
    results_div = document.getElementById('bra-results');

  function results_message(message) {
    results_div.innerHTML = message;
  }

  function find_sibling(input) {
    return input.nextSibling.nextSibling;
  }

  function add_error(input) {
    input.classList.add('error');
    find_sibling(input).classList.add('show');
  }

  function remove_error(input) {
    input.classList.remove('error');
    find_sibling(input).classList.remove('show');
  }

  function error_checker(input) {
    if (input.value == 0) {
      add_error(input);
    } else {
      if (input.type.toLowerCase() === 'number') {
        remove_error(input);
      }
    }
  }

  function validator() {
    // check for empty values
    for (i = 0; i < inputs.length; ++i) {
      error_checker(inputs[i]);
    }

    // rib measurement should be be >= 24
    if (ribs_input.value < 24) {
      add_error(ribs_input);
    } else {
      remove_error(ribs_input);
    }

    // bust should be at least 1 inch greater than ribs!
    if (bust_input.value !== '' && ribs_input.value !== '') {
      if (Number(bust_input.value) <= Number(ribs_input.value)) {
        add_error(bust_input);
      } else {
        remove_error(bust_input);
      }
    }

    if (!ribs_input.classList.contains('error') && !bust_input.classList.contains('error')) {
      validation_flag = true;
    } else {
      validation_flag = false;
      results_message('');
    }

    if (validation_flag) {
      var cup_sizes = ['A', 'B', 'C', 'D', 'DD', 'E', 'F', 'FF', 'G', 'GG', 'H', 'HH', 'J', 'JJ', 'K', 'KK', 'L', 'LL', 'M', 

'MM', 'N', 'O', 'OO'],
        bust = Math.ceil(bust_input.value),
        ribs = Math.ceil(ribs_input.value),
        difference = (bust - ribs) - 1;

      if (cup_sizes[difference] === null) {
        results_message('Your size is out-of-range! Please try again.');
      } else {
        results_message('Your calculated size is: <span>' + ribs + cup_sizes[difference] + '</span>');
      }
    }
  }

  return {
    validator: validator
  }
})();

(function() {
  document.getElementById('bra-calculator').addEventListener('submit', function(e) {
    e.preventDefault();
    bra_calculator.validator();
  });
})();

Мой вопрос: почему это работает в одном, а не в другом? Пожалуйста, нажмите на обе ссылки и посмотрите различия.

Answer 1

Я вижу следующие ошибки на https://srilanka-massage.blogspot.com/p/bra-size-calculator.html

это говорит мне, что нам нужно изменить:

function remove_error(input) {
    input.classList.remove('error');
    let sibling = find_sibling(input);
    if (sibling){
        sibling.classList.remove('show');
    }
  }

или другую подобную обработку ошибок. (Или выясните, почему брат не найден, вероятно, проблема структуры HTML?)

Я продублировал эту проблему в CodePen: https://codepen.io/Alexander9111/pen/vYOBero

Настоящая ошибка в том, что на сайте отсутствует <div id="bra-results"></div> https://srilanka-massage.blogspot.com/p/bra-size-calculator.html

Когда я добавил этот тег после формы, все работает:

Однако ваш код по-прежнему вызывает другие ошибки.

Ваша функция function find_sibling(input) не возвращает ожидаемый вами узел.

Вам следует измените его на:

  function find_sibling(input) {
    if (input.id.includes('measurement')){
      return input.parentNode.querySelector('div');
    } else {
      return input.nextSibling.nextSibling;
    }    
  }

Вы также должны изменить:

  function add_error(input) {
    input.classList.add('error');
    let sibling = find_sibling(input);
      if (sibling.classList){
          find_sibling(input).classList.add('show');
      }    
  }

и добавить HTML: <div id="bra-results"></div> после формы, как я сказал, тогда все должно работать :)

См. Мой CodePen для полной демонстрации и полного кода: https://codepen.io/Alexander9111/pen/vYOBero