如何手动测试 JavaScript？答案

【问题标题】：How do I manually test JavaScript?如何手动测试 JavaScript？
【发布时间】：2016-05-24 22:00:33
【问题描述】：

我正在尝试通过使用百思买产品 API 创建一个简单的价格检查网站来学习 javascript。

如何“运行”javascript？我的表单接受产品 ID 号（SKU）并在提交时将其发送到 validateSKU()。函数 processData(data) 使用 SKU 搜索产品。

当我测试网站时什么都没有发生，任何帮助都会很棒；谢谢！

<!DOCTYPE html>
<html>

<head>
  <title>Learn JavaScript</title>
</head>

<body>
  <form id="bestBuyForm" name="bestBuyForm" onsubmit="validateSKU()">
    <input id="SKU" name="SKU" required="" type="text">
    <label for="SKU">SKU</label>

    <input id="email" name="email" type="email">
    <label for="email">Email</label>

    <input class="button" id="submit" name="submit" type="submit">
  </form>
  <script>
    function validateSKU() {
      var SKU = document.forms["bestBuyForm"]["SKU"].value;
      var bby = require('bestbuy')('process.env.BBY_API_KEY');
      var search = bby.products('sku=' + SKU);
      search.then(processData);
    }

    function processData(data) {
      if (!data.total) {
        console.log('No products found');
      } else {
        var product = data.products[0];
        console.log('Name:', product.name);
        console.log('Price:', product.salePrice);
      }
    }
  </script>
</body>

</html>

【问题讨论】：

您在控制台中看到任何错误吗？
这不是学习javascript的最佳方式，就像“在F1赛道上学习驾驶”
@ray 没有出现错误。当我单击提交时，唯一发生的是页面刷新。如果我将 javascript 放在 test.js 文件中并生成“var SKU = 1234567”，然后在控制台中输入“node test.js”，则脚本会按预期运行。
调试的第一步是将console.log('hello!') 添加到validateSKU 函数中，看看它是否正确触发。
您的onSubmit 处理程序应通过采用event 参数并调用event.preventDefault() 来阻止表单提交

标签： javascript html node.js forms

【解决方案1】：

使用web console 看看会发生什么并阅读console API。

尝试使用 HTML 元素 addEventListener 方法绑定 validateSKU。此外，您应该防止导致页面在提交时重新加载的默认表单行为。拨打event.preventDefault()。

Working example代码：

<html>
  <form id="someForm">
      ...
      <button type="submit">Submit</submit>
  </form>
  <script>
    function validateSKU(event) {
      console.log('IT works');
      event.preventDefault();
      // ...here your code
    }

    var form = document.getElementById('someForm');

    form.addEventListener('submit', validateSKU, false);
  </script>
</html>

【讨论】：