How to display/hide a div in another html page

Question

I have two html pages (produse.html and item.html) and a menu in one of them. When I click a link from the menu I need to go to the other page and in the same time display a specific div and hide the original one from item.html.

I tried it with javascript using onclick method, but it doesn't work. I think the problem is that the javascript code can't get the class name of a div that is in another page.

Can there be something done?

This is the code that I tried.

produse.html

    <div class="sideMenu">
        <a href="item.html" onclick="displayTheBox(0); return false;">prod 1</a>
        <a href="item.html" onclick="displayTheBox(1); return false;">prod 2</a>
        <a href="item.html" onclick="displayTheBox(2); return false;">prod 3</a>
        <a href="item.html" onclick="displayTheBox(3); return false;">prod 4</a>
    </div>

item.html

    <div class="displayBox yes">
        1
    </div>

    <div class="displayBox">
        2
    </div>

    <div class="displayBox">
        3
    </div>

    <div class="displayBox">
        4
    </div>

javascript

var prevN = 0;

function displayTheBox(n){
    var products = document.getElementsByClassName("displayBox");

    products[prevN].className = products[prevN].className.replace(" yes", "");
    products[n].className += " yes";

    prevN = n;
}

css

.displayBox{
    float: left;
    height: 200px;
    overflow: auto;
    position: relative;
    box-shadow: 1px 1px 4px 2px #9b9b9b;
    background-color: #bbe5f8;
    border-radius: 6px;
    width: 995px;
    margin: 0 0 0 235px;
    display: none;
}
.yes{
    display: block;
}

Answer 1

JS is a client-side script and it's variables are reset on page load. You can either pass the values by passing as GET parameters or by saving and retriving persistent data using localStorage or cookies.

Here is a simple js function to get GET variables and process function.

function findGetParameter(parameterName) { // Gets the GET variables
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

if(findGetParameter("item")) { // Check if parameter matches
   displayTheBox(findGetParameter("item"));
}
var prevN = 0;

function displayTheBox(n) {
    var products = document.getElementsByClassName("displayBox");

    products[prevN].className = products[prevN].className.replace(" yes", "");
    products[n].className += " yes";

    prevN = n;
}

Change your hyperlinks to

<div class="sideMenu">
    <a href="item.html?item=0">prod 1</a>
    <a href="item.html?item=1">prod 2</a>
    <a href="item.html?item=2">prod 3</a>
    <a href="item.html?item=3">prod 4<a>
</div>

For more info on storage methods, check this SO question What is the difference between localStorage, sessionStorage, session and cookies?

For a good example on js session storage, check this answer to a SO question here https://stackoverflow.com/a/49805713/6060602

Answer 2

Actually, when you're making a function call in a page, it can't be reflected in another one. You've to use backend for that job. But as per your problem is concerned, you may use a language like PHP for doing this job. Otherwise, you can make a function call at the beginning when the new page is opened. like, window.onload() or jQuery may also be helpful in this case,

$(document).ready(function() { /* code here */ });

Answer 3

That is impossible through normal click events like that.

Two pages will need to interact and since requests are stateless, everything that belongs to one page only really lives in there and nowhere else.

So to perform that, you will need to pass the communication through the request object.

Options:

First - Either create a form line this:

<form action="targetPage" method="get">
    <input type="hidden" value="hideSomething" />
    <button></button>
</div>

Then inside your TargetPage, retrience the query string from the URL, FInd out more about this here

Second - Either you're not sure if that is the right approach you want to take. Look closer into what you're trying to achieve and see if it's really necessary. I am not sure why you're trying to put those buttons( sideMenu ) on their own page seperate from where the boxes you're trying to control are.