将 HTML 中的表单文本转换为 JS 中的数组

Converting form text in HTML into an array in JS

本文关键字：JS 数组转换表单 HTML 文本更新时间：2023-09-26

我正在尝试为最大子数组问题创建一个在线求解器。https://en.wikipedia.org/wiki/Maximum_subarray_problem

我计划从文本框中获取用户输入的数字并将它们转换为 JS 中的 int 数组，但我的 JS 似乎根本没有运行。这是我的网页

<!DOCTYPE html>
<html>
    <head>
        <title> findMaxSum </title>
        <script src="findMaxSum.js" type="text/javascript"></script>
    </head>
    <body>
        <h1> findMaxSum </h1>
        <form id="formarray" action="">
            <p> Enter numbers with spaces, i.e. "1 2 3 4 5": </p>
            <input type="text" id="array"> <br>
            <button id="sum">findMaxSum!</button>
            <br>
        </form>
        <p id="answerswer">The answer is: </p>
    </body>
</html>

注意：代码的map（function（item））部分旨在将字符串从表单中分解成一个int数组。

"use strict";
function findMaxSum() {
    var array = document.getElementById("array").split(" ").map(function(item) {
        return parseInt(item, 10);
    });
    var sumButton = document.getElementById("sum");
    sumButton.onclick = findMaxSum;
    var loopSum = 0;
    var currentMax = 0;
    for (var i = 0; i < array.length; i++) {
        loopSum += array[i];
        if (currentMax < loopSum) {
            currentMax = loopSum;
        } else if (loopSum < 0) {
            loopSum = 0;
        }
    }
    document.getElementById("answerswer").innerHTML = "The answer is: " + currentMax;
}
window.onload = findMaxSum;

目前，当我在文本框中输入数字并提交时，数字消失了，没有任何反应。任何帮助将不胜感激。

您的array变量object。您必须拆分<input type="text" id="array">而不是对象元素的值。

var array = document.getElementById("array");
    array = array.value.split(" ").map(function (item) {
    return parseInt(item, 10);
});

或者更简单：

var array = document.getElementById("array").value.split(" ").map(function (item) {
    return parseInt(item, 10);
});

更改您的代码 -

  function findMaxSum() {
        var array = document.getElementById("array").value.split(" ").map(function(item) {
            return parseInt(item, 10);
        });
        var sumButton = document.getElementById("sum");
        sumButton.onclick = findMaxSum;
        var loopSum = 0;
        var currentMax = 0;
        for (var i = 0; i < array.length; i++) {
            loopSum += array[i];
            if (currentMax < loopSum) {
                currentMax = loopSum;
            } else if (loopSum < 0) {
                loopSum = 0;
            }
        }
        document.getElementById("answerswer").innerHTML = "The answer is: " + currentMax;
    }
    window.onload = findMaxSum;

问题是您在表单中使用按钮，默认情况下是类型submit类型，这就是页面变为空白的原因，它被提交。因此，要么不使用表单标记，要么将按钮设置为按钮类型。

<button id="sum" type='button'>findMaxSum!</button> <!-- type attribute added -->

下面是更新的代码示例，希望对您有所帮助。

"use strict";
function findMaxSum() {
  var array = document.getElementById("array").value.split(/'s/);
  var max = Math.max.apply(Math, array);
  document.getElementById("answerswer").innerHTML = "The answer is: " + max;
}
window.onload = function() {
  document.getElementById("sum").onclick = findMaxSum;
};

<h1> findMaxSum </h1>
<form id="formarray" action="">
  <p>Enter numbers with spaces, i.e. "1 2 3 4 5":</p>
  <input type="text" id="array">
  <br>
  <button id="sum" type='button'>findMaxSum!</button>
  <br>
</form>
<p id="answerswer">The answer is:</p>

要实现问题的解决方案，您需要进行以下更改。

更新事件绑定位置

window.onload = function() {
    var sumButton = document.getElementById("sum");
    sumButton.onclick = findMaxSum;
};
function findMaxSum() {
    // remove the update binding code from here
    // logic should come here
}

解决 JS 错误

document.getElementById("array").value.split(" ")

更新 html 以避免页面刷新（添加类型）

<button id="sum" type='button'>findMaxSum!</button>

更新逻辑以解决问题

var currentMax = 0;
for (var i = 0; i < array.length; i++) {
    var counter = i+1;
    while (counter < array.length) {
      var loopSum = array[i];
      for (var j = (i+1); j <= counter; j++) {
        loopSum += array[j];
        if(loopSum > currentMax) {
           currentMax = loopSum;
        }
      }
      counter++;
    }
}

这是一个 plunker - http://plnkr.co/edit/AoPANUgKY5gbYYWUT1KJ?p=preview