CODEWITHSUNDEEP
javascripthtmlarraysforms
klyan
klyan

Reputation: 5

Converting form text in HTML into an array in JS

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.

Upvotes: 0

Views: 4021

Answers (4)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

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

  1. 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
}

  2. Resolve a JS error 

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

  3. Update the html to avoid page refresh (add type)

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

  4. 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

Upvotes: 0

czeski
czeski

Reputation: 228

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

Upvotes: 1

user2575725
user2575725

Reputation:

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>

Upvotes: 1

Rahul G Nair
Rahul G Nair

Reputation: 1376

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;

Upvotes: 1

Related Questions