0

I am writing a simple web app using Flask for the backend, and vanilla javascript in the front. The app will simply allow the user to navigate the local filesystem in the browser. It's not supposed to be a useful or good app, I'm just practicing.

My problem is that when writing the frontend js, I get to the following point, where I encounter an issue:

getData();

let root = document.getElementById('root');

async function getData() {
  const response = await fetch(`http://localhost:5000/`)
  const data = await response.json();
  const header = document.getElementById('current')
  header.textContent = '/'

  for (item of data.current_directory) {
    const entry = document.createElement('p');
    entry.textContent = item;
    const button = document.createElement('button');
    button.innerHTML = 'Go'
    
    button.addEventListener('Click', goTo(item))
    root.append(entry, button);
  }
}

async function goTo(location) {
  const response = await fetch(`http://localhost:5000/?location=${location}`);
  data = await response.json();
  const header = document.getElementById('current');
  
  header.textContent = location;
  root.textContent = '';

  for (item of data.current_directory) {
    const entry = document.createElement('p');
    entry.id = item
    entry.textContent = item;
    root.append(entry);
  }
}

I am simply trying to fetch the directory structure,starting at root / (I'm on Linux) from the server, and then display each file/directory in the path as a <p> element, after which I create a button element that should take you to that directory when clicked.Problem is, when I open this in my browser, for some reason the eventlistener gets triggered automatically, with each loop iteration. If I check Flask's logs, I can see a whole bunch of get requests, consistent with the "goTo" function being called over and over again.

And yes I know I should probably be using a frontend framework for this, but I'd like to understand vanilla javascript before doing that.

Any suggestions?

Thanks

biberman
  • 5,606
  • 4
  • 11
  • 35
nannomous
  • 1
  • When you create listener you are calling the callback function. But callback is the function you pass as an argument and then another function calls it. – capchuck Jun 30 '22 at 11:00
  • Unrelated to the issue you are seeing, but you need to use `for (const item of ...` and not `for (item of ...`. Also l you need to use lowercase `"click"` not `"Click"` – Nick Parsons Jun 30 '22 at 11:03
  • 1
    Exactly like @capchuck wrote. You should adjust your code to have `button.addEventListener('Click', () => goTo(item))` – Hakier Jun 30 '22 at 11:03

0 Answers0