0

So to quickly summarize my problem:

For an assigment in my class I had to fetch json data and put it on screen in a table. This works fine and im not gonna include that part of the code cause I am 100% certain that this isn't the problem.

The hard part was to order them by gender by clicking three links at the top of the page. I had this working using three anonymous onclick functions but my teacher told me I need to try and not repeat multiple lines of code. So he showed me a way to put it in one function. This was at the end of class so I couldnt really do it straight away in my own file. I tried it at home but it doesn't seem to be working and I just can't figure out why because my three seperate onclicks still do the job.

these are the three seperate onclick functions that work. As you can see when u click the males link. It hides all the female rows. If you click the females it hides all the males and if u click all its shows everyone.

males.onclick = function() { 
         const rowsF = document.querySelectorAll("#female");
        const rowsM = document.querySelectorAll('#male');
        for (const row of rowsF) {
            row.hidden = true;
        }
        for (const row of rowsM) {
            row.hidden = false;
        }
}
females.onclick = function() { 
         const rowsF = document.querySelectorAll("#female");
        const rowsM = document.querySelectorAll('#male');
        for (const row of rowsF) {
            row.hidden = false;
        }
        for (const row of rowsM) {
            row.hidden = true;
        }
}
all.onclick = function() { 
         const rowsF = document.querySelectorAll("#female");
        const rowsM = document.querySelectorAll('#male');
        for (const row of rowsF) {
            row.hidden = false;
        }
        for (const row of rowsM) {
            row.hidden = false;
        }
}

Now this is my adjusted code that looked cleaner and is shorter. But there must be a mistake here cause this doesn't seem to work and I just can't figure out why it doesn't. Any help?

males.onclick = gender("m");
females.onclick = gender("f");
all.onclick = gender("a");

function gender(stringGender) {
    const females = document.querySelectorAll('#female');
    const males = document.querySelectorAll("#male");
    if (stringGender === 'm') {
        hideList(females, true);
    }
    if (stringGender === "f") {
        hideList(males, true);
    }
    if (sGeslacht === "a") {
        hideList(females, false);
        hideList(males, false);
    }
};

function hideList(genderRow, isHidden) {
    for (const row of genderRow) {
        row.hidden = isHidden; 
    }
};

I am a beginner in javascript. I have been following a course the past three months and this is the last assignment we have before moving on to a new language. So if u see any other things in my code that I could do better feel free to tell me :)

Kind regards

Fraku
  • 56
  • 4
  • `males.onclick = gender("m");` **calls** `gender("m")` and assigns its return value to `onclick`. You want to assign a function to `onclick`: `males.onclick = () => gender("m");` – T.J. Crowder Apr 30 '21 at 15:08
  • males.onclick = () => gender("m"); this is a lambda line right? – Fraku Apr 30 '21 at 15:12
  • It's an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). Some people call them lambdas, yes. – T.J. Crowder Apr 30 '21 at 15:13
  • It worked :) thanks a lot. I do have one follow up question tho. I assume this is a lambda line. Anyway u could show me how its written in regular code. Cause im still not really familiar with lambdas so I want to learn it the regular way too. still thanks a lot for the answer really appreciate it. – Fraku Apr 30 '21 at 15:14
  • Again, it's properly called an arrow function (not least because most definitions of "lambda" make a point of their being anonymous, but not all arrow functions are anonymous). The page linked above is a really short read. But you could also use a traditional function expression: `males.onclick = function() { gender("m"); };`. (That's not quite the same thing, because it doesn't return `gender`'s return value and `() => gender("m")` does, but `gender` doesn't have a return value so it doesn't matter. An exact analog would be `() => { gender("m"); }` vs. `function() { gender("m"); }`.) – T.J. Crowder Apr 30 '21 at 15:16

0 Answers0