Question

我试图获取用户输入文本框的数字字符串，然后用逗号分隔它们。我取这些值并找到最小值，最大值和总数。我似乎无法正确地从文本框中获取值。

这是我的代码：

var numbers = document.querySelector("#numbers").value;

function tabTwo()
{
    var i;
    var min = 0;
    var max = 0;
    var total = 0;

    for (i = 0; i <= numbers.length; i++)
    {
        var numbersSplit = Number(numbers.split(","));

        min = i;
        max = i;

        if (numbersSplit[i] < min)
        {
            min = numbersSplit[i];       
        }

        if (numbers[i] > max)
        {
            max = numbersSplit[i];
        }

        total += numbersSplit[i];
    }

    totalDiv.innerHTML = total;
    smallestDiv.innerHTML = min;
    biggestDiv.innerHTML = max;
}

Answer 1

var numbers = document.querySelector("#numbers").value;

function tabTwo() {

  var i;
  var min = 0;
  var max = 0;
  var total = 0;
  var numbersSplit = numbers.split(",");


  for (i = 0; i <= numbersSplit.length; i++) {
    var currentNum = parseInt(numbersSplit[i]);

    if (currentNum < min) {
      min = currentNum;
    }

    if (currentNum > max) {
      max = currentNum;

    }

    total += currentNum;

  }

  totalDiv.innerHTML = total;
  smallestDiv.innerHTML = min;
  biggestDiv.innerHTML = max;

}

Answer 2

使用parseInt将字符串转换为int

    var numbers = document.querySelector("#numbers").value;
    var arr = numbers.split(",");
    var min = parseInt(arr[0]);
    var max = parseInt(arr[0]);
    var total = 0;

    for(var i = 0; i<arr.length;i++){
        var element = parseInt(arr[i])
        if(element < min){
            min = element
         }
        if(element > max){
            max = element
        }
        total += element
     }

Answer 3

您的代码未显示您的函数被称为
您的函数将输入值拆分为数组，但它是一个字符串数组，而不是数字，因为HTML中的“T”代表 “文本”。 HTML中的所有数据都是字符串（无论它看起来像什么给你）。在进行数学运算之前，必须将数组值转换为数字。

话虽如此，这比你正在做的要简单得多。

分割输入值时，您有一个字符串数组。必须将它们转换为数字才能对它们进行数学运算， Array.map() 方法非常适合基于枚举数组并在其中找到的每个值上运行回调函数来返回新数组。第一个阵列。

内置JavaScript Math 对象包含 max 和 min 方法在没有循环或需要if/then逻辑的情况下获得这些答案。

然后 Array.reduce() 方法可以根据您指定的回调函数将数组减少为单个值。

备注：

您也没有提供HTML，但必须要调用一些内容你的tabTwo()功能。在下面的代码中，我已经设置了这个当输入失去焦点时（只需点击它然后点击即可 TAB ），函数运行。

Math.min和Math.max是通常需要列表的方法参数。要让它们在数组上工作，您可以使用 "destructuring assignment" （...）将数组值拉出到值列表中，适合传递给{{1 }和max。

将变量直接设置为DOM对象并不是一个好主意属性，如min，因为如果你想访问任何其他对象的属性，你必须再次扫描DOM到找到它。相反，将变量设置为对象本身然后只需在需要时访问您需要的任何财产。

value适用于您设置/获取的字符串包含的内容 HTML。它调用HTML解析器并解析该字符串。这是一个如果字符串不包含任何HTML，则浪费资源。在那些例如，使用.innerHTML代替，它不会调用HTML 解析器。

.textContent

// Get your DOM object references, just once. var numbers = document.querySelector("#numbers"); var smallest = document.querySelector("#smallest"); var biggest = document.querySelector("#biggest"); var tot = document.querySelector("#total"); // Set up event listner for when the element loses focus numbers.addEventListener("blur", tabTwo); function tabTwo() { // Split the value into an array and then return a new array of those // string values converted to numbers var nums = numbers.value.split(",").map((num) => { return +num }); // No need to reinvent the wheel here, use JavaScript to do this stuff: smallest.textContent = Math.min(...nums); biggest.textContent = Math.max(...nums); tot.textContent = nums.reduce((a, b) => a + b); }

从文本框中获取一串数字，然后将它们分开。使用Javascript

3 个答案: