Problems when calling a javascript function

Question

I have a page where I want certain changes to be made when I call a js function from another .html page More exactly, when I press the button on page 2, I want the image on page 1 to be visible. How can I do this?

img_visibility_cod.js

function showImage(n){
        if(n==1)
        document.getElementById('im1').style.visibility="visible";
        else
        if(n==2)
        document.getElementById('im2').style.visibility="visible";
    }

page2.html

<script type="text/javascript" src="img_visibility_cod.js"></script>
<input class="buton-verif" type="button" value="Finish" onclick="showImage(1)" />

page1.html

<script type="text/javascript" src="img_visibility_cod.js"></script>
<li class="lst"><img id="im1" src="imagini/verif.png"></li>
<li class="lst"><img id="im2" src="imagini/verif.png"></li>

Answer 1

The Html5 Web APIs comprise two APIs to communicate between windows, tabbers and iframes ( 'content containers' at loss of a better term ):

• Broadcast Channel API: Named communication channel; send at will, all content containers can listen in.
• Message Channel API: Dedicated communication channel between 2 endpoints.

The Message Channel API suits best. However, to set up the channel programmatically, the JS running in one of the content containers must know the name of the other. This is feasible for iframes within a tabber but does not work between tabbers.

Thus we have to resort to the Broadcast Channel API. A broadcast channel is identified by its name. Distributing that name to pages rendering in different windows allows them to communicate. The simplest way of doing so is to hardcode a name in a JS script imported by both html pages. The broadcast channel can then be used by an event handler in page 2 ( eg. a click handler on a button ) to transmit the command to page 1 to act in a particular way ( eg. reveal hidden images ).

Browser support:

• Broadcast Channel API: No support for IE and Safari (see here for details).
• Message Channel API: All significant user agent families (see here for details).

Applying the idea to your example

The following code snippets are untested. They are adapted from a functional setup to match the example you've provided. See the 'Demo' section for links to the operational version.

page2.html ( sender )

<script type="text/javascript">
    let broadcastChannel    = new BroadcastChannel('commands') // Channel to communicate with a partner whom we cannot reference directly.
      ;

    function ehxReceiveMessage (eve) {
        console.log ( `Have received a message: ${eve.data}.` );
    } // ehxReceiveMessage 

    function ehxSendMessage_showImage (eve) {
        let s_specTarget = this.getAttribute('data-target-image')
          ;

        broadcastChannel.postMessage(`show_image:${s_specTarget}.`);
    } // ehxSendMessage_showImage


    function ready () {
        let e_btn = document.querySelector ( "#showImage1" )
          ;

        // Click handler: Send request to show images to second window
        e_btn.addEventListener ( 'click', ehxSendMessage_showImage );
    } // ready


    // Setup handler for communication channel.
    broadcastChannel.addEventListener ( 'message', ehxReceiveMessage );

    // Initializations contingent on DOM nodes when DOM has been built (but not before). 
    window.addEventListener ( 'DOMContentLoaded', ready );
</script>

<!-- ... -->
<input id="showImage1" class="buton-verif" data-target-image="1" type="button" value="Finish"/>

page1.html ( receiver )

<script type="text/javascript" src="img_visibility_cod.js"></script>
<script type="text/javascript">
    let broadcastChannel    = new BroadcastChannel('commands') // Channel to communicate with a partner whom we cannot reference directly.
      ;

    // Implements a trivial command processor.
    // Supports the 'show_image' command.
    function ehxReceiveMessage (eve) {
        let as_message = eve.data.split(/:/)
          , [s_flavor, s_content] = as_message
          ;

        switch (s_flavor) {
            case 'show_image':
                showImage(parseInt(s_content));
                break;

            default:
                console.log ( `Unknown message flavor '${s_flavor}'. Ignored.` );
        } 
    }  // ehxReceiveMessage

    broadcastChannel.addEventListener('message', ehxReceiveMessage);
</script>

<!-- ... -->
<li class="lst"><img id="im1" src="imagini/verif.png"></li>
<li class="lst"><img id="im2" src="imagini/verif.png"></li> 

Demo

An online demo in the vein of your example is available. Load these 2 pages, Sender and Receiver, check the Receiver for absence of images, click on the button in the Sender tab/window, and see the images appear.

Answer 2

Data between pages doesn't persist in JavaScript, it'll load all over again when you switch pages.

What you can do however is use the localstorage api, it's very simple to use:

localstorage.setItem("imageID", 1)

and

let n = localstorage.getItem("imageID")

so in showImage instead of passing in n as a parameter, you can define it as above.

another thing is, showImage needs to run when you visit page 1, in page two there wont be any images on the page, so your code won't see them.

you'll need another function for page 2 that does the first snippet

EDIT: Code examples:

// this is img_visibility_cod.js

function showImage() {
  // get n's value from the browser's storage
  let n = localstorage.getItem('imageId');
  
  // first time we run, n is not set, so we get undefined and have to set it to something
  if (n == undefined) 
    n = 1
  
  // local storage only saves things as string, have to turn it back into a number
  n = Number(n)
  if (n == 1)
    document.getElementById('im1').style.visibility = "visible";
  else
  if (n == 2)
    document.getElementById('im2').style.visibility = "visible";
}
// to run the function every time page 1 loads you need to invoke the function, alternative have no function at all and just write code directly
showImage()


function switchImage() {
  let n = localstorage.getItem('imageId');
  n = Number(n)
  if (n == 1)
    localstorage.setItem('imageId', 2)
  else 
    localstorage.setItem('imageId', 1)

}

<!-- page 1 -->

<script type="text/javascript" src="img_visibility_cod.js"></script>
<li class="lst"><img id="im1" src="imagini/verif.png"></li>
<li class="lst"><img id="im2" src="imagini/verif.png"></li>

<!-- page 2 (the other file) -->

<script type="text/javascript" src="img_visibility_cod.js"></script>
<input class="buton-verif" type="button" value="Finish" onclick="showImage(1)" />