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

How can I retrieve the URL of the previous page from the history object in all browsers?

Is AJAX malfunctioning while the success function is functioning properly?

Avoiding layout shift when a button is clicked in React JS

What's the connection between CSS and frameset?

"Exploring the process of implementing a fixed method POST in Angular 5

The code functions properly within the emulator, however, it fails to execute on an actual device

Issue with Jade not displaying external JSON data

Integrating XML API Requests Using HTML and JavaScript

What is the most effective way to transfer information from one page to another in a PhoneGap application?

Troubleshooting directive not functioning properly with AngularJS ng-click

Guide to filling out select dropdowns in HTML with information from a database

The callback function in JavaScript seems to be missing without ever being executed

The issue with Node.js router failing to process delete requests

Unable to save data retrieved using jQuery JSONP

What is the process for enabling SASS line numbers using Yeoman's Grunt.js file?

Dealing with errors when working with cross-domain JSONP requests in jQuery can be a

Do I need to use the "--save" flag in npm to add dependencies to the "package.json" file?

Experiencing difficulty in connecting with the service providers

Express server controller encountering premature return from locally executed async function

Navigate to a different page using an AJAX request