Converting form text in HTML into an array in JS

Question

I am attempting to create an online solver for the maximum subarray problem. https://en.wikipedia.org/wiki/Maximum_subarray_problem

I planned on taking user-input numbers from a textbox and converting them into an int array in JS, however my JS does not seem to be running at all. Here is my HTML

<!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="answer">The answer is: </p>
    </body>
</html>

and my JS. note: the map(function(item)) part of the code is intended to break apart the string from the form into an int array.

"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("answer").innerHTML = "The answer is: " + currentMax;
}

window.onload = findMaxSum;

Currently, when I type in numbers into the textbox and submit, the numbers disappear and nothing happens. Any help is greatly appreciated.

czeski · Accepted Answer · 2015-06-19 08:37:27Z

1

Your array variable is object. You have to split the value of <input type="text" id="array"> not the object element.

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

Or simpler:

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

edited Jun 19, 2015 at 8:37

answered Jun 19, 2015 at 8:35

czeski

2282 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Khalid Over a year ago

you could just do this : array.value.split(" ").map(parseFloat);

czeski Over a year ago

@Khalid I've added the simpler way to.

RobG Over a year ago

Or ...map(Number); ;-)

klyan Over a year ago

one word off...much appreciated!

Rahul G Nair · Accepted Answer · 2015-06-19 08:33:15Z

1

Change your code -

  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("answer").innerHTML = "The answer is: " + currentMax;
    }

    window.onload = findMaxSum;

answered Jun 19, 2015 at 8:33

Rahul G Nair

1,38610 silver badges11 bronze badges

Comments

score 1 · Accepted Answer · 2015-06-19 08:36:31Z

Problem is you are using button inside form, which is by default of type submit type, that is the reason why the page goes blank, it gets submitted. So either you don't use form tag or make the button as button type.

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

Below is the sample updated code, hope it helps you.

"use strict";

function findMaxSum() {
  var array = document.getElementById("array").value.split(/\s/);
  var max = Math.max.apply(Math, array);
  document.getElementById("answer").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="answer">The answer is:</p>

Nikhil Aggarwal · Accepted Answer · 2015-06-19 10:51:00Z

To achieve the solution of the problem, you need to make following changes.

Update the event binding place

window.onload = function() {
    var sumButton = document.getElementById("sum");
    sumButton.onclick = findMaxSum;
};

function findMaxSum() {
    // remove the update binding code from here
    // logic should come here
}

Resolve a JS error

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

Update the html to avoid page refresh (add type)

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

Update the logic to address the problem

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++;
    }
}

Here is a plunker - http://plnkr.co/edit/AoPANUgKY5gbYYWUT1KJ?p=preview

Collectives™ on Stack Overflow

Converting form text in HTML into an array in JS

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related