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 http://stackoverflow.com/questions/4365246/how-to-change-href-of-a-tag-on-button-click-through-javascript — Jagadesha NH, Oct 19 '16 at 07: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, Oct 19 '16 at 07:26

score 1 · Accepted Answer · answered Oct 19 '16 at 07:34

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>

How to change the link dynamically via javascript?

1 Answers1