Running Javascript via href

Question

<ul>
    <a href="#Project">
        <li onclick="project()">Projects</li>
    </a>
</ul>

a tab appears and you can click on it, which runs a javascript function and also changes the url to www.demo.com#Project.

Is it possible when i give someone the link like www.demo.com#Project it loads the page and automatically runs function project()

EDIT SOLUTION

if(window.location.hash == "#Project") {
        setTimeout('project();', 1);
} 
else {
}

a timeout must be set so it loads the page first then execute function

@PraveenKumar I fixed up the example code – Bamuel Dec 02 '16 at 06:44 — Bamuel, Dec 02 '16 at 06:44
Still the same. Read my comment correctly. – Praveen Kumar Purushothaman Dec 02 '16 at 06:45 — Praveen Kumar Purushothaman, Dec 02 '16 at 06:45

score 5 · Accepted Answer · answered Dec 02 '16 at 06:48

No, script won't run if your give someone the URL. To achive this you should check whether window.location.hash equals '#Project' on page load.

Hope this helps

Btw. what Praveen Kumar mentioned is changing your code as follow:

<ul>
    <li onclick="project()">
        <a href="#Project">Projects</a>
    </li>
</ul>

score 1 · Answer 2 · answered Dec 02 '16 at 07:18

I assume you want this to work on several different anchors, so you could do something like this:

<ul>
    <li onclick="project()">
        <a href="#Project">Projects</a>
    </li>
</ul>

<script>
    function project() {
        alert('Function project called')
    };

    var elements = document.querySelectorAll("a[href='" + window.location.hash + "']")
    if (elements.length > 0)
    {
        elements[0].click();
    };
</script>

This code will make sure any hash anchor gets clicked when you navigate to the url with that hash.

score 0 · Answer 3 · answered Dec 02 '16 at 06:52

the link will be for example "www.test.com#myproject" 
and "function project" will be run automatically

 <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
    <script>
    function project()
    {
      alert("hello");
    }    
    </script>
    </head>
    <body>
    <div id="myproject">
        <img src="test.jpg" onload="project()">
      <a>  sample text</a>
        <p>123456789</p>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ul>
    </div>
    </body>
    </html>

score 0 · Answer 4 · answered Dec 02 '16 at 06:53

0

A small example

If (window.location.hash === '#Project')  {
  project() ;
}

answered Dec 02 '16 at 06:53

Tim McIntire

73
5

doesnt work also why have you done `===` shouldn't it be `==` – Bamuel Dec 02 '16 at 07:02
`if(window.location.hash == "#Project") { setTimeout('project();', 1); } else { // No hash }` Is the correct way – Bamuel Dec 02 '16 at 07:20

score 0 · Answer 5 · answered Dec 02 '16 at 06:58

0

Yes it is possible. You dont have to do <a href="#Project"> <li onclick="project()">Projects</li> </a> because it is a painful code. Try to do this:

  `<ul>
      <li>
          <a href="#" onclick="project()">Projects</a>
      </li>
  </ul>`

It basically run the function called project() when you click the Projects. Base on your code your just navigating an element that has an id of Project.

You can also use

<ul>
      <li>
          <a href="www.demo.com/projects.html">Projects</a>
      </li>
  </ul>

Then in projects.html run your script:

<script>

function project(){
  alert("I am your function.");
}

project(); //Call the function

</script>

answered Dec 02 '16 at 06:58

but I dont want my website to have multiple pages. – Bamuel Dec 02 '16 at 06:59
`
- Projects
`
– Dec 02 '16 at 07:01
Try that one. Then let me know whats going on – Dec 02 '16 at 07:02
The Same thing as i quoted. runs the function and make the url contain #Projects – Bamuel Dec 02 '16 at 07:05
No sir. Its not the same. Try to check your **HTML** structure. You must also consider the structure when developing. – Dec 02 '16 at 07:07

Running Javascript via href

5 Answers5