Question

大家下午好，

我收到了我学校的任务。任务并不那么难，但由于我的老师缺乏解释，我很困难。

作业是：

您创建一个输入字段。在输入字段中，您可以编写3个数字。例如2,3,5。数字由＆＃39;，＆＃39;。

分开

然后你有一个选择，值为，+，/和*。因此，如果您选择+然后单击按钮计算，它将执行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>

所以它读取输入中的内容，它读取我在select中选择的内容，它知道我需要将输入分成＆＃39;，＆＃39;。

我现在被困住了。有人可以帮我一把吗？

Answer 1

您是否可以在SO中提出要求？： - ）

好吧，既然这是一次学校练习，我会给你一些线索：

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

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

从第二个元素（array [1]）开始迭代数组，取决于“operator”值，那么你必须对每个结果变量执行* =，+ =，/ =， - =数组中的元素，但第一个元素。

在迭代之后，你将把结果放在变量中。

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

我希望它有所帮助。

Answer 2

以下是一个需要遵循的步骤：https://plnkr.co/edit/yjgZ5uCM33eoRMzwX0ZL?p=preview

步骤：

检查输入的有效性
识别所选的运营商
遍历您的数字数组并逐个操作您的元素。
将结果添加到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);

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

Answer 3

创建一个var并从输入中为其分配一个数组。 Google＆＃34; javascript数组来自字符串＆＃34;但是你已经知道你必须使用.split（）。
为您的答案创建第二个变量。
检测您必须使用的操作数：Retrieving the text of the selected <option> in <select> element
现在，最简单的方法是使用switch语句，例如所有操作数，不要忘记中断;
现在你只需要对数组中的每个元素进行数学运算。你可以使用一个基本的for循环（总+ = i或总* = i）等。或者你可以使用.reduce（）https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=control
将答案变量设为答案

这就是您真正需要完成此任务的所有内容。

我做了一个示例解决方案但不要复制粘贴，真的。尝试编写自己的解决方案，您将通过自己的方式学到很多东西。

＆＃13;

function count() {
   var arr = document.getElementById('fill').value.split(",");
   var operations = {
     '+' : 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;
}

＆＃13;

<h1>Calculate</h1><br>
    Numbers: <input type="text" value="1,2,5" 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 id="answer"></div>

＆＃13;

使用拆分的简单计算器

3 个答案: