Vanilla JS: Get undefined when calling a function in in-line html

Question

I get undefined like shown on the picture, when I attach filterByTypes function to onclick on my button. It worked correctly before I started to use webpack. Maybe my syntax is not correct.

function filterByTypes(type) {
      console.log(type)
      getBookmarks(type)
      const buttons = document.querySelectorAll('.button')
      for (let i = 0; i < buttons.length; i++) {
        if (buttons[i].dataset.id === type) {
          buttons[i].classList.add('highlight')
        } else {
          buttons[i].classList.remove('highlight')
        }
      }
    }
    
    export function generateOptionsAndFilters() {
        for (let i = 0; i < types?.length; i++) {
          sourceType.innerHTML += 
          `<option value=${types[i].value}>${types[i].selectName}</option>`
      
          filterStrip.innerHTML += 
          `<button onclick="${filterByTypes(`${types[i].value}`)}" class="button" data-id=${types[i].value}>${types[i].selectName}</button>`
        }
      }

Add an eventlistener to the button instead. – XRaycat Oct 05 '22 at 09:10 — XRaycat, Oct 05 '22 at 09:10

Quentin · Answer 1 · 2022-10-05T09:18:02.373

Template strings are syntax for generating strings.

Inside the template, ${filterByTypes(${types[i].value})} means "Call filterByTypes with the given argument right now and put the return value in the resulting string.

filterByTypes has no return statement, so it returns undefined.

If you want to generate an onclick attribute, then you need to put the JavaScript source code you want in the resulting string instead.

You'll end up with something along the lines of:

onclick="filterByTypes(${escapeHTML(JSON.stringify(types[i].value))})"

Note this uses the escapeHTML function from this answer.

I do not recommend this as it is fragile, has scoping issues, can be vulnerable to XSS attacks, and is hard to debug.

Generating your DOM using DOM methods instead of mashing strings of HTML together is safer.

export function generateOptionsAndFilters() {
    for (let i = 0; i < types?.length; i++) {

      const option = document.createElement('option').
      option.textContent = types[i].selectName;
      option.value = types[i].value;
      sourceType.appendChild(option);

      const button = document.createElement('button');
      button.className = "button";
      button.setAttribute('data-id', types[i].value);
      button.textContent = types[i].selectName;
      button.addEventListener("click", () => filterByTypes(types[i].value));
      filterStrip.appendChild(button);
    }
  }

score -1 · Answer 2 · answered Oct 05 '22 at 09:22

-1

Might be additional back ticks. Try this

filterStrip.innerHTML +=  `<button onclick="${filterByTypes(${types[i].value})}" class="button" data-id=${types[i].value}>${types[i].selectName}</button>`

answered Oct 05 '22 at 09:22

Chris Pretorius

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 10 '22 at 09:31

Vanilla JS: Get undefined when calling a function in in-line html

2 Answers2