I want to display an array of numbers, after that if he users wishes to change any of the numbers in array then he/she should write the desired value in its place and click submit button the array gets updated and display the updated array.
I have tried this till now, and gone through numerous articles to find a solution but i couldn't find one which fits here.
This is what my code looks like, it is a bit long but I dont know how much code is adequate so this is it.. please help me get this.
making grid editable<style>
#container{
display:grid;
grid-template-columns: repeat(9, 8%);
margin-left: 35%;
margin-right:25%;
margin-top:10%;
}
</style>
<body style="background-color:grey">
<div id='container'>
</div>
<input id="someInput" type="text" value=<p id="output"></p>>
<input type="button" value="submit" onClick="doStuff()">
</body>
<script>
var myContainer = document.getElementById('container')
grid=[0,1,4,6,3,0,9,3,2];
for(var i=0;i<9;i++){
var myInput = document.createElement('input')
//we want to add position of an input box as id
myInput.id= `${i}`
var num=grid[i];
myInput.value=num;
myContainer.appendChild(myInput)
}
var x = document.createElement("BUTTON");
function doStuff(){
var nameElement = document.getElementById("someInput");
a = nameElement.value
b = nameElement.id
new_grid=[];
for(var j=0;j<9;j++){
if(j==b){
new_grid[j]=a;
}
else{
new_grid[j]=grid[j];
}
}
for(var i=0;i<9;i++){
var myInput = document.createElement('input')
//we want to add position of an input box as id
myInput.id= `${i}`
var num=new_grid[i];
myInput.value=num;
myContainer.appendChild(myInput)
}
}
window.onload = function() {
//when the document is finished loading, replace everything
//between the <a ...> </a> tags with the value of splitText
document.getElementById("output").innerHTML=grid[4];
}
</script>
then I tried to add a input box so that i can show the array numbers in value attribute of it and when users updates it and clicks submit button it gets updated but then i wasn't able to get array numbers in value attribute of input tag.
This will update your grid array values with the user inputted values on button click.
var myContainer = document.getElementById('container');
grid = [0,1,4,6,3,0,9,3,2];
for(var i=0; i < grid.length; i++){
var myInput = document.createElement('input')
//we want to add position of an input box as id
myInput.id = `${i}`
myInput.value = grid[i];
myContainer.appendChild(myInput);
}
var x = document.createElement("BUTTON");
x.textContent = "UPDATE";
myContainer.appendChild(x);
x.addEventListener("click", UpdateGridFromUserInput, false);
function UpdateGridFromUserInput() {
var allinputs = document.getElementById('container').getElementsByTagName('input');
for(var j = 0; j < allinputs.length; j++) {
grid[j] = allinputs[j].value;
}
console.log(grid);
}<div id="container">
</div>Here's an example. I just use input number fields. You can set the min max and add an onChange event if you want to change the value of the nums array.
const nums = [1, 2, 3, 4, 5];
const container = document.querySelector(".container");
nums.forEach(num => {
const numElm = document.createElement("input");
numElm.classList.add("number");
numElm.type = "number";
numElm.min = 1;
numElm.max = 9;
numElm.value = num;
container.appendChild(numElm);
});.container {
display: flex;
justify-content: space-between;
}
.number {
padding: .5rem;
width: 2rem;
text-align: center;
border: 2px solid grey;
border-radius: 10px;
}<div>
<p>Selected numbers</p>
<div class="container" />
</div>I think you have got relevant solutions already, but I would like to show you "little another way" which save a few rows of code and it is more optimal with larger arrays.
Instead of the iterating array when you want to change a single number, you can add an event listener to it. You save an ID to the element by the index of the array, so it is easy to approach the actual position in the array.
First thing first, I would like to comment on a few things in your code, which could be better (we all learn!)
for(var i=0;i<9;i++){var myInput = document.createElement('input') ...
You want to create an input for each element in the array. As a programmer, you know that there will be 9 elements, but (as a programmer :)) you don't always want to remember and count how many elements the array has. It is better to use grid.length which returns the actual length of the array.
function doStuff(){...}
Always name your functions as what they are really doing. It really helps!
var nameElement = document.getElementById("someInput");
a = nameElement.value
b = nameElement.id
Always name your properties as what they actually mean. You could use "input", "inputValue", "inputId". Helps too :)
In doStuff() function, you are creating other inputs again. I think it is not really necessary when you have already created them.
Second thing second let's look at how it looks like as I described before. Here is the code (use and learn ES6, it's better, trust me):
let array = [0, 1, 4, 6, 3, 0, 9, 3, 2];
let container = document.getElementById("container");
let output = document.getElementById("arrayResult");
output.innerHTML = array;
//create inputs for the array
for (let i = 0; i < array.length; i++) {
let inputElement = document.createElement("input");
inputElement.type = "number";
inputElement.id = i;
inputElement.value = array[I];
//if an user change the value, update the array at its position
inputElement.addEventListener("input", () => {
let id = inputElement.id;
array[id] = inputElement.value;
})
container.appendChild(inputElement);
}
//create submit button
let submit = document.createElement("input");
submit.type = "submit";
submit.value = "Change";
container.appendChild(submit);
//update output
submit.addEventListener("click", () => {
output.innerHTML = array;
});<div id="container">
</div>
<div>
<label>Result:</label>
<label id="arrayResult"></label>
</div>