2

jsfiddle 演示

忍受我，这里是新手。

我正在尝试制作一个简单的乘法计算器，作为 Javascript 的实验。

问题是——

  1. 没有库，只有纯 JavaScript。
  2. Javascript 必须不显眼。

现在，问题出现了，它没有给出价值。

当我在本地执行此操作时，answer其值为NaN，并且如果您点击Submit它会保持这种状态，但是，如果您按下后退按钮，您会看到实际结果。

在 JSFiddle 中，没有显示很多内容，只是它根本不起作用。

请告诉我，是否有可能制作一个不显眼的计算器？如何？

（PS。我从sciencebuddies那里得到了一些帮助，只是为了看看基本的语法和东西，但我发现如果代码不突兀，就无法做到）

4

3 回答 3

5

我意识到您可能刚刚开始，不知道要包含什么、删除什么等等。但是，这里的好建议是，清楚地标记您的元素，以便您可以理解它们，并将其缩减为您需要的最小代码（甚至更少，以便您可以构建它）。

这是您的代码重做：

HTML

<div>
    <input type="text" id="multiplicand" value="4">
    <input type="text" id="multiplier" value="10">
    <button type="button" id="multiply">Multiply</button>
</div>
<p id="result">
    The product is: <span id="product">&nbsp;</span>
</p>

Javascript

window.onload = function(){
    var button = el('multiply'),
        multiplicand = el('multiplicand'),
        multiplier = el('multiplier'),
        product = el('product');

    function el(id) {
        return document.getElementById(id);
    };

    function multiply() {
        var x = parseFloat(multiplicand.value) || 0,
            y = parseFloat(multiplier.value) || 0;

        product.innerHTML = x * y;
    }

    button.onclick = multiply;
};

http://jsfiddle.net/userdude/EptAN/6/

一个稍微复杂的方法，加/减/乘/除：

http://jsfiddle.net/userdude/EptAN/9/

于 2012-08-18T15:11:10.230 回答
1

您必须更改提交按钮，使其不提交表单。现在单击“提交”会导致表单提交到涉及页面重新加载的同一页面。

更改<input type="submit" id="submitt">为<button type=button>，它应该可以工作。

您可能一开始就可以不使用该<form>元素。这将停止在您的文本输入中单击输入以重新加载页面。

于 2012-08-18T15:08:39.090 回答
1

您的示例有几个问题：

  1. 表单仍然提交。JS更改值后，提交会导致页面重新加载，而您设置答案值所做的工作是浪费的。
  2. 您正在尝试立即执行此操作。在标题中，还没有解析任何正文（因此，表单元素甚至不存在）。您需要等到页面加载完毕。
  3. 脚本劫持window.onload. 如果页面上没有任何其他脚本，那很好......但是不显眼的 JS（IMO）的全部意义在于，无论脚本是否存在，都不会破坏任何内容。

固定，我们有一些类似的东西：

// Wrap this onload in an IIFE that we pass the old onload to, so we can
// let it run too (rather than just replacing it)
(function(old_onload) {

  // attach this code to onload, so it'll run after everything exists
  window.onload = function(event) {

    // run the previous onload
    if (old_onload) old_onload.call(window, event);

    document.getElementById('Xintox').onsubmit = function() {
      var multiplier = +this.multiplier.value;
      var multiplicand = +this.multiplicand.value;
      this.answer.value = multiplier * multiplicand;
      return false;  // keep the form from submitting
    };
  };​
})(window.onload);

请注意，我将肉类代码附加到表单，而不是按钮，因为点击Enter任何一个因素框也会触发提交。如果需要，您仍然可以附加到按钮，只需添加一个返回 false 的提交处理程序。但是 IMO 这种方式更好——这种方式与 JS 一样，表单与不使用 JS 相同（假设服务器上的脚本适当地填充了框），除了它不需要往返服务器。

于 2012-08-19T03:06:12.127 回答