Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why if there are are two 'popupWindow = window.open' scripts does the second script's argument control both?

I have two scripts for popup windows. In all cases the arguments for the second script is controlling both. How do I fix this?

    <script>
    function firstPopup(url) { 
    popupWindow = Window.open(url,'popUpWindow','height=300,width=300,left=200,top=200,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
    </script>
    <a href="JavaScript:newPopup('bitcoin.cfm')" style="color:black">Here.<a href="JavaScript:newPopup('contactpri.cfm')" style="color:black"></a></script>
 <a href="JavaScript:newPopup('bitcoin.cfm')" style="color:black">Here.<a href="JavaScript:newPopup('contactpri.cfm')" style="color:black"></a>

`
Text and other stuff here.

    <script>
    function newPopup(url) {
    popupWindow = window.open(url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')}
    </script>
    <B>If you want to Contact US <a href="JavaScript:newPopup('contact.cfm')" style="color:#062689;">click here.</a></B>`

Both scripts do work. It is just that the second height and width are overwriting the first argument.

What do I need to change to make them used their own arguments? I have no idea have to differentiate the scripts to make this work

Tags:

2

Answers


  1. 0

    Spelling mistake in the Window.open? And using the same name popUpWindow will have the second script act on the same window

    I suggest you use delegation and an event listener on the closest static container of the links

    let popupWindows = {}; // window scope

const handlePopup = (e) => {
  const tgt = e.target.closest('a');
  if (!tgt.matches('.popup')) return; // not a popup link
  let url = tgt.href;
  let target = tgt.target || '_blank';
  let popup = window.open(url, target, 'height=300,width=300,left=200,top=200,resizable,status');
  if (popup) {
    popupWindows[target] = popup; // now we can access the window by its target
    e.preventDefault();
  } else return true; // let the link open its own tab since user does not allow it.
};

document.addEventListener('click', handlePopup );

    <a href="bitcoin.cfm" class="popup" target="btc" style="color:black">bitcoin</a>

<a href="contactpri.cfm" class="popup" target="contact" style="color:black">Contact Primary</a>

<b>If you want to Contact us <a href="contact.cfm" class="popup" target="contact" style="color:#062689;">click here.</a></b>
    Login or Signup to reply.
  2. 0

    From your question it is pretty clear that you have a global variable called popupWindow which you set when those functions are being called. Since you use a single variable for both windows, when you assign it to a window, its previous reference will be forgotten, as a variable may have a single value at a time.

    So, to fix your issue, make sure that you return the opened windows, like:

    function firstPopup(url) { 
    return window.open(url,'popUpWindow','height=300,width=300,left=200,top=200,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}

    and

    function newPopup(url) {
    return window.open(url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}

    and then you can have an object for your popups:

    let myPopups = {
    firstPopup: firstPopup('someurl1'),
    newPopup: firstPopup('someurl2'),
};

    if you want to open them together. If you do not want to open them together, then you may initialize your object with undefined for both fields and override that value when you open a popup.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search