Блог

Главная - Вопросы по программированию - Почему этот калькулятор на основе javascript не работает?

Почему этот калькулятор на основе javascript не работает?

#javascript #html #css #wordpress

Вопрос:

Я воссоздаю калькулятор на основе javascript на тестовом сайте здесь: https://verbal-masai.jurassic.ninja/calculator/. Вдохновленный этим сайтом: https://thevegancalculator.com/#calculator.

Итак, я добавил коды javascript и css на свой сайт (прилагается ниже). Я разработал страницу с использованием html. Но по какой-то причине, когда я нажимаю «рассчитать«, ничего не происходит. Я почти уверен, что проблема в моем html, который неправильно ссылается на код js, поэтому ничего не происходит. Ниже приведен html-код, который я использовал для поля «месяцы», кнопки «рассчитать» и поля «галлоны воды». Если кто-то может указать, чего мне не хватает в полях html, я могу сам исправить другие поля html. Спасибо.

В инструментах разработки Chrome я вижу две ошибки, но не знаю, как их исправить.

Ошибка 1:

 Uncaught SyntaxError: Unexpected token '<'

Ошибка 2:

 Uncaught ReferenceError: veganCalc is not defined at HTMLSpanElement.onclick

Примечание: Эта страница размещена по адресу https://jurassic.ninja, который является сайтом для тестирования wordpress, поэтому, если вам нужен внутренний доступ для устранения неполадок, дайте мне знать, и я предоставлю информацию для входа.

Код JS

 var formatNumber = function (x) {
    return x.toString().replace(/B(?=(d{3}) (?!d))/g, ",");
};

var kgToLb = function () {
  return v * 2.20462;
};

var lbToKg = function () {
  return v / 2.20462;
};

var gallonToLitre = function () {
  return v * 3.7854;
};

var litreToGallon = function () {
  return v / 3.7854;
};

var sqftToSqm = function () {
  return v * 0.0929;
};

var sqmToSqft = function () {
  return v / 0.0929;
};

function veganCalc () {
  var unit;
  var totalDays = 0;
  var years = $('#years').val();
  var month = $('#months').val();
  
  totalDays = (month) ? totalDays   month*30 : totalDays ;
  totalDays = (years) ? totalDays   years*365 : totalDays ;
  
  // Variables
  var indexes = {
    'gallons': {
      'ipd': {
        'imperial': 1100,
        'metric': 4163.9
      },
      'selector': '.water',
      'index': {
        'imperial': 'Gallons of water:',
        'metric': 'Litres of water:'
      }
    },
    'grains': {
      'ipd': {
        'imperial': 40,
        'metric': 18.1
      },
      'selector': '.grain',
      'index': {
        'imperial': 'lbs of Grain:',
        'metric': 'kg of Grain:'
      }
    },
    'forest': {
      'ipd': {
        'imperial': 30,
        'metric': 2.8
      },
      'selector': '.forest',
      'index': {
        'imperial': 'Sq.ft of Forest:',
        'metric': 'Sq.m of Forest:'
      }
    },
    'co2': {
      'ipd': {
        'imperial': 20,
        'metric': 9.1
      },
      'selector': '.co2',
      'index': {
        'imperial': 'lbs of Co2:',
        'metric': 'kg of Co2:'
      }
    },
    'animals': {
      'ipd': {
        'imperial': 1,
        'metric': 1
      },
      'selector': '.animals',
      'index': {
        'imperial': 'Animal Lives:',
        'metric': 'Animal Lives:'
      }
    }
  }
  
  // Functions
  var years = $('#years').val();
  var months = $('#months').val();
  var unit = $('#unit').val();
  
  //Prints
  $.map(indexes, function (v, i) {
    $(v.selector   ".index").html(v.index[unit]);
    $(v.selector   ".value").html(formatNumber( Math.round(v.ipd[unit] * totalDays) ) );
  });
  $('.intro.index').html("You have saved:");
};

Код CSS

 .index.intro {
    text-align: center;
    color: #2cc03d;
    margin-bottom: 0;
    font-style: italic;
}

input[type="number"] {
    height: 3rem;
    background-color: #ccc;
    font-size: 1.2rem;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"] {
    -webkit-appearance: none;
    border-radius: 0;
    background-color: #FFFFFF;
    font-family: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: #cccccc;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    padding: 0.5rem;
    height: 2.3125rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
}
.calculator .button {
    margin-top: 1.3rem;
}

.postfix, .button {
    padding: 0 0 0 0;
    text-align: center;
    border: none;
    display: block;
    width: 100%;
}

.calculator-btn {
    color: #fff;
}

.button {
    background-color: #f92f4c;
    font-size: 100%;
    height: 3rem;
    line-height: 3rem;
}

.calculator .name {
    border: none;
    box-shadow: none;
    color: #2cc03d;
    font-size: 0.8rem;
    padding: 0.3rem 1rem;
    display: inline;
    position: relative;
    left: 0;
    top: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.calculator .number {
    padding: 0.25rem 1rem;
    font-size: 1.8rem;
    color: #fff;
    display: block;
    margin: 0;
    background: #1CB53D;
}

Месяцы HTML

 <label for="months">Months:</label>
<input type="number" id="months" min="0" max="12">

HTML кнопки

 <a href="#calculator"> 
<span class="button postfix calculator-btn" onclick="veganCalc()">Calculate</span></a>

Галлоны воды HTML

 <div class="stat">
<div class="name box-shadow index water">Gallons of water:</div>
<div class="number value water">0</div>
</div>

Комментарии:

1. Откройте консоль инструментов разработки/JavaScript вашего браузера (обычно клавиша F12) и найдите ошибки. Когда вы нажимаете вычислить: Uncaught TypeError: $ is not a function скорее всего, ваш код использует синтаксис jQuery, но вы не включаете библиотеку.

2. Попробуйте изменить свой «$» на «jQuery».

3. В вашем HTML, похоже, нет ввода лет, но ваши ссылки на JS #лет. Если это так, вы должны видеть ошибку в консоли инструментов разработки вашего браузера.

4. Вам нужно добавить » v «в качестве параметра в свои функции, например, «x» в первой? Я просто бегло просмотрел.

5. Я попытался изменить «$» на «jQuery» в своем js-скрипте. Но инструменты разработки также сообщают мне, что в моей html-кнопке » veganCalc ()»есть ошибка. Я не знаю, что/как это изменить. Кроме того, теперь я получаю не эту ошибку, а две новые (перечисленные в описании выше).

Ответ №1:

Наконец-то это работает! Спасибо @ugene за комментарий, чтобы изменить $ на jQuery. После этого все сработало. Для тех, кто еще ищет ответ, надеюсь, это поможет. WordPress поставляется со своей собственной библиотекой jQuery и по умолчанию находится в «режиме совместимости», поэтому он не конфликтует с другими библиотеками javascript. Это также означает, что $ не будет работать в вашем сценарии. Просто измените это на jQuery, и все остальное встанет на свои места, при условии, что ваш HTML правильно закодирован.

Метки: