制作一个基本的Javascript计算器

容忍我，这里的新手

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

问题是—

没有库，只有纯javascript

Javascript必须不引人注目

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

当我在本地执行此操作时，

answer

的值为

NaN

，如果点击

Submit

，它将保持这种状态，但是，如果按下后退按钮，您将看到实际结果

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

请告诉我，有可能做一个不引人注目的计算器吗？怎么做

---

（顺便说一句，我得到了一些帮助，只是为了看看基本的语法和东西，但我发现如果代码不突出，就无法完成）

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

将

更改为

，它应该可以工作

---

首先，您可能不需要

元素。这将停止在文本输入中单击enter以重新加载页面。

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

这是您重新编写的代码：

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>

更复杂的方法，加/减/乘/除：

---

您的示例有几个问题：

表格仍然提交。JS更改值后，提交将导致页面重新加载，而您设置答案值所做的工作将被浪费

你想马上做这件事。在标题中，还没有解析任何主体（因此，表单元素甚至不存在）。您需要等待，直到页面加载

脚本劫持

窗口。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的提交处理程序。但在我看来，这样做更好——表单在JS中的工作方式与不在JS中的工作方式相同（假设服务器上的脚本适当地填充了框），只是它不需要往返服务器。

不包括

xintox.JS

文件；另外，在

html

框架中所需要的只是

主体

中的内容（而不是

主体

元素本身）；您可以通过左侧的资源菜单添加资源。此外，您不能只说

Xintox.blahblahblah

。您需要使用类似于

document.getElementByName

的方法。我一定是忘记删除脚本代码了，xintox.js就是FIDLE本身提供的js。除了fiddle中的代码外，没有其他代码了。已编辑但您需要添加Xintox和CSS资源：@Linuxios-这可能是真的，但请参见我编辑的fiddle中的

getE（）

函数。@Linuxios，我已在我自己的原始fiddle中添加了getE。另外，我看到了formname.formelementname方法[，它是不推荐的还是什么？不，它仍然不能正常工作，但这是绝对必要的。我认为表单“绑定”把它们放在一起，我看到了语法formname.formelement.value，所以我认为这是正确的做法。谢谢这个：D@Pointy还有什么要添加的吗？Well Jared Famish给出了一个非常全面的答案，涵盖了很多方面。@Namanyayg，onclick处理程序将它们很好地结合在一起，而不会产生清除电流的副作用页面状态。可能需要将

type=button

添加到

标记中，因为在某些浏览器中，类型默认为“提交”。非常感谢！：D编辑：你能解释一下我哪里出错了吗？以防万一有人想知道，

。|124; 0

部分的意思是，如果

。

是

NaN还是0

，请使用值

0

@ajax333221，如何决定是选择parseFloat还是0？parseFloat是否给出值False或其他什么，如果NaN是found？AFAIK，| |=或者，对吗？@Namanyayg-看看这个小提琴，看看你是否在乘以

0

（我用

| | 0

对它进行评估，正如ajax333221所指出的那样）.几个问题-什么是IIFE？使用old_onload有什么帮助？为什么在“function”之前有一个括号？请解释“if”语句？它不应该有{}？这是什么意思？this.answer.value给出了什么？this在这里表示“Xintox”？结尾的（window.onload）是什么意思？谢谢：）IIFE(“立即调用的函数表达式”）是一个在定义时就可以正确执行的函数，通常甚至不给它命名。

（Function（）{}）（

是一种IIFE。它用于避免全局变量，和/或重命名函数中的内容。（您经常在jQuery插件中看到它，形式为

（Function（$）{…}）（jQuery）

，因为

$

很方便，也很突出，但其他脚本可能劫持了它）。你可以说

var old\u onload=window.onload；

并放弃生命，但由于它在全局范围内运行，

old\u onload

是全局的，即使你使用

var

。

if

语句调用旧的onload，如果它存在的话。我们不能确定它是否存在，所以我们不能直接调用它。你没有需要

{}

，因为它是

// 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);