Ways to initiate JavaScript event upon clearing input form field

I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user clears the search box, they are left with a blank page because the display property of #home is still set to none.

Is there a way for JavaScript to detect when the user has cleared the input field at #search-input so that #home can be displayed again?

document.getElementById('search-input').oninput = function() {
    document.getElementById('home').style.display = 'none';
};

javascripthtml

Answer №1

To achieve this functionality, utilize the input event listener. Implement a condition to hide the #home element when the input field is empty. Reveal the element only when it was previously hidden:

const searchInput = document.getElementById('search-input');
const home = document.getElementById('home');

searchInput.addEventListener('input', function() {
    if (!this.value) {
        home.style.display = 'none';
    } else if (this.value && home.style.display === 'none') {
      home.style.display = 'block';
    }
});
<input id="search-input" type="text"/>

<div id="home">
  Sample Content
</div>

Answer №2

A big shoutout to Carl Edwards for the assistance!

Behold, behold! The flawless final code:

const search = document.getElementById('search-input');
const mainPage = document.getElementById('home');
const searchResults = document.getElementById('results');

search.addEventListener('input', function() {
    if (this.value) {
        mainPage.style.display = 'none';
        searchResults.style.display = 'inline';
    } else if (!this.value && mainPage.style.display === 'none') {
      mainPage.style.display = 'block';
      searchResults.style.display = 'none';
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the distinction between onKeyUp and onKeyUpCapture in React (as well as onKeyDown/Capture)?

I was unable to find any existing documentation or questions related to my query, which surprised me. Upon inspecting the React index.d.ts file, I came across the following: // Keyboard Events onKeyDown?: KeyboardEventHandler<T>; onKeyDownCapture?: ...

htmlreactjsdom-events

Issue with Material-UI DataGrid Component: Unable to access property 'length' as it is undefined

I need to display my JavaScript Object Data in a table format with pagination and sorting capabilities. I have chosen the DataGrid component from Material UI, but I am encountering some errors. Below is the code snippet: import React from 'react&apos ...

javascriptreactjsdatagridmaterial-ui

Navigating with ASP.NET 5 Routing and AngularJS Routing

Currently, I am working on an ASP.NET 5 application which also utilizes AngularJS for the front-end. The basic client-side HTML routing support offered by Angular has been successfully implemented in my project. In the Startup class, the default routing is ...

javascriptasp.netangularjsasp.net-mvc

Making AJAX requests repeatedly within a loop

My current challenge involves implementing multiple ajax requests within a loop to populate several dropdown lists. Running the requests sequentially has resulted in only the last item in the loop being populated with values. var targetcontrols = []; ...

javascriptjqueryajax

Exploring the variations in method declarations within Vue.js

Today, while working with Vue, I came across an interesting observation. When initially using Vue, there were two common ways to define a method: methods: { foo: () => { //perform some action } } and methods: { foo() { / ...

javascriptfunctionvue.jsscope

Eliminating empty elements from arrays that are nested inside other arrays

I am facing a challenge with the array structure below: const obj = [ { "description": "PCS ", "children": [ null, { "name": "Son", ...

javascriptarraystypescriptjavascript-objects

How to efficiently transfer data between Node and Angular 7 using Electron

After setting up an Angular 7 application running on http://localhost:4200, I developed a Node JS application responsible for authenticating users on Facebook, accessible at http://localhost:3000. The callback redirection functions correctly within the No ...

javascriptnode.jsangularelectron

After downloading the latest version of NodeJS, why am I seeing this error when trying to create a new React app using npx?

After updating to a newer version of NodeJS, I attempted to create a new React app using the command npx create-react-app my-app. However, I encountered the following error message: Try the new cross-platform PowerShell https://aka.ms/pscore6 PS E:\A ...

javascriptnode.jsreactjsnpm

Running a React application through a personalized Express server, all the while ensuring seamless automatic updates throughout the development

I currently have a React application along with a completely distinct Express server application. To serve my React app using a customized express server, I utilize the following code within my Express app: app.get("*", (req, res) => { res. ...

javascriptnode.jsreactjsexpress

Arrangement of Bootstrap card components

Each card contains dynamic content fetched from the backend. <div *ngFor="let cardData of dataArray"> <div class="card-header"> <div [innerHtml]="cardData.headerContent"></div> </div> <d ...

javascripthtmlcssangulartwitter-bootstrap

Assign a value to an Html.HiddenField without tying it to the model upon form submission

I have two classes, SubsidiaryClient and Client, that are related in a one-to-many manner as depicted below. Currently, I am utilizing MVC 5 for development. In the Create SubsidiaryClient page, to retrieve the ClientID, you need to click on the browse bu ...

javascriptc#jqueryasp.net-mvc

What is the proper way to invoke a function that is part of a child component as a property in a React application?

In my app.js file, I have included a unique component called "SigningComponent" with the following code: onSign = () => { this.setState({ route: "home" }); }; registerFunction = () => { this.setState({ route: "registration" }); }; render() { ...

javascriptreactjscomponentsparent-childreact-props

display information with html

Encountered an error while attempting to display data using HTML: https://i.stack.imgur.com/vRXL3.png This is the code in question : <?php echo form_open("dashboard/edit_product/$product_id");?> <div class="form-group"> <div c ...

phphtmlecho

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

The server is unable to process the .get() request for the file rendering

Struggling with basic Express routing here. I want the server to render 'layout2.hbs' when accessing '/1', but all I'm getting is a 304 in the console. Here's the error message: GET / 304 30.902 ms - - GET /style.css 304 3.3 ...

javascriptnode.jsexpressrouteshandlebars.js

Performing two API calls using Jquery to fetch distinct dynamic elements within two nested $.each loops

There's an API link that contains crucial data about phone brands. From this initial data, I have to create a second API call for each brand to gather more detailed information. For example, the first JSON file (urlphonebrands) lists 3 phone brands - ...

javascriptjqueryjsonapiloops

Send data from JavaScript variables to PHP script

I've been trying to figure out how to pass variables from a js function to my database using php, but I've hit a roadblock. Any suggestions on how I can resolve this issue would be greatly appreciated. <html xmlns="http://www.w3.org/1999/xhtm ...

javascriptphp

Difficulty altering value in dropdown using onChange function - Material-UI Select in React app

Having trouble updating dropdown values with MUI's Select component. The value doesn't change when I use the onChange handler, it always stays the same even after selecting a new item from the dropdown. I made a functional example on CodeSanbox. ...

javascriptreactjsmaterial-ui

Do not reveal result of coin flip using Javascript and API

Even though I meticulously copied my professor's parsing process, the display isn't turning out as expected. It seems like something is off in my code. <div class="main"> <p>Heads or tails? click to toss the coin</p> & ...

javascriptjsonxmlhttprequest

The error message "window is not defined" is commonly encountered in Next

Having some trouble with using apexcharts in a next.js application, as it's giving me an error saying 'window is not defined'. If anyone has any insights or solutions, I would greatly appreciate the help. Any ideas on what could be causing ...

javascriptreactjstypescriptnext.jsapexcharts