Как редактировать переменные javascript, заданные пользовательским вводом?

ProgramBox

Как редактировать переменные javascript, заданные пользовательским вводом?

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript

Вопрос:

Я хочу отобразить массив чисел, после этого, если пользователь желает изменить какое-либо из чисел в массиве, он/она должен написать желаемое значение на его месте и нажать кнопку «Отправить», массив будет обновлен и отобразит обновленный массив.

Я пробовал это до сих пор и просмотрел множество статей, чтобы найти решение, но я не смог найти то, которое подходит здесь.

Вот как выглядит мой код, он немного длинный, но я не знаю, сколько кода достаточно, так что это все.. пожалуйста, помогите мне получить это.

сделать сетку доступной для редактирования

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

»’

затем я попытался добавить поле ввода, чтобы я мог отображать номера массивов в атрибуте значения, и когда пользователи обновляют его и нажимают кнопку «Отправить», оно обновляется, но затем я не смог получить номера массивов в атрибуте значения тега ввода.

1. Вы увеличите шансы получить ответ, если включите HTML, чтобы превратить это в рабочий пример.

2. В вашем сообщении отсутствует ясность, вы просто пытаетесь обновить входные значения и массив сетки новыми значениями, введенными пользователем при нажатии кнопки, или вы пытаетесь сохранить значения в исходном файле ввода и отобразить обновленные значения в новых вводах после нажатия пользователем?

Ответ №1:

Вот пример. Я просто использую поля ввода чисел. Вы можете установить минимальное значение и добавить событие onChange, если хотите изменить значение массива nums.

 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>

Ответ №2:

Это приведет к обновлению grid значений массива с помощью введенных пользователем значений при нажатии кнопки.

 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>

Ответ №3:

Я думаю, что у вас уже есть соответствующие решения, но я хотел бы показать вам «немного другой способ», который экономит несколько строк кода и более оптимален с большими массивами.

Вместо повторяющегося массива, когда вы хотите изменить одно число, вы можете добавить в него прослушиватель событий. Вы сохраняете идентификатор элемента по индексу массива, поэтому легко приблизиться к фактической позиции в массиве.

Первым делом я хотел бы прокомментировать несколько вещей в вашем коде, которые могли бы быть лучше (мы все учимся!)

 for(var i=0;i<9;i  ){var myInput = document.createElement('input') ...

Вы хотите создать входные данные для каждого элемента массива. Как программист, вы знаете, что будет 9 элементов, но (как программист :)) вы не всегда хотите запоминать и подсчитывать, сколько элементов в массиве. Лучше использовать grid.length тот, который возвращает фактическую длину массива.

 function doStuff(){...}

Всегда называйте свои функции тем, чем они на самом деле занимаются. Это действительно помогает!

 var nameElement = document.getElementById("someInput");
a = nameElement.value
b = nameElement.id

Всегда называйте свои свойства так, как они на самом деле означают. Вы можете использовать «ввод», «Значение ввода», «inputId». Тоже помогает 🙂

В doStuff() функции вы снова создаете другие входные данные. Я думаю, что в этом нет особой необходимости, когда вы их уже создали.

Во-вторых, во-вторых, давайте посмотрим, как это выглядит, как я описывал ранее. Вот код (используйте и изучайте ES6, это лучше, поверьте мне):

 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>

1. Спасибо!! Это мой первый проект, работающий с javascript… На самом деле у меня было много примеров кода, собранного здесь и там, ооочень…. да, код немного запутан…… Но я, безусловно, буду использовать лучшие методы кодирования, спасибо за помощь.

Метки: заданные пользовательским вводом?, Как редактировать переменные javascript