Is there a way to retrieve the ID from CSS in Javascript without using getElementByID?

I'm facing an issue with CSS and JavaScript that I need help with.

On my webpage, I have several DIVs with unique IDs fetched from a MySQL database. The goal is to make a specific DIV disappear when a user clicks on it. Since everything is dynamic, I've passed the ID as a variable to the function. However, I'm struggling to understand how to correctly use this ID in order to achieve the desired outcome. I am looking for an alternative to document.getElementById().

JS:

function flashout(the_unique_id){
document.getElementByID(???).style.display = "";
}

HTML/CSS:

<div id="394" onclick="flashout(394)">...</div>
<div id="723" onclick="flashout(723)">...</div>
javascripthtmlcss

Answer №1

Although the ID is available for use, it is not required to utilize it. Simply include this as a parameter:

<div id="394" onclick="hideElement(this)">...</div>
<div id="723" onclick="hideElement(this)">...</div>

Then, treat that parameter as the element itself instead of using it as a string ID:

function hideElement(div_element){
   div_element.style.display = "none";
}

Additionally, if you want the DIV to disappear, make sure to set style.display to "none", not "".

Answer №2

It appears that I have a clear understanding of your requirements.

When defining a function and its parameters in JavaScript, the parameter can be treated like a variable within the function definition. Give this a try

HTML:

<div id="394" onclick="flashout(394)">...</div>
<div id="723" onclick="flashout(723)">...</div>

JS:

function flashout(unique_id){
  document.getElementByID(unique_id).style.display = "";
}

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

How to Retrieve the Current div's ID in VueJS

When using the v-for directive to dynamically generate an id for my div, I need to pass this unique id to a specific function. <div v-for="(item, index) in items" :key="index" :id="'form' + index" > ...

javascripthtmlvue.jsvuejs2vue-component

The image on Bootstrap isn't showing up

Can someone please help me troubleshoot why my logo image is not showing up? I can't figure out why the min and max width/height parameters are not working as intended. Here is my HTML: <div class="container-fluid"> <div class="head"> ...

htmlcsstwitter-bootstrap

Redux Form: Input remains untouched with `touched: false'

Looking to validate my input fields and dynamically change the CSS based on user interaction. To start, I implemented a required validation method by wrapping all input components with a <Field> tag and passing an array of functions to the validate ...

javascriptreactjsformsreduxredux-form

Laravel Tutorial: Utilizing for and foreach Loops to Showcase Data in Blade Template

I am trying to use a for and foreach loop to display data based on a template table. However, I am running into an issue where the else conditions always display an index of their own. My expectation is as follows: https://i.stack.imgur.com/tqDSn.png Th ...

phphtmllaravelpostgresqllaravel-7

Tabulator: Adding a new row with merged columns in Tabulator

Is there a method to insert a new row in Tabulator that spans multiple columns? view image here I am looking for something similar to this, where data is displayed across more than one column. I need to incorporate additional details retrieved from an aj ...

javascripttypescriptdatatabletabulator

An error is encountered with the 'this' keyword in the map operator of Angular

I am in the process of developing a custom validator for a Slug form control and have encountered an issue with my code. ngOnInit() { this.slugCtrl.setAsyncValidators(this.slugValidator); } slugValidator(control: AbstractControl) { const obs1 = c ...

javascriptangulartypescriptrxjsngrx

Using Three.js to load blender JSON files

Hey there! I'm currently facing some challenges when it comes to importing models from Blender into three.js. Currently, I am using the latest version of three.js (R71). I have successfully installed the three.js exporter in Blender and it works fine ...

javascriptjsonthree.jsblender

React State Displays Incorrect Value of False Instead of True

Task is quite straightforward. Once a checkbox is clicked, the itemOne state is initially set to true. Subsequently, it should switch states if clicked again. Upon invoking itemOneSelected, itemOne is displayed as false. The query: What is the reason behi ...

javascriptreactjs

The cloned rows created with jQuery are failing to submit via the post method

Hello, I am currently working on a project in Django and could use some assistance with my JavaScript code. Specifically, I am trying to incorporate a button that adds new rows of inputs. The button does function properly as it clones the previous row usin ...

javascripthtmljquerydjango

Utilizing an alternative HTML design with the identical XSL style sheet

Can a single XSLT stylesheet be used with different HTML layouts? In my exploration of XSLT, I've noticed that most examples have the HTML code embedded within the stylesheet itself. Is it feasible to apply the same stylesheet to various HTML layout ...

javahtmlxsltvelocityxalan

How can I display JSON data as key-value pairs in ReactJS?

Transitioning from JavaScript to React, I've come across some threads that touch on this topic but none quite hit the mark. I have a local JSON file that was created with a Python script, and it looks something like this: [{"hello": 10, "world": 15 ...

javascriptjsonreactjs

Passing a number instead of a string in Reactjs onClick for the <MenuItem> element

Using material-ui in ReactJS, the code below showcases a sidebar function for filtering product information. The sidebar includes two filters: size and color. Clicking on the Expansion Panel reveals options, but when selecting a color, the colorReducer fun ...

javascripthtmlreactjsreact-reduxmaterial-ui

What is the significance of the /** @class */ in Typescript?

As I delve into learning typescript, I have come across an interesting observation regarding the compiled javascript output. It seems that for every class in the compiled code, there is a specific comment attached to it that looks like this: /** @class */. ...

javascripttypescript

What are the endless possibilities of JavaScript?

My main goal is to maximize client-side functionality using JavaScript. Specifically, I want to create an interface that displays information to users and processes their responses using JavaScript. I plan to use a web server only for retrieving a data fil ...

javascriptajaxwebformsclient-side

Custom pagination for next/previous links in Django REST framework

When it comes to backend operations, I have integrated the PageNumberPagination as the DEFAULT_PAGINATION_CLASS. Since I am utilizing vue.js along with fetch, there is no need for me to include the entire URL structure provided by django-rest-framework: " ...

javascriptdjangovue.jsdjango-rest-frameworkpagination

Tips for utilizing the 'map' function with nested arrays within an array (JSON)

Below is the JSON data provided: users = [{ "name": "alex", "id":123, "surname":"xx", tarriff: { "id":1, "name":"free" } }, { "name": "tom", "id":124, "surname":"henry", tarriff: { "id":1, "name": ...

javascriptarraysjson

Is it advisable to clear the bootstrap tooltips array in order to conserve browser memory once I have finished rendering new tooltips?

My apologies if this question has been asked before, but I searched online first and couldn't find a helpful answer. Beautiful Views Recently, I was working on a project where I needed to display search results, each accompanied by a button that trig ...

javascripttwitter-bootstrapbootstrap-5

Slide in overlay and slide out to the left

One of the features on my website is an overlay that slides in from right to left when the user clicks on the "Open" text. Currently, this overlay covers the entire page. The overlay has a class name of Overlay, and its contents are located under .overlay ...

jqueryhtmlcss

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Can anyone help with this Navber code issue? <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;"> <div class="collapse navbar-collapse justify-content-center" id="navbarNav"> <a class="navbar-brand" ...

htmlcss

Unveil SQL Limit with a Simple Scroll Load

After successfully laying out and creating my website, the next step is to load more results on scroll. This question has been posed numerous times before, but I am curious if there is a simple solution that can seamlessly integrate into my current setup. ...

javascriptphpjquerysqlajax