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