Member Avatar for VenusCrystal

Hi

I am going to new page from current page on click of a button using function :

function gotonextpage()
{
window.location.href = "newurl";
}

I also want to call another function on load of new page to set its paragraphs. I am hiding or showing paragraphs based on a dropdown value selected in first page.

I dont want to do <body onload="func()"> in my second page. Is there any other alternative to this? Also, I have all my js code in separate file.

Thanks,
VC

  • 2 Contributors
  • 4 Replies
  • 269 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by VenusCrystal

Dani AI

Generated

Short version: you can’t reliably attach a load handler from the old page after telling the browser to navigate — the original page is torn down as navigation starts. That’s why ’s in-place onload assignment didn’t work for . The right approach is to (A) pass whatever state the new page needs, and (B) let the new page initialize itself from that state (no inline body onload required).

A simple, robust pattern (works with external .js files):

  • Before navigating, save the dropdown choice (or other state) where the new page can read it.
  • Redirect to the new page.
  • In the new page’s external script, run an init routine on DOMContentLoaded (or load) that reads the saved state and shows/hides paragraphs.

Example (store + navigate):

function goNext(selectedValue) {
  sessionStorage.setItem('showSection', selectedValue);
  location.assign('newpage.html'); // keeps browser history; use replace(...) if you don't want a history entry
}

Example (new page, in external JS loaded with defer or at the end of body):

document.addEventListener('DOMContentLoaded', function () {
  var key = sessionStorage.getItem('showSection');
  if (!key) return;
  // show/hide paragraphs according to 'key'
  // e.g. document.querySelectorAll('p').forEach(...)
  sessionStorage.removeItem('showSection'); // cleanup
});

Alternatives and tips:

  • Query string or URL hash: add ?show=foo or #show=foo and parse location.search/location.hash on the new page. Good if you want the state visible/bookmarkable.
  • localStorage vs sessionStorage: sessionStorage is per-tab and auto-cleared when tab closes; localStorage persists.
  • Use defer on your external script (<script src="app.js" defer></script>) or place it just before </body> so you don't need inline onload.
  • Debugging: check the console on the new page, confirm the script file loads, and inspect storage/query-string values in DevTools.

This keeps your JS modular (external file), avoids inline body onload, and ensures the new page runs its own initialization reliably.

Recommended Answers

All 4 Replies

Member Avatar for Helianthus

Have you tried embedding the onload function in the gotonextpage() function?

Edited by Helianthus
Member Avatar for VenusCrystal

How do you do that?

Member Avatar for Helianthus

Try this

function gotonextpage()
{
    window.location.href = "newurl";

    window.onload = function()
    {
       paragraph code setting here
    }
}
Edited by Helianthus
Member Avatar for VenusCrystal

I tried it. Its not working.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.