How to change the link dynamically via javascript?

Question

Below I have written a simplified context menu for the purposes of this question. The context menu works by determining the location of the mouse, then making that the left and top of the menu. Herein lies the question, since it's one context menu for multiple right-clickable objects, how do I make the links in the context menu dynamic. They should change based on whether link 1, 2 or 3 has been clicked.

HTML

<body oncontextmenu="return false">
<div class="menuActive">
    <div>
        <a href="1" oncontextmenu="ShowMenu('contextMenu',event);">1. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="2" oncontextmenu="ShowMenu('contextMenu',event);">2. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="3" oncontextmenu="ShowMenu('contextMenu',event);">3. This is an item to be right clicked</a>
    </div>
    <div style="display:none;" id="contextMenu">
        <a href="/task/4">Task 1: This link should be a dynamic based on click</a>
        <a href="/task/5">Task 2: This link should be a dynamic based on click</a>
    </div>
</div>

JavaScript

function ShowMenu(control, e) {
      var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
      var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
      document.getElementById(control).style.position = 'absolute';
      document.getElementById(control).style.display = 'inline';
      document.getElementById(control).style.left = posx;
      document.getElementById(control).style.top = posy;           
}

CSS

a {
    display: block;
    height: 20px;
    background-color: #fff;
    padding: 10px;
  }

As an example, How would I (using plain javascript) make both links 'task/4/' and '/task/5/' read 'task/4/3/' and '/task/5/3'' when link 3 is clicked on?

PS: Link 1, 2 and 3 are dynamic, and therefore, /task/4 and /task/5 should be too.

Any and all help will be appreciated

please refer to this question stackoverflow.com/questions/4365246/… — Jagadesha NH
– Jagadesha NH, Commented Oct 19, 2016 at 7:15
You could pass the href of the links 1,2,3 as an id in your function: function ShowMenu(control, e, id){... like ShowMenu('contextMenu',event,'1'); and append the id to the links in the contextMenu div. — moni_dragu
– moni_dragu, Commented Oct 19, 2016 at 7:26

Weedoze · Accepted Answer · 2016-10-19 07:34:18Z

function ShowMenu(control, e) {
      var newRef = e.toElement.href.slice(-1);
      var items = document.getElementById("contextMenu").children;
      for(var i=0; i<items.length;i++){
         if(items[i].tagName == "A"){
           items[i].href = "/task/" + newRef;
         }
      }
       
      console.log(items);    
  
      var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
      var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
      document.getElementById(control).style.position = 'absolute';
      document.getElementById(control).style.display = 'inline';
      document.getElementById(control).style.left = posx;
      document.getElementById(control).style.top = posy;           
}

a {
    display: block;
    height: 20px;
    background-color: #fff;
    padding: 10px;
  }

<body oncontextmenu="return false">
<div class="menuActive">
    <div>
        <a href="1" oncontextmenu="ShowMenu('contextMenu',event);">1. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="2" oncontextmenu="ShowMenu('contextMenu',event);">2. This is an item to be right clicked</a>
    </div>
    <div>
        <a href="3" oncontextmenu="ShowMenu('contextMenu',event);">3. This is an item to be right clicked</a>
    </div>
    <div style="display:none;" id="contextMenu">
        <a href="/task/4">Task 1: This link should be a dynamic based on click</a>
        <a href="/task/5">Task 2: This link should be a dynamic based on click</a>
    </div>
</div>

Collectives™ on Stack Overflow

How to change the link dynamically via javascript?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related