Question

jsfiddle demo

跟我一起，在这里加上新手。

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

问题在于 -

没有图书馆，只有纯粹的javascript。
Javascript必须不引人注目。

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

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

在JSFiddle中，除了它根本不起作用之外，没有显示很多内容。

请告诉我，甚至可以制作一个不显眼的计算器？怎么样？

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

Answer 1

我意识到你可能刚刚开始，不知道要包括什么，删除什么等等。但是，这里有好的建议，清楚地标记你的元素，这样你就可以理解它们，并将它削减到你工作所需的最小代码（更少，所以你可以建立它）。

以下是您的代码重做：

<强> 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/

Answer 2

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

将<input type="submit" id="submitt">更改为<button type=button>，它应该有效。

您可能首先没有<form>元素。这将停止在重新加载页面时单击输入文本输入。

Answer 3

您的示例有几个问题：

表格仍然提交。在JS更改值之后，提交将导致页面重新加载，并且您已完成设置答案值的工作将被浪费。
你正试图立即做这些事情。在标题中，尚未解析任何主体（因此，表单元素甚至不存在）。您需要等到页面加载完毕。
脚本劫持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一样工作与没有相同（假设服务器上的脚本适当地填入框中），除了它不需要往返服务器。

制作一个基本的Javascript计算器

3 个答案: