Storing user input in an array with the use of JavaScript

Question

Storing user input in an array with the use of JavaScript

Hey everyone, I'm new to JavaScript and have been struggling with a task that seems simple. I'm trying to store user input in an array and then display it in a specific div (eventually I want to create a table using the DOM and store the input there). However, the code below isn't working as expected. Any suggestions on how to fix it?

JavaScript

function submitInfo(){

var nameInput = document.getElementById("name").value;
var ageInput = document.getElementById("age").value;
var fsInput = document.getElementById("fightingStyle").value;
var weightInput = document.getElementById("weight").value;

myArray[0]=nameInput;
myArray[1]=ageInput;
myArray[2]=fsInput;
myArray[3]=weightInput;

for(var i = 0; i<myArray.lenght; i++){
document.getElementById("theResult").innerHTML=myArray[i];
}

}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="inl2a.css" />
<script type="text/javascript" src="inl2a.js"></script>
<title>Inlämning 2a</title>
</head>
<body>

<div id="inputFields">
<h3>Submit your fighters information:</h3>

Name:<br><br>
<input id="name" type="text" /><br><br>
Age:<br><br>
<input id="age" type="text" /><br><br>
Fighting style:<br><br>
<input id="fightingStyle" type="text" /><br><br>
Weight:<br><br>
<input id="weight" type="text" /><br><br>

<input id="button" value="Submit" type="button" onclick="submitInfo();" /><br><br>
</div>

<div id="theResult">
</div>

</body>
</html>

javascript xhtml

Answer 1

Answer №1

function saveData(){
    var infoArray = []; // issue 1

    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var style = document.getElementById("fightingStyle").value;
    var weight = document.getElementById("weight").value;

    infoArray[0] = name;
    infoArray[1] = age;
    infoArray[2] = style;
    infoArray[3] = weight;

    for(var i = 0; i<infoArray.length; i++){ // issue 3
        document.getElementById("output").innerHTML += infoArray[i]; // issue 2
    }

}

The array is not being initialized before use
Only the last value is displayed due to overwriting of innerHTML property
A typo exists in the loop condition: "lenght" instead of "length"

You can streamline the code by directly pushing values into the array without using intermediate variables. Additionally, fetching the output element outside the loop can improve performance:

function saveData(){
    var infoArray = []; // issue 1

    infoArray.push(document.getElementById("name").value);
    infoArray.push(document.getElementById("age").value);
    infoArray.push(document.getElementById("fightingStyle").value);
    infoArray.push(document.getElementById("weight").value);

    var outputElement = document.getElementById("output");

    for(var i = 0; i<infoArray.length; i++){
        outputElement.innerHTML += infoArray[i]; // issue 2
    }

}

Answer 2

function saveData(){
    var infoArray = []; // issue 1

    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var style = document.getElementById("fightingStyle").value;
    var weight = document.getElementById("weight").value;

    infoArray[0] = name;
    infoArray[1] = age;
    infoArray[2] = style;
    infoArray[3] = weight;

    for(var i = 0; i<infoArray.length; i++){ // issue 3
        document.getElementById("output").innerHTML += infoArray[i]; // issue 2
    }

}

The array is not being initialized before use
Only the last value is displayed due to overwriting of innerHTML property
A typo exists in the loop condition: "lenght" instead of "length"

You can streamline the code by directly pushing values into the array without using intermediate variables. Additionally, fetching the output element outside the loop can improve performance:

function saveData(){
    var infoArray = []; // issue 1

    infoArray.push(document.getElementById("name").value);
    infoArray.push(document.getElementById("age").value);
    infoArray.push(document.getElementById("fightingStyle").value);
    infoArray.push(document.getElementById("weight").value);

    var outputElement = document.getElementById("output");

    for(var i = 0; i<infoArray.length; i++){
        outputElement.innerHTML += infoArray[i]; // issue 2
    }

}

Answer 3

Answer №2

Assuming the user inputs are for a title and a name, you can store them in variables like this:

var title   = document.getElementById("title").value;
var name    = document.getElementById("name").value;

Instead of keeping them as separate variables, you can put them in an array like so:

var info = [ title, name ];

When you want to display the title, you can do it like this:

document.getElementById(your_divID).innerText=info[0];

For Mozilla support, you can use textContent instead of innerText.

Answer 4

Assuming the user inputs are for a title and a name, you can store them in variables like this:

var title   = document.getElementById("title").value;
var name    = document.getElementById("name").value;

Instead of keeping them as separate variables, you can put them in an array like so:

var info = [ title, name ];

When you want to display the title, you can do it like this:

document.getElementById(your_divID).innerText=info[0];

For Mozilla support, you can use textContent instead of innerText.

Storing user input in an array with the use of JavaScript

Answer №1

Answer №2

Similar questions

Creating the document.ready function in Angular2 with JQuery

Displaying Dates in an Express Application using EJS

Creating a custom progress bar using Javascript and Jquery

Angular's separate scope variables allow for isolated data manipulation within individual components

Error: The process.binding feature is not supported in the current environment (browserify + selenium-webdriver)

The login process in Next-auth is currently halted on the /api/auth/providers endpoint when attempting to log in with the

Reduce the transparency of the overlay picture

Is there a way to prevent redirection to the homepage after submitting a login form?

Encountered an error when attempting to access property 'connect' of an undefined value

Looping through a jQuery script to add a class if a certain condition is met in another class

Using jQuery to load and parse a JSON file stored on a local system

Unexpected behavior in Next.js when using Auth0: pageProps are empty when wrapped with withPageAuthRequired HOC

Tips on using Ajax to post in HTML

Utilize Angular 5 to implement URL routing by clicking a button, while also preserving the querystring parameters within the URL

Despite using callbacks when passing props in React JS components, the rerendering still occurs

Issue with Vue.js: Nested field array is triggering refresh with inaccurate information

Encountering a SyntaxError with the message 'Unexpected token' while trying to require a module in strict mode from JSON at position 0

What steps are involved in implementing an ordering system on a restaurant's website using React?

Using jQuery to add a class to an input option if its value exists in an array

Enable users to input their custom code and run it when the specified conditions are met