changing the visible style of a div element using JavaScript

Question

changing the visible style of a div element using JavaScript

I'm having an issue with a link on my webpage that is supposed to show or hide a

<div id="po" style="display:none;">some html</div>

element. The first time I click the link, the div displays properly. However, after that initial click, the link stops working and I can't figure out why. I even tried setting the

<div style="display:block;">

and clicking the link caused the div to hide, but then it wouldn't show again. This behavior is puzzling to me as I have the exact same setup elsewhere on the page and it toggles correctly.

function po() {
  po = document.getElementById('po').style.display;
  
  if (po == "none") {
    document.getElementById('po').style.display = 'block';
    document.getElementById('po_Menu').src = "images/menu_dash.jpg";
  } else {
    document.getElementById('po').style.display = 'none';
    document.getElementById('po_Menu').src = "images/menu_plus.jpg";
  }
}

<img id="po_Menu" src="https://via.placeholder.com/50"> <a href="po()">show/hide</a>

javascript html css

Answer 1

Answer №1

It seems like you are replacing the function in this block of code:

po = document.getElementById('po').style.display;

By setting a new value to po, any future calls to po() will not work because it's no longer a function.

To avoid this, create a new variable instead:

const disp = document.getElementById('po').style.display;

Answer 2

It seems like you are replacing the function in this block of code:

po = document.getElementById('po').style.display;

By setting a new value to po, any future calls to po() will not work because it's no longer a function.

To avoid this, create a new variable instead:

const disp = document.getElementById('po').style.display;

Answer 3

Answer №2

It's important to be mindful of the naming conflicts and overwriting that can occur when using po. Inline styles should be avoided in favor of CSS classes, as they help streamline code writing and eliminate the need for unnecessary elements like the if statement. Hyperlinks should strictly be used for navigation purposes.

Here are some additional pointers:

const po = document.getElementById('po');

// Adding a "click" event handler to anything visible:
document.querySelector("#toggle").addEventListener("click", function() {
  // Using classes allows for more functionality with less code:
  po.classList.toggle("hidden");
});

/* Opt for CSS classes over inline styles whenever you can */
#toggle { text-decoration:underline; color:blue; cursor:pointer; }
.hidden { display:none; }

<img id="po_Menu" src="https://via.placeholder.com/50">

<!-- Avoid using hyperlinks as JavaScript "hooks". They should only be used for navigating. -->
<span id="toggle">show/hide</span>

<!-- Whenever possible, avoid inline styles and use classes instead. -->
<div id="po" class="hidden">some html</div>

Answer 4

It's important to be mindful of the naming conflicts and overwriting that can occur when using po. Inline styles should be avoided in favor of CSS classes, as they help streamline code writing and eliminate the need for unnecessary elements like the if statement. Hyperlinks should strictly be used for navigation purposes.

Here are some additional pointers:

const po = document.getElementById('po');

// Adding a "click" event handler to anything visible:
document.querySelector("#toggle").addEventListener("click", function() {
  // Using classes allows for more functionality with less code:
  po.classList.toggle("hidden");
});

/* Opt for CSS classes over inline styles whenever you can */
#toggle { text-decoration:underline; color:blue; cursor:pointer; }
.hidden { display:none; }

<img id="po_Menu" src="https://via.placeholder.com/50">

<!-- Avoid using hyperlinks as JavaScript "hooks". They should only be used for navigating. -->
<span id="toggle">show/hide</span>

<!-- Whenever possible, avoid inline styles and use classes instead. -->
<div id="po" class="hidden">some html</div>

changing the visible style of a div element using JavaScript

Answer №1

Answer №2

Similar questions

Obscure Promise Structure - Accomplish, Flop, Achieved

Tokenizing with jQuery UI

Creating a dynamic background color that pulses with animation

Is it possible to retrieve the HttpsError status from a Firebase function?

Halt execution of routes using backbone.js

Navigate forward to the next available input in a grid by using the tab key

children blocking clicks on their parents' divs

Unable to sort the list items when utilizing the load() function

Increasing the size of a background image as you scroll

Next.js Error: The text displayed on the page differs from the HTML rendered by the server

Closing the Material UI Drawer

Expanding CSS styles on hover

What could be causing this function to malfunction?

Exploring the integration of query parameters in Postman using mongoose

Issue with Google Chrome not showing stylesheets on Windows 7

Can the html content provided by the user be extracted and highlighted?

Parsing a Table in Python with HTMLParser

The functionality of switching between two layouts using a JavaScript button is currently not functioning

Activate lightbox on click to swap image source temporarily

Loading message displayed in web browsers by banner rotation system