Передача аргумента функции не распознается функцией

Question

Я создал список, используя javascript, и добавил прослушиватель событий к каждому элементу li, например,

  for (var i = (page - 1) * records_per_page; i < (page * records_per_page); i++) {
  var li = document.createElement('li');
  li.id= "lijst";
    li.className="lijst";

  var p = document.createElement('p');
  p.className = "name"
  p.id = "Naam"
  p.innerHTML = obj.Name[i];
  li.appendChild(p);
  var p = document.createElement('p');
  p.className = "adres";
  p.id = "Adres"
  p.innerHTML = obj.Adres[i];
  li.appendChild(p);
  var p = document.createElement('p');
  p.className = "gsm";
  p.id = "GSM"
  p.innerHTML = obj.GSM[i];
  li.appendChild(p);
    myUL.appendChild(li);
}

const element = document.querySelectorAll(".lijst");
element.forEach(function(el){
    el.addEventListener('click',function(){
    fillDiv(el);
  })
});

Когда я вызываю свою функцию, она не распознает аргумент, который я передаю функции.

function fillDiv(el){
    FicheNaam = document.getElementById("FicheNaam");
    FicheGSM = document.getElementById("FicheGSM");
    FicheAdres = document.getElementById("FicheAdres");

    FicheNaam.innerHTML = el.querySelector('.naam').textContent;
    FicheGSM.innerHTML = el.querySelector('.gsm').textContent;
    FicheAdres.innerHTML = el.querySelector('.adres').textContent;
}

function fillDiv(el){
    FicheNaam = document.getElementById("FicheNaam");
    FicheGSM = document.getElementById("FicheGSM");
    FicheAdres = document.getElementById("FicheAdres");

		FicheNaam.innerHTML = el.querySelector('.naam').textContent;
    FicheGSM.innerHTML = el.querySelector('.gsm').textContent;
    FicheAdres.innerHTML = el.querySelector('.adres').textContent;
    
}

var current_page = 1;
var records_per_page = 2;
var obj = {
        Name: ["John","Peter","Ben","Jonathan"],
        GSM: ["123","456","789","444"],
        Adres: ["Adress1","Adress2","Adress3","Adress4"],
};

function changePage(page){
		var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");
    var listing_table = document.getElementById("myUL");
    var page_span = document.getElementById("page");

		       
    if (page < 1) page = 1;
    if (page > numPages(obj)) page = numPages(obj);
    listing_table.innerHTML = "";
    
    for (var i = (page - 1) * records_per_page; i < (page * records_per_page); i++) {

      var li = document.createElement('li');
      li.id= "lijst";
     	li.className="lijst";
      
      var p = document.createElement('p');
      p.className = "name"
      p.id = "Naam"
      p.innerHTML = obj.Name[i];
      li.appendChild(p);
      var p = document.createElement('p');
      p.className = "adres";
      p.id = "Adres"
      p.innerHTML = obj.Adres[i];
      li.appendChild(p);
      var p = document.createElement('p');
      p.className = "gsm";
      p.id = "GSM"
      p.innerHTML = obj.GSM[i];
      li.appendChild(p);
    	myUL.appendChild(li);
    }
    
    const element = document.querySelectorAll(".lijst");
    element.forEach(function(el){
    	el.addEventListener('click',function(){
      	fillDiv(el);
      })
    });
    
    page_span.innerHTML = page +"/"+numPages(obj);
    
    
}
function prevPage(){
    if (current_page > 1) {
        current_page--;
        changePage(current_page);
    }
}
function nextPage()
{
    if (current_page < numPages(obj)) {
        current_page++;
        changePage(current_page);
    }
}
function numPages(obj)
{
    return Math.ceil(obj.Name.length / records_per_page);
}
window.onload = function() {
    changePage(1);
};

#filldiv{
  background-color:grey;
  float:right;
}

<div id="filldiv">
<p id="FicheNaam">Name</p>
<p id="FicheGSM">GSM</p>
<p id="FicheAdres">Address</p>
</div>
<a onclick="prevPage()" class="previous" id="btn_prev" aria-label="Previous">
  <span aria-hidden="true">&laquo;</span></a>
<a class="next" onclick="nextPage()" id="btn_next" aria-label="Next">
  <span id="page"></span>
  <span aria-hidden="true">&raquo;</span> </a>
<ul id="myUL">
  
</ul>

Включен jsfiddle https://jsfiddle.net/h3o2Lbe8/ и фрагмент моего кода.

Мне нужно заполнить div справа информация в каждом ли.

Answer 1

Вот исправление:

function fillDiv(el) {
   FicheNaam = document.getElementById("FicheNaam");
   FicheGSM = document.getElementById("FicheGSM");
   FicheAdres = document.getElementById("FicheAdres");

   FicheNaam.innerHTML = el.querySelector('.name').textContent;
   FicheGSM.innerHTML = el.querySelector('.gsm').textContent;
   FicheAdres.innerHTML = el.querySelector('.adres').textContent;
}

Пояснение: Код в порядке, за исключением проблемы с именованием. В функции changePage () вы использовали имя класса name

А в функции fillDiv вы пытались использовать имя класса naam в селекторе запросов

FicheNaam.innerHTML = el.querySelector('.naam').textContent;

Произошло исключение в funciton, потому что el.querySelector ('. naam') возвращает undefined, и вы пытались получить доступ к свойству .textContent.

Исключение в консоли Скриншот вашего рабочего кода