为什么这个基于 javascript 的计算器不起作用？答案

【问题标题】：Why is this javascript based calculator not working?为什么这个基于 javascript 的计算器不起作用？
【发布时间】：2021-10-10 23:56:37
【问题描述】：

我正在这里的测试站点上重新创建一个基于 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>

【问题讨论】：

打开浏览器的开发工具/JavaScript 控制台（通常是 F12 键）并查找错误。当您单击计算时：Uncaught TypeError: $ is not a function 您的代码很可能使用 jQuery 语法，但您没有包含库。
尝试将“$”更改为“jQuery”
您的 HTML 似乎没有输入年份，但您的 JS 引用了 #years。如果是这样，您应该会在浏览器的开发工具控制台中看到错误。
您是否需要在函数中添加“v”作为参数，例如“x”在第一个？我只是略过。
我尝试在我的 js 脚本中将“$”更改为“jQuery”。但是开发工具也告诉我我的按钮 html 'veganCalc()' 中有一个错误。我不知道什么/如何改变它。此外，现在我没有收到这个错误，而是两个新错误（在上面的描述中列出）。

标签： javascript html css wordpress

【解决方案1】：

终于成功了！感谢@ugene 评论将 $ 更改为 jQuery。这样做之后，一切正常。对于其他寻找答案的人，希望这会有所帮助。 WordPress 带有自己的 jQuery 库，默认情况下处于“兼容模式”，因此它不会与其他 javascript 库发生冲突。这也意味着 $ 在您的脚本中不起作用。只需将其更改为 jQuery，其他一切都会到位，前提是您的 HTML 编码正确。

【讨论】：