求助：基于搜索输入切换titleMain元素显示与隐藏的实现问题

Hey there! Let's troubleshoot why your titleMain element isn't showing or hiding as expected when using the search bar. From the code snippet you shared, I can spot a few gaps and easy fixes to get this working right.

Common Issues in Your Current Code #

• Missing titleMain reference: You haven't included code to select the titleMain element—this is critical because you can't manipulate an element you haven't grabbed from the DOM.
• Possible typo: The docu... in your snippet looks like an incomplete document reference, which would throw errors and break your code.
• Unaccounted for whitespace: If a user enters just spaces, your current logic might treat it as "has input" when it should still show titleMain.

Corrected Full Code #

Here's a complete, working version that addresses these issues:

// Grab the search input and titleMain element (adjust the selector for titleMain if needed)
const searchBar = document.forms['search-books'].querySelector('input');
const titleMain = document.getElementById('titleMain'); // Use .titleMain if it's a class instead

// Use the 'input' event instead of 'keyup'—it captures ALL input methods (paste, drag, typing)
searchBar.addEventListener('input', function(e) {
  // Trim whitespace and convert to lowercase for consistent checking
  const term = e.target.value.trim().toLowerCase();

  // Toggle titleMain visibility based on input content
  if (term) {
    // Hide titleMain when there's actual input
    titleMain.style.display = 'none';
  } else {
    // Show titleMain when input is empty (match the element's default display value if not block)
    titleMain.style.display = 'block'; 
    // Example: if titleMain uses flex, replace with 'flex' instead of 'block'
  }

  // Your existing book filtering logic can go here
  const books = document.getElementsByTagName('h5');
  // ... rest of your code to filter books
});

Key Notes to Make This Work #

1. Correctly select titleMain:

   • If it has an ID: document.getElementById('titleMain')
   • If it uses a class: document.querySelector('.titleMain')
   • Double-check that your selector matches the actual HTML element.

2. Use input instead of keyup:
   The keyup event misses inputs from pasting text, dragging content, or using virtual keyboards. input covers all these cases, making your logic more reliable.

3. Handle whitespace:
   The trim() method removes leading/trailing spaces, so a user entering only spaces won't trigger the hide action.

4. Match default display value:
   If titleMain is normally displayed as flex, inline-block, or something else, replace 'block' with that value in the else clause to restore its original layout.

Troubleshooting Steps #

• Open your browser's dev tools (F12) and check the Console tab for errors. If you see "Cannot set property 'display' of null", that means your titleMain selector is wrong—fix it to match your HTML.
• Test by typing in the search bar and clearing it. Use the Elements tab to inspect titleMain and see if its style.display property is updating correctly.

内容的提问来源于stack exchange，提问作者Ashonko