Different ways to manipulate the CSS display property with JavaScript

Question

Different ways to manipulate the CSS display property with JavaScript

Having trouble changing the CSS display property to "none" using JavaScript.

Check out my code:

<div class="mydiv" onClick="clickDiv1()">hello</div>
<div class="mydiv" onClick="clickDiv2()">hi</div>
<div class="mydiv" onClick="clickDiv3()">goodbye</div>

And here's my script:

 function clickDiv1() { 
alert('You clicked the first div!');
document.getElementByClassName('mydiv').style.display="none";
}

 function clickDiv2() {
alert('You clicked the second div!');
document.getElementByClassName('mydiv').style.display="none";
}

 function clickDiv3() {
alert('You clicked the third div!');
document.getElementByClassName('mydiv').style.display="none";
}

I want each div to show a different alert text when clicked, but all divs become invisible when any of them is clicked on.

The alerts work, but the style doesn't change as expected when I click on a div. Any ideas why it's not working?

Please assist me with this issue! Thank you!

javascript html css

Answer 1

Answer №1

The distinction arises when utilizing class to select elements with

document.getElementByClassName('mydiv')

, as it returns an array of items. Therefore, you must specify which item in the array by using

document.getElementByClassName('mydiv')[i]

, where i represents the array index. Conversely, document.getElementById('div3') will only retrieve a single element.

document.getElementByClassName('mydiv')[0].style.display="none";

or

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

should do the trick.

Answer 2

The distinction arises when utilizing class to select elements with

document.getElementByClassName('mydiv')

, as it returns an array of items. Therefore, you must specify which item in the array by using

document.getElementByClassName('mydiv')[i]

, where i represents the array index. Conversely, document.getElementById('div3') will only retrieve a single element.

document.getElementByClassName('mydiv')[0].style.display="none";

or

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

should do the trick.

Answer 3

Answer №2

The best way to target HTML elements using Javascript is by utilizing the getElementsByClassName() method.

When you call this method, it will retrieve an array of all elements on the page that have the specified class name. You can then iterate through each element in the array and individually hide them by setting their display property to none.

If we apply this concept to a practical example:

function hideAll() {
  var elements = document.getElementsByClassName('mydiv');
  for (let i = 0; i < elements.length; i++) {
    let element = elements[i];
    element.style.display = 'none';
  }
}

function clickDiv1() {
  alert('You clicked the first div!');
  hideAll();
}

function clickDiv2() {
  alert('You clicked the second div!');
  hideAll();
}

function clickDiv3() {
  alert('You clicked the third div!');
  hideAll();
}

Answer 4

The best way to target HTML elements using Javascript is by utilizing the getElementsByClassName() method.

When you call this method, it will retrieve an array of all elements on the page that have the specified class name. You can then iterate through each element in the array and individually hide them by setting their display property to none.

If we apply this concept to a practical example:

function hideAll() {
  var elements = document.getElementsByClassName('mydiv');
  for (let i = 0; i < elements.length; i++) {
    let element = elements[i];
    element.style.display = 'none';
  }
}

function clickDiv1() {
  alert('You clicked the first div!');
  hideAll();
}

function clickDiv2() {
  alert('You clicked the second div!');
  hideAll();
}

function clickDiv3() {
  alert('You clicked the third div!');
  hideAll();
}

Different ways to manipulate the CSS display property with JavaScript

Answer №1

Answer №2

Similar questions

An effective method to showcase the HTML content retrieved by getElementsByClassName using JSON.parse()

Click the button to access the login form created using React components

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

How can I stop columned-DIVs from wrapping on the webpage?

Modify the appearance of a nested div using CSS hover on the main JSX container

The replaceWith() function in jQuery is able to transform PHP code into an HTML comment

Is there someone who can assist me in transferring data from an Axios JSON response to plot points on a line chart using Chart js?

How do I modify the sidebar width with CSS code?

Tips for showing a map in a concealed location: Embed the code in the appropriate location

Choose an input element from an iframe using jQuery

What is the best way to incorporate the :after pseudo-element in JavaScript code

Maintaining DOM modifications once a link has been clicked and the Back button is pressed

Utilizing props to transfer data between components in ReactJS

An effective method for targeting a specific button within a CSS file

The SQLite database accessed through Flask exclusively returns variables, rather than actual data

Troubleshooting CSS navigation bar hamburger dilemma

Getting YQL financial information using jQuery and showing it using the .html() method

Creating a Flot Bar Chart that displays non-stacking values

w3schools example showcasing the power of AJAX

Managing the height of a TextArea within a Flexbox environment