Как избавиться от тысяч строк

Чтобы показать, какой курс изучает студент, я написал эти простые строки, нажмите на студента и посмотрите курс, но кажется, что там тысячи строк кода, так как я должен перечислить так много студентов и курсов. Есть ли способ написать одну функцию для получения значения объекта вместо написания отдельной функции для каждого клика?

//and goes on thousands of times like this...
var txt = document.getElementById("txt");  
var students = {
   student1: "english",
   student2: "maths",
   student3: "history",
   student4: "geography",
   student5: "science",
   student6: "maths",
   student7: "maths",
   student8: "history",
   student9: "french",
   student10: "geography",
};
//and there are thousands of students...

function f1(){txt.innerHTML = students.student1;};
function f2(){txt.innerHTML = students.student2;};
function f3(){txt.innerHTML = students.student3;};
function f4(){txt.innerHTML = students.student4;};
function f5(){txt.innerHTML = students.student5;};
function f6(){txt.innerHTML = students.student6;};
function f7(){txt.innerHTML = students.student7;};
function f8(){txt.innerHTML = students.student8;};
function f9(){txt.innerHTML = students.student9;};
function f10(){txt.innerHTML = students.student10;};
// so there are thousands of functions...

 <a class = "k"  onClick = "f1(); return false;" href = "#">student1</a><br/>
 <a class = "k"  onClick = "f2(); return false;" href = "#">student2</a><br/>
 <a class = "k"  onClick = "f3(); return false;" href = "#">student3</a><br/>
<div id = "txt"></div>

На самом деле я пробовал это, полагая, что это сработает:

var stdnt = document.querySelectorAll(".k);
var x = stdnt.innerHTML;
var result = "";

if ( x === students[x] ){
    x = students[x];
}
result = x;
function forAll (){
    txt.innerHTML = result;
}

Но это вообще не работает (думаю, это естественно для абсолютного новичка). Мне очень нужна идея.

🤔 А знаете ли вы, что...
JavaScript позволяет создавать собственные серверные приложения с использованием платформы Node.js.

[РЕШЕНО]Перейти к решению

105

Javascript273878 вопросов Html113619 вопросов

Ответы:

Решено

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

var txt = document.getElementById("txt");  
var students = {
   student1: "english",
   student2: "maths",
   student3: "history",
   student4: "geography",
   student5: "science",
   student6: "maths",
   student7: "maths",
   student8: "history",
   student9: "french",
   student10: "geography",
};

function f(key) {
    txt.innerHTML = students[key];
};

<a class = "k" onClick = "f(this.innerHTML); return false;" href = "#">student1</a><br/>
<a class = "k" onClick = "f(this.innerHTML); return false;" href = "#">student2</a><br/>
<a class = "k" onClick = "f(this.innerHTML); return false;" href = "#">student3</a><br/>
<div id = "txt"></div>

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

<a class = "k"  onClick = "getCourse(“student1”); return false;" href = "#">student1</a><br/>


function getCourse(student) { // Contains the student
   txt.innerHTML = students[student];
 }

Посмотри на это

Он использует несколько рекомендуемых методов

прослушиватели событий
СУХОЙ (не повторяйтесь)
делегация

const students = {
  student1: "english",
  student2: "maths",
  student3: "history",
  student4: "geography",
  student5: "science",
  student6: "maths",
  student7: "maths",
  student8: "history",
  student9: "french",
  student10: "geography",
};
// create the html so only one place to add a student
const html = Object.entries(students)
  .map(entry => `<a href = "#" class = "k" 
    data-student = "${entry[1]}">${entry[0]}</a>`);

// on page load fill the student Div     
window.addEventListener('load', function() {
  const div = document.getElementById("studentDiv");
  const text = document.getElementById('text')
  div.innerHTML = html.join('<br/>');
  // delegate the click to the container, so only ONE event handler is used
  div.addEventListener('click', function(e) {
    const tgt = e.target;
    if (tgt.classList.contains('k')) {
      e.preventDefault(); // stop the link from executing
      text.innerHTML = tgt.dataset.student;
    }
  });
});

<div id = "studentDiv"></div>
<div id = "text"></div>

Проще

const students = {
  student1: "english",
  student2: "maths",
  student3: "history",
  student4: "geography",
  student5: "science",
  student6: "maths",
  student7: "maths",
  student8: "history",
  student9: "french",
  student10: "geography",
};
// create the html so only one place to add a student
const html = Object.entries(students)
  .map(entry => `<a href = "#" class = "k">${entry[0]}</a>`);

// on page load fill the student Div     
window.addEventListener('load', function() {
  const div = document.getElementById("studentDiv");
  const text = document.getElementById('text')
  div.innerHTML = html.join('<br/>');
  // delegate the click to the container, so only ONE event handler is used
  div.addEventListener('click', function(e) {
    const tgt = e.target;
    if (tgt.classList.contains('k')) {
      e.preventDefault(); // stop the link from executing
      text.innerHTML = students[tgt.textContent]
    }
  });
});

<div id = "studentDiv"></div>
<div id = "text"></div>

Как избавиться от тысяч строк

Ответы:

Интересные вопросы для изучения