Javascript сохраняет ввод пользователя в 2-мерных массивах

Question

Я пытался сохранить двумерное значение данных из пользовательского ввода.Скажем, сохраняя результаты теста студентов в этот массив.Мне удалось сделать это с одномерным массивом, но не удалось связать 2D-массив с пользовательским вводом.Я проверил много примеров 2D-массивов и обнаружил, что это будет намного проще, если использовать Java вместо Javascript, но в настоящее время это единственный язык, на котором я знаю, и мне интересно, как это можно сделать с помощью Javascript.Я также пытался использовать переменную положения «i» для соединения входа и массива, но не смог понять это.

Answer 1

Вы можете создать двумерный массив, просто сделав массив буквенным как:

var TestResults = [Name, [Mark1, Mark2, Mark3]];

Здесь TestResults[0] - это имя, а TestResults[1] - это массив баллов.Первая оценка будет TestResults[1][0].

Однако, это может быть не лучшим способом.Объект может иметь больше смысла здесь.Например, что-то вроде этого будет легче понять, когда вы посмотрите на код позже:

var TestResults = {name: Name, scores: [Mark1, Mark2, Mark3]};

Теперь TestResults.name - это имя, а TestResults.scores - это массив оценок.TestResults.scores[0] является первым счетом.

С этим вы можете сделать простой интерфейс, который принимает оценки и продолжает добавлять их на страницу, например:

function display() {

  var Name = document.getElementById("Name").value;
  var Mark1 = document.getElementById("Mark1").value;
  var Mark2 = document.getElementById("Mark2").value;
  var Mark3 = document.getElementById("Mark3").value;

  var testResults = {name: Name, scores: [Mark1, Mark2, Mark3]};
  appendResults(testResults)

}
function appendResults(obj) {
  var holder = document.getElementById("demo")
  var scoreDiv = document.createElement('div')
  scoreDiv.innerHTML = obj.name + ': ' + obj.scores.join(', ')
  holder.appendChild(scoreDiv)
}

Name:<input type="text" id="Name"><br>
Mark1 (0-20):<input type="number" id="Mark1" name="quantity" min="0" max="20"><br>
Mark2 (0-25):<input type="number" id="Mark2" name="quantity" min="0" max="25"><br>
Mark2 (0-35):<input type="number" id="Mark3" name="quantity" min="0" max="35"><br>
<button onclick="display()">Upload</button>
<h4> Scores: </h4>
<p id="demo"></p>

Answer 2

Я вижу два решения вашей проблемы.Первый - это то, как я бы это сделал, он более самоуверенный и использует Objects.Второй с 2D массивом.Надеюсь, это поможет!

Персональный подход и предложение

Я думаю, вам лучше использовать объекты вместо n-мерных массивов.Решение, которое я вижу, при условии, что вы показали данные:

// Define a student object
function Student(_name, _mark1, _mark2, _mark3) {
  this.name = _name;
  this.mark1 = _mark1;
  this.mark2 = _mark2;
  this.mark3 = _mark3;
}

// Define the array that will hold the students and their marks
var TestResults = [];

// Process HTML
var Name = document.getElementById("Name").value;
var Mark1 = document.getElementById("Mark1").value;
var Mark2 = document.getElementById("Mark2").value;
var Mark3 = document.getElementById("Mark3").value;

// Add new student record
TestResults.push(new Student(Name, Mark1, Mark2, Mark3));

// At any time now you can access the data like so:
// TestResults[index].name gives the name of the student
// TestResults[index].mark1 gives the first mark
// ...
// TestResults[0].Name => Will give you the name of the first student in the array

Прямой ответ на ваш вопрос

var TestResults = [];

// For each processed student
TestResults.push([Name, Mark1, Mark2, Mark3]);

// Now you can access your data only by indexes
// TestResults[0][0] will give you the name of the first student
// TestResults[1][1] will give you the first mark of the second student
// ...