JavaScript: Executing functions within switch statements

Other Questions JavaScript
1

I’m struggling with my JavaScript code for a simple search feature. I’ve set up a switch statement to handle different search inputs, but it’s not working as expected. Here’s what I’ve got:

function performSearch() {
  let query = document.getElementById('searchInput').value;
  
  switch (query) {
    case 'laptop':
      displayProduct();
      break;
    case 'desktop':
      displayProduct();
      break;
    case 'tablet':
      displayProduct();
      break;
    default:
      alert('No matching products found.');
      break;
  }
}

The search box shows up fine, and the default alert works. But when I enter ‘laptop’ and hit search, nothing happens. I’ve only managed to get it working by using document.write(displayProduct) instead of displayProduct().

My HTML form looks like this:

<form id='searchForm'>
  <input type='text' id='searchInput'>
  <button type='button' onclick='performSearch()'>Search</button>
</form>

Am I missing something obvious? How can I properly call my function from within the switch statement?

2

I’ve encountered this issue myself before. The problem usually isn’t with the switch statement but with how the displayProduct function is defined or used. Make sure displayProduct is available within the same scope as performSearch and that it actually manipulates the DOM rather than just returning a value.

To troubleshoot, try console.logging the query inside performSearch to confirm the input is captured correctly. Also, insert a console.log within each case to verify the switch is executing as expected. Finally, if displayProduct should update the page, check that it targets the correct HTML elements, and consider using addEventListener instead of an inline onclick attribute if the problem persists.

3

I’ve encountered similar issues before. The problem likely stems from the scope or definition of your displayProduct function. Ensure it’s properly defined and accessible within the performSearch function’s scope. Also, verify that displayProduct actually modifies the DOM or produces visible output. If it’s just returning a value, you might need to capture and use that return value explicitly. Consider adding console.log statements inside displayProduct to confirm it’s being called. Lastly, check for any JavaScript errors in your browser’s developer console – they could provide valuable clues about what’s going wrong.

4

hey there! looks like ur displayProduct function might not be defined or visible in the scope where performSearch is. make sure displayProduct is declared before performSearch and is accessible. also, double-check that displayProduct does something visible - it might be running but not showing any output. hope this helps!