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

You cannot have <li> directly as a child of <a> and also you cannot put <li> or any other block elements inside <a>. It's like putting a bottle inside water, as a container. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 2, 2016 at 6:43
You can do this <li><a></a></li> but not <a><li></li></a>. Check this — StackUseR
– StackUseR, Commented Dec 2, 2016 at 6:49
Are you going to have multiple links like this, with an anchor and a corresponding JS function? — Shaggy
– Shaggy, Commented Dec 2, 2016 at 7:12

hakany · Accepted Answer · 2016-12-02 06:48:46Z

5

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>

answered Dec 2, 2016 at 6:48

hakany

7,2742 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bart Jellema · Accepted Answer · 2016-12-02 07:18:57Z

1

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.

answered Dec 2, 2016 at 7:18

Bart Jellema

111 bronze badge

Comments

alifallahi · Accepted Answer · 2016-12-02 06:52:57Z

0

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>

answered Dec 2, 2016 at 6:52

alifallahi

2951 silver badge9 bronze badges

Comments

Tim McIntire · Accepted Answer · 2016-12-02 06:53:37Z

0

A small example

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

answered Dec 2, 2016 at 6:53

Tim McIntire

835 bronze badges

2 Comments

Bamuel Over a year ago

doesnt work also why have you done === shouldn't it be ==

Bamuel Over a year ago

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

Is the correct way

user6690322 · Accepted Answer · 2016-12-02 06:58:14Z

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 2, 2016 at 6:58

user6690322

5 Comments

Bamuel Over a year ago

but I dont want my website to have multiple pages.

user6690322 Over a year ago

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

user6690322 Over a year ago

Try that one. Then let me know whats going on

Bamuel Over a year ago

The Same thing as i quoted. runs the function and make the url contain #Projects

user6690322 Over a year ago

No sir. Its not the same. Try to check your HTML structure. You must also consider the structure when developing.

Collectives™ on Stack Overflow

Running Javascript via href

5 Answers 5

Comments

Comments

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related