Is there a way to change an element's display to 'block'? (see more information below)

I'm having an issue with my event listener for a button that is supposed to change the css of #popUpForm. It seems to only work when I add inline css directly to #popUpForm. Is there a way to achieve this without using inline css and instead setting the display property in the css file?

const addBtn = document.querySelector('#addItem')

addBtn.addEventListener('click', function() {
  document.querySelector('#popUpForm').style.display = 'block'
})
#popUpForm {
  width: 350px;
  height: 500px;
  display: none; /* change this */
}
<input id="addItem" type="button" value="+">

<div id="popUpForm">
  Some stuff
</div>

javascripthtmlcssdomwebpack

Answer №1

Although your code is functional, I would suggest using a class for better organization

const addBtn = document.querySelector('#addItem')

addBtn.addEventListener('click', function() {
  document.querySelector('#popUpForm').classList.toggle("hide");
})
#popUpForm {
  width: 350px;
  height: 500px;
}

.hide {
  display: none;
}
<input id="addItem" type="button" value="+">

<div id="popUpForm" class="hide">
  Here is some stuff
</div>

Answer №2

To toggle the visibility of an element, you can utilize jQuery's show and hide methods:

$('#popUpForm').hide();
$('#popUpForm').show();

If you prefer using Vanilla JavaScript instead:

const hideElement = (element) => {
   element.style.display = 'none';
 }

const showElement = (element) => {
    element.style.display = 'block';
}
 
 // Usage
 // Hide element

 hideElement(document.querySelector('#popUpForm'));

// Show element

showElement(document.querySelector('#popUpForm'));

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

Breaking a line within a list item will create additional spacing between the lines

Is there a way to break a line <br/> inside a <li> tag? For example: First line second line Second list item Third list item I've tried setting margin and padding to 0, but I still get an unwanted space between the lines. Any suggesti ...

htmlcss

Adjusting the columns of two tables when one table is held in place

My dilemma involves managing two tables: In the scenario, Table 1 remains fixed in place serving as a header that is always visible. Meanwhile, Table 2 acts as the data table. I am not a fan of fixed widths for my tables; I prefer them to dynamically adj ...

jqueryhtmlcsstwitter-bootstrap-3

Discovering if an array includes a particular value in JavaScript/jQuery

Is there a way to check if the list with the class .sidebar contains an item with data-id="1"? <ul class="sidebar"> <li data-id="1">Option 1</li> <li data-id="2"> Option 2</li> <li data-id="3"> Option 3</li&g ...

javascriptjquery

Creating a Cascading State and City Dropdown Using Knockout JS and JSON Data

When the user selects a state from two fields, state and city, a call is sent to the server returning JSON data. This data needs to be used to update the city field in knockout, but there seems to be an issue with the syntax of getting the ajax data. Here ...

javascriptjqueryajaxjsonknockout.js

The functionality of my website is currently experiencing difficulties when accessed through the Android UC Browser

My website, , is experiencing issues with product loading and the '+' button in the side menu not working on UC Browser. It works fine on other Android browsers like Chrome and Firefox, but I am confused as to why it is not functioning properly o ...

javascriptjqueryhtmlcssuc-browser

When importing a module, the function in the ts file may not be recognized or located

While attempting to create a VSTS (Azure Devops) Extension, I encountered a perplexing issue. Within my HTML page, I have a button element with an onclick listener: <!DOCTYPE html> <head> <script type="text/javascript"> VS ...

javascripttypescriptazure-devops-extensions

unable to respond when clicking an angularjs link

I'm facing an issue where I can't get a link to respond to click events in AngularJS. When I click on the anchor link, nothing happens. Here is a snippet of the AngularJS script: <script data-require="<a href="/cdn-cgi/l/email-protection" ...

javascriptjqueryhtmlangularjs

Veevalidate in Vuejs always results in a true output

When using webpack and setting up VeeValidate, I have written the code like this: import VeeValidate from 'vee-validate'; Vue.use(VeeValidate, { // This is the default inject: true, // Make sure to name fieldsBagName differently than ...

vue.jswebpackvuejs2vee-validate

Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, b ...

htmlcssbootstrap-4

Angular binding causing decimal inaccuracies

Within my $scope, I have a variable tobing that can be either 2.00 or 2.20, and I am binding it to: <span>{{datasource.tobind}}</span> I want the displayed text to always show "2.00" or "2.20" with the two last digits, but Angular seems to au ...

javascriptangularjsbindingdecimal

The custom $compile directive is selectively applied within the same scope

Thank you for taking a look. Let's get right into it: A JSON object contains HTML links with ng-click attributes, using ng-bind-html, and securing the HTML with $sce's trustAsHtml. Additionally, I've implemented a custom angular-compile dir ...

javascriptangularjsjsonangularjs-directiveangularjs-rootscope

What is preventing my image from moving upwards?

I've been struggling to move this image up, despite trying several methods. I really want it to be aligned horizontally with the PV picture. I need the HP image to be moved directly upwards so that it aligns horizontally with the PV image. This is t ...

htmlimagecss

The validation errors in the form of CodeIgniter are not being displayed by the JavaScript variable

Currently, I am utilizing the built-in validation_errors() function in CodeIgniter for my login form. The validation errors are displaying correctly in my view, but when I try to echo them into a JavaScript variable within the script to customize notificat ...

javascriptphpjquerycodeignitervalidation

Separate the webpage into distinct sections for effective web design

I'm attempting to create a collapsible sidebar for mobile phones. However, after the first three images, the subsequent images on the next line appear below the sidebar instead of beside it. The top part looks fine, but as I scroll down to view the o ...

htmlcsstwitter-bootstrapbootstrap-5

Using data from an API, I am implementing JavaScript validation for my dropdown select menu

Using an API, I am able to access information about the city's subway stations through a select option. Currently, I can only display details about one station (Balard). However, I would like to be able to display information about other stations tha ...

javascripthtmljsonapi

Attempting to transmit multiple variables

Can anyone provide assistance with passing multiple variables from one page to another? I am able to pass a single variable, but I need to send more than one by clicking a link. Below is a snippet of my code containing the rows I want to transmit to the ne ...

phphtmlpdo

Show the form for user input

I have an HTML code for a form that requires input. Once the 'OK' button is clicked, the values are sent to a PHP script using $_POST. Is it possible to display the same form again if the input format is incorrect, but do so only within my PHP sc ...

phphtml

A guide on effectively utilizing nested arrays within a pcolumn prime ng data table

I have a nested array structure and I am utilizing PrimeNG data table to display the data. Below is the organization of my array: this.institutionalTimetable = [ {day: "Monday", entries: [{startTime: "132", endTime: "789", recess: true, subject: 'Eng ...

javascriptangulartypescriptprimengprimeng-datatable

Angular HTML fails to update correctly after changes in input data occur

Within my angular application, there is an asset creator component designed for creating, displaying, and editing THREE.js 3D models. The goal was to implement a tree-view list to showcase the nested groups of meshes that constitute the selected model, alo ...

htmlangulartypescript

Fade-In and Fade-Out CSS Effect with Background Images Displaying a Blank Last Image

I've been experimenting with applying a CSS-only background image transition to a div, but I encountered an issue where after cycling through three specified images, the background reverts back to the original black color. Even stranger, when I adjust ...

htmlcss