Как избавиться от тысяч строк
Чтобы показать, какой курс изучает студент, я написал эти простые строки, нажмите на студента и посмотрите курс, но кажется, что там тысячи строк кода, так как я должен перечислить так много студентов и курсов. Есть ли способ написать одну функцию для получения значения объекта вместо написания отдельной функции для каждого клика?
//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 в HTML.
Вы действительно хотите, чтобы каждый ученик видел учебный план всех учеников? Вы действительно хотите обновлять свой документ каждый семестр? Мне кажется, что ваш документ не является единственным источником правды и, если у вас есть возможность, вместо этого вы должны попытаться получить эту информацию из базы данных, которая уже отслеживает это.
Каждый студент может видеть информацию о курсе, и я надеюсь, что найду способ автоматически обновлять курсы (при условии, что я улучшу свои навыки работы с javascript).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете сжать его, чтобы использовать одну функцию и передать 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>@Hakangöçmen - самый простой не обязательно означает лучший. Нина обычно не публикует простой код, но здесь вам придется обновить HTML, когда вы получите нового ученика. в моем случае требуется только одно обновление таблицы поиска
@mplungjan - согласен, возможно, вы показали один из самых эффективных методов для проекта, но дело в том, что я начал изучать javascript всего несколько недель назад, и я думаю, что мне нужно еще немного времени и практики, чтобы идти дальше. Но я записал все предложения, сделанные здесь, и они обязательно будут служить мне ориентиром в будущем. Спасибо вам всем!
Вы можете сделать это в одной функции и поддерживать 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>зачем вы используете dataset, если цель всегда известна?
Это хорошо. Добавлен более простой, который использует поиск, как и вы.
Вы забыли добавить вторую скобку
"в querySelector.