Search code examples
javascriptjqueryhref

set all links on a page using javascript


I've got a website set up that stores user input in a javascript variable, and I would like to set all links on the page (using javascript) to the href contained in each tag, concatenated with the user input.

For example, if the user inputs "aaa" and then clicks a link to the home page, (with href="/home") then I would like the link to take the use to "/homeaaa"

I've tried:

$(document).ready(function () {
$('a[href]').click(function(){
    oldlink = $(this).attr("href");
    newlink = oldlink.concat(window.uservariable);
    document.links.href = newlink;
})
})

and

$(document).ready(function () {
$('a[href]').click(function(){
    oldlink = $(this).attr("href");
    newlink = oldlink.concat(window.uservariable);
    $(this).href = newlink;
})
})

but neither work. Neither change the href link when the user clicks it, to the href concatinated with the uservariable.


Solution

  • The code finds all a tags with attribute href and updates the values

    function myFunction() {
      var x = document.querySelectorAll("a");
    
      x.forEach(function(item){
      	var val = item.getAttribute("href");
        item.setAttribute("href", val + "aaa");
        console.log(item.getAttribute("href"))
            
      });
     
    }
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #myDIV {
      border: 1px solid black;
      margin: 5px;
    }
    </style>
    </head>
    <body>
    
    <div id="myDIV">
     <a href="/okety">Oekye</a>
      <h2 class="example">A heading with class="example" in div</h2>
      <p class="example">A paragraph with class="example" in div.</p> 
      <a href="/home">Oekye</a>
    </div>
    
    <p>Click the button to add a background color to the first element in DIV with class="example" (index 0).</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
    
    
    
    </body>
    </html>

    Or on link click

    function myfunc2 (event,obj) {	
    	event.preventDefault();
    	var val = obj.getAttribute("href")
        obj.setAttribute("href", val + "aaa");
        console.log(obj.getAttribute("href"));
        //window.open("your attribut link")
    }
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #myDIV {
      border: 1px solid black;
      margin: 5px;
    }
    </style>
    </head>
    <body>
    
    <div id="myDIV">
     <a href="/okety" onclick="myfunc2(event,this);">Oekye</a>
      <h2 class="example">A heading with class="example" in div</h2>
      <p class="example">A paragraph with class="example" in div.</p> 
      <a href="/home" onclick="myfunc2(event,this);">Oekye</a>
    </div>
    
    <p>Click the button to add a background color to the first element in DIV with class="example" (index 0).</p>
    
    
    
    <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
    
    </body>
    </html>