Hiding a Div using Javascript

Hey there, I'm new to this platform so bear with me as I navigate through this.

This is the code I have:

{
  if (session.findById("T1").text == "") {
    document.getElementById("W1").style.display = 'none';
  } else {
    document.getElementById("W1").style.display = 'inline';
  }
}

In simple terms, it's meant to hide W1 when T1 is empty and show it when T1 has content.

I've been trying to work out the issue and even tried running this alone:

document.getElementById("W1").style.display = 'none';

The problem is that the item briefly disappears (flashes) but then reappears. It's somewhat functional but I want it to stay hidden permanently unless there is content in T1.

Any suggestions on how to fix this?

Thanks a bunch!

javascript

Answer №1

Take a look at this prime example

function checkIfEmpty() {
  var textInput = document.getElementById("text-input");
  var hiddenDiv = document.getElementById("hidden-div");
  if (textInput.value.trim() == "") {
    hiddenDiv.setAttribute("style", "display:none;");
  } else {
    hiddenDiv.removeAttribute("style");
  }
}
<input id="text-input" name="text-input" onkeyup="checkIfEmpty()">
<div id="hidden-div" style="display:none;">Text Example</div>

Answer №2

Below is how you can implement the hide option:

document.getElementById("W1").style.display = 'block';

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

Is there a return value for the GEvent.addListener(...) function?

I have a question regarding GEvent.addListener(map, "click" function(){...}). I couldn't find any information about what it returns in the callback function in the GMaps reference. Can you provide some insight on this? The documentation mentions two p ...

javascriptgoogle-mapslistener

Javascript canvas producing a laser beam that serves no purpose

Greetings! I am diving into JavaScript and trying my hand at creating a game. The concept is simple - a ship shooting lasers at alien spacecrafts. However, I've encountered a problem with the destroy function that has left me scratching my head. Surpr ...

javascriptarrayscanvashtml5-canvas

"Exploring Firebase features, what is the process for generating a query using UID as a reference point

I recently developed a function that assigns a UID to the database along with an item's state: changestate(item) { var postData = { state: "listed", }; var user = firebase.auth().currentUser; var uid = user.uid; var updat ...

javascriptangularfirebasefirebase-realtime-database

Steady always faces in one direction

I have been working on a Three.JS scene where I need to create an open-topped cylinder with two different colors for its front and inside surfaces. To achieve this, I extended a new material class from THREE.MeshStandardMaterial and made adjustments to th ...

javascriptthree.jsglsl

Wondering how to execute logic before generating a template in a custom directive?

I am interested in creating a unique custom directive that can take an array of strings and display it as a table. Here is an example of how I envision it: 'string1' | 'string2' | 'string3' | 'string4' 'stri ...

javascriptangularjsfrontenddirective

Tips for implementing server-side rendering in Jade using an Array of JSON objects instead of just a single JSON object

In my Node.js server, I am working with an array of JavaScript objects retrieved from a MySQL query. To pass this array to my Jade template, I use the following code in my router.js: data = JSON.stringify(rows[0]); res.render('yourUploads', {fro ...

javascriptarraysjsonnode.jspug

Tips for converting NULL% to 0%

When running my calculatePercents() method, I am receiving NULL% instead of 0%. https://i.sstatic.net/NSbls.png Upon checking my console.log, I noticed that the values being printed are shown as NULL. https://i.sstatic.net/A7Jlk.png calculatePercents() ...

javascriptangulartypescript

Converting a PHP string into a JSON array

Currently, I am working on making a cURL request and receiving a response that is in the following format when using var_dump: string(595) "{"user_id":1,"currency":"eur","purchase_packs":{"1":{"amount":500,"allowed_payment_methods":["ideal","paypal","visa ...

javascriptphpjqueryjson

What is the best method for transferring array values from an input field to a function when the input

When selecting dates, the format that comes out is 02/01/2017-06/19/2017 as one value. However, I need to pass these selected values as two separate values to a function named "VizDateRange". How can I achieve this? //HTML <div class="input-group date ...

javascriptjquerytableau-apidaterangepicker

Effective ways to resolve the ajax problem of not appearing in the console

I am facing an issue with my simple ajax call in a Java spring boot application. The call is made to a controller method and the returned value should be displayed in the front-end console. However, after running the code, it shows a status of 400 but noth ...

javascriptjavaajax

Utilize regular expressions to substitute content with HTML tags within a directive

While working with Angular JS to iterate through Twitter tweets using ng-repeat, I encountered the need to highlight certain parts of the tweet string such as @tag and #hash. To achieve this, it was suggested to utilize replace method to wrap these element ...

javascripthtmlangularjsregex

Node successfully establishes an MQTT connection, while ReactJS struggles to do so as a component

I'm facing an issue with my MQTT connection. It works fine in nodeJS, but when I try to use it in a React component, I encounter the following error: Error during WebSocket handshake: net::ERR_CONNECTION_RESET I've tried looking for solutions r ...

javascriptnode.jsreactjswebsocketmqtt

Injecting styles dynamically with Nuxt: A step-by-step guide

During the development of a Nuxt application integrated with WordPress, I encountered an issue while trying to import custom CSS from the WordPress API. I am seeking guidance on how to incorporate custom CSS into a template effectively? <template> ...

javascriptvue.jsvuejs2nuxt.js

Break free/Reenter a function within another function

Is there a way to handle validation errors in multiple task functions using TypeScript or JavaScript, and escape the main function if an error occurs? I am working in a node environment. const validate = () => { // Perform validation checks... // ...

javascriptnode.jstypescript

What is the best way to trigger a mouseup event in Vue when the mouse is released outside of a specific element?

To capture the mousedown event on the element, you can simply add @mousedown. If the cursor is lifted inside the element, using @mouseup will capture the event. However, if the mouse goes up outside of the element (even outside of the browser window), the ...

javascriptvue.jsmouseup

Using boolean flags in JavaScript and jQuery

I'm having trouble setting a boolean flag in JavaScript/jQuery. I thought that the flags should change globally after clicking btn1, but for some reason they remain unchanged when clicking btn2. What am I missing? JavaScript: $(document).ready(funct ...

javascriptjquery

Trying to figure out how to execute a codeigniter helper function with JQuery AJAX?

I created a handy function in my helper file within codeigniter that formats prices based on the value and currency ID provided. if(!function_exists('format_price')){ function format_price($val,$curency_id=NULL){ $CI ...

javascriptphpjqueryajaxcodeigniter

Encountering issues during the transition to the updated react-native version 0.70 has posed a challenge for

Help! I encountered an error and need assistance fixing it. I've tried clearing my cache but that didn't work! The error is a TypeError: undefined is not a function in the JS engine Hermes. It also shows an Invariant Violation: Failed to call in ...

javascriptreactjsreact-nativenpmmobile

Intersecting a line with a sphere in ThreeJS

I am working with a scene that includes a red line and a sphere. As the camera rotates, zooms, or moves, I need to check if the line intersects with the sphere from the current camera position (refer to the images below). To visualize this scenario, pleas ...

javascriptthree.js

Injecting services differently in specific scenarios in AngularJS

I have a unique angular service called $superService that I utilize across many of my directives and controllers. However, there is one specific directive where I want to implement the following behavior: If another directive utilizes $superService in its ...

javascripthtmlangularjsdependency-injection