How to print array in javascript?

Question

I want to print array by taking inputs from the users when the user click value 3 input box than 3 input box will display where he can put the value but when I try to submit the array but no element is printed and the printed value is element is not defined

var arr=[0];
function get_value()
{
    var n=parseInt(document.getElementById("n").value);
        
    var div=document.getElementById("add");
    var add='';

    for(var i=0;i<n;i++)
    {
        add=add+"<br>Enter "+(i+1)+" value : <input type='text' id='arr"+i+"'  id='arr' name='mytext'><br>";
    }

    add=add+"<input type='button' onclick='arr_sub()' value='Submit Array'>";
    div.innerHTML =add;
}

function arr_sub()
{
    for(i=0;i<n;i++)
    {
        arr[i] = parseInt(document.getElementById("arr").value);
        parseInt(document.getElementById("arr").value)="";
        
    }
    for(var y=0;y<arr.length;y++)
    var e = "<hr/>";
    {
        e += "Element is "+arr[y]+"<br>";
    }
    document.getElementById("show").innerHTML = e;
    
}

<html>
    <head>
           
    </head>
<body>
    Enter Array Size : <input type="text" name="num" id="n">
    <input type="button" value="submit" onclick="get_value()">
    <div id="add">
    </div>
    <div id="show"></div>
    <script src="javascript.js" type="text/javascript"></script> 
</body>
</html>

strong text

try name='mytext[]' and to properly submit the values to the server you will need to wrap the form elements inside the form tag: developer.mozilla.org/en-US/docs/Web/HTML/Element/form — caramba
– caramba, Commented Feb 29, 2020 at 9:17
= document.getElementById("arr").value -> where is the i ?? — Mister Jojo
– Mister Jojo, Commented Feb 29, 2020 at 9:32

Mechanic · Accepted Answer · 2020-02-29 09:44:18Z

I'd fixed bugs and made some improvements to your code; take your time to investigate what has changed; and Dude, generally speaking, don't use var; always prefer let and const over var. most your bugs was caused by using var and capturing closure. also prefer Template literals over concating strings manually by + operator;

let arr=[];
let n;
function get_value()
{
    n = parseInt(document.getElementById("n").value);
    let div=document.getElementById("add");
    let add='';
    for(let i=0;i<n;i++){
        add=add+`<br>Enter ${i+1} value : <input type='text' id='arr${i}' name='mytext'><br>`;
    }
    add=add+`<input type='button' onclick='arr_sub()' value='Submit Array'>`;
    div.innerHTML =add;
}

function arr_sub()
{
    for(let j=0;j<n;j++){
        arr[j] = parseInt(document.getElementById("arr"+j).value);
       document.getElementById("arr"+j).value="";
    }
    let e = "<hr/>";
    let show = document.getElementById("show");
    show.innerHTML = "";
    for(let y=0;y<arr.length;y++){
        e += "Elements is "+arr[y]+"<br>";
    }
    show.innerHTML = e;
}

<html>
    <head>
           
    </head>
<body>
    Enter Array Size : <input type="text" name="num" id="n">
    <input type="button" value="submit" onclick="get_value()">
    <div id="add">
    </div>
    <div id="show"></div>
    <script src="javascript.js" type="text/javascript"></script> 
</body>
</html>

zaheer ahmed · Accepted Answer · 2020-02-29 11:49:09Z

I have modified your js code,Best practices for appending dynamic input is to use class selector not id. Has removed unnecessary loops from code.

let arr=[];
let n;
function get_value()
{
 n = parseInt(document.getElementById("n").value);
 let div=document.getElementById("add");
 let add='';
 for(let i=0;i<n;i++){
    add=add+`<br>Enter ${i+1} value : <input type='text' class='dataInput' name='mytext'><br>`;
 }
 add=add+`<input type='button' onclick='arr_sub()' value='Submit Array'>`;
 div.innerHTML =add;
}

function arr_sub()
{
 let e = "<hr/>";
 let show = document.getElementById("show");
 show.innerHTML = "";
 let arr = document.getElementsByClassName('dataInput');
 for(let y=0;y<arr.length;y++){
    e += "Elements is "+arr[y].value+"<br>";
 }
 show.innerHTML = e;
 }

Collectives™ on Stack Overflow

How to print array in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related