Javascript 使用split的简单计算器_Javascript_Html

Javascript 使用split的简单计算器

javascript html

Javascript 使用split的简单计算器,javascript,html,Javascript,Html,各位下午好我收到学校的作业。这项任务并不难，但由于缺乏老师的解释，我很困任务是：您可以创建一个输入字段。在输入字段中输入3个数字。例如2，3，5。这些数字被“，”分开然后有一个select，其值为-、+、/和*。因此，如果您选择+然后单击“计算”按钮，它将执行2+3+5，然后显示答案这是我现在的代码 <body> <h1>Calculate</h1><br> Numbers: <input type="text"

各位下午好

我收到学校的作业。这项任务并不难，但由于缺乏老师的解释，我很困

任务是：

您可以创建一个输入字段。在输入字段中输入3个数字。例如2，3，5。这些数字被“，”分开

然后有一个select，其值为-、+、/和*。因此，如果您选择+然后单击“计算”按钮，它将执行2+3+5，然后显示答案

这是我现在的代码

<body>
    <h1>Calculate</h1><br>
    Numbers: <input type="text" name="fill" id="fill"><br><br>
    Operation:
    <select name="select" id="select">
      <option value="plus">+</option>
      <option value="min">-</option>
      <option value="keer">*</option>
      <option value="delen">/</option>
    </select><br><br>
    <button onclick="count()">Count</button>

    <div class="answer"></div>

    <script>
        function count(){
            var operator = document.getElementById("select").value;
            var string = document.getElementById("fill").value;
            var array = string.split(",");

        }
    </script>


计算

编号：


操作：
+
-
*
/



计数
函数计数（）{
var运算符=document.getElementById（“选择”）.value；
var string=document.getElementById（“fill”）.value；
var数组=string.split（“，”）；
}

所以它读取输入中的内容，它读取我在选择中选择的内容，它知道我需要用“，”分割输入

我现在卡住了。有人能帮我一把吗？

你可以这样要求吗？：-）

既然这是学校的练习，我就给你一些线索：

数组包含所有操作数[“2”、“3”、“5”]

创建一个包含结果的变量，并使用数组中的第一个值（数组[0]）对其进行初始化。注意，现在它包含一个字符串，“2”+“3”是“23”，您必须解析该值并将其转换为Int或Float（请参阅parseInt方法）

根据“运算符”值，从第二个元素（数组[1]）开始迭代数组，然后必须对数组中除第一个元素外的每个元素的结果变量执行*=、+=、/=、-=操作

迭代之后，您将在变量中得到结果

我假设您不允许使用eval函数（eval是邪恶的：-））

我希望它能有所帮助。

这里有一个plunker，需要遵循一些步骤：

步骤：

检查输入的有效性

识别所选操作员

在数字数组上循环并对元素进行二乘二运算

将结果添加到DOM中

预览如何将结果添加到DOM

  // Add the results to your DOM
  var para = document.createElement("p");
  var node = document.createTextNode(results.toString());
  para.appendChild(node);
  var element = document.getElementById("answer");
  element.appendChild(para);

我不想再多说了，因为这是学校的练习。但我认为这些信息会让你更好地理解这个练习背后的结构和逻辑利益

祝你好运

创建一个var并从输入中分配一个数组给它。Google“javascript数组from string”，但您已经知道必须使用.split（）

为您的答案创建第二个var

检测必须使用的操作数：

现在，最简单的方法是使用switch语句，对所有操作数进行大小写，不要忘记break

现在只需对数组中的每个元素进行计算。您可以使用基本for循环（total+=i或total*=i）等。或者，您可以使用.reduce（）

将答案变量设置为答案的div

这就是你真正需要完成这项任务的全部

我制作了一个示例解决方案，但不要复制粘贴它，真的。试着写你自己的解决方案，你会学到很多东西

函数计数（）{
var arr=document.getElementById（'fill'）.value.split（“，”）；
var操作={
“+”：arr.reduce（（a，b）=>parseFloat（a）+parseFloat（b）），
“-”：arr.reduce（（a，b）=>parseFloat（a）-parseFloat（b）），
“*”：arr.reduce（（a，b）=>parseFloat（a）*parseFloat（b）），
“/”：arr.reduce（（a，b）=>parseFloat（a）/parseFloat（b））
}
var answer=operations[document.getElementById（'select'）。selectedOptions[0]。text]；
document.getElementById（'answer'）。innerHTML=answer；
}

计算

编号：


操作：
+
-
*
/



计数

现在您需要

开关（运算符）{case'plus'：…；case'min'：…等}

。在每种情况下都会出现类似于

var result=array[0]；对于（var i=1；i

@RomanHocke这确实是正确的-为什么不将其作为答案发布，因为它显示了OP下一步的方向。这听起来是一个非常清楚的解释。您已经拆分了字符串，因此现在得到了一个由三个数字组成的数组（或者实际上是三个包含数字字符的字符串，这可能需要先进行一些转换）。作为下一步，我首先尝试简单地将数组中的所有数字相加。当这起作用时，您可以编写条件（使用if
或switch
）来实现其他操作符。这些操作的基本实现将与add相同，只是与其他操作符相同。一次只处理一个不同的部分。到目前为止，已经发布了一些很好的信息-如果您仍在努力，请前往Mozilla开发者网络研究提供的一些要点：请从步骤中删除代码块，并从plunker中添加两个代码块-一个是HTML，另一个是JS。