How to pass value of href to javascript and use it in window.location when a hyperlink is clicked?

Question

I have two types of hyperlinks .When the first one is clicked the value of href is passed to function but its value never used in window.location!(Because it opens the link in safari instead of iphone webApp ).When the second hyperlink is called the value of href never get passed to function and again the href value is opened in safari instead of webApp!Could any one help me pass value of href to function and use it in window.location instead of opening it on safari.Thanks in advance.

<li class="x"><a id="1" title="1" href="./test.php?try" onclick="myFunction(location.href=this.href);"> <img id="Button1" src="./1.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">FIRST</div></a></li>
<li class="x"><a id="2" title="2" href="./test.php" onclick="myFunction(location.href=this.href+'?try&appid='+currentID;return false;);"> <img id="Button2" src="./2.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">SECOND</div></a></li>


<script>
function myFunction(myLink) {

alert("hello"+myLink);

    window.location = myLink;
}
</script>

Answer 1

There are several things at play here. As fiprojects points out, it's best not to do inline JavaScript (some of the reasons are just personal preference). You'll end up repeating yourself and making it hard to maintain your code ( among other reasons ). Your best bet is to use Event Listeners (w3schools link, not always the best resource, but is sufficient for this example). These are extremely simple if you're using a JavaScript library (jQuery). But being that you requested a JavaScript solution, I'll outline how to do that in my answer.

First, let's format your code to make it easier to read:

<li class="x">
    <a id="1" title="1" href="./test.php?try" class="myLink">
        <img id="Button1" src="http://placehold.it/360x240">
        <div class="caption" style="color:red">FIRST</div>
    </a>
</li>
<li class="x">
    <a id="2" title="2" href="./test.php" class="myLink"> 
        <img id="Button2" src="http://placehold.it/360x240">
        <div class="caption" style="color:red">SECOND</div>
    </a>
</li>

I've only made a couple changes here. I removed the JavaScript onclick . I created a placeholder image (just for my own purposes, as I don't have your images, you'll want to put your images back in there). And lastly, I added a class="myLink" to your <a> . This will allow us to reference your links with our event listener a bit more easily.

For the JavaScript

<script>
    var linksArray = document.getElementsByClassName("myLink");

    var myFunction = function(event) {
        event.preventDefault();
        var href = this.getAttribute("href");
        alert('hello ' + href);
        window.location = link;
        return false;
    };

    for (var i = 0; i < linksArray.length; i++) {
        linksArray[i].addEventListener('click', myFunction, false);
    }
</script>

The first line is creating an array with any elements that have class="myLink" . We will loop through this array later, and add the event listener. Before we loop through, we need to create your function.

In order to prevent the default action that occurs when a user clicks the link, we need to stop propagation. So we'll use event.preventDefault() here. I have also added return false; to the function. Both are intended to do the same thing.

Instead of passing a variable, we'll use this to obtain the reference. We'll also use the JavaScript function getAttribute and pass href to it. This will pull the href value for you.

lastly, we are looping through our linksArray . We're adding a click event listener and assigning myFunction as a callback . Now, any time that a user clicks on one of the images, this function will fire off.

And here's a working example on JSFiddle .

Answer 2

You are trying to run before you can walk...

Your javascript needs alot more work. Avoid putting javascript inside html. Thus avoid things like:

onclick="myFunction(location.href=this.href);"

I would use jquery (javascript library) as it would help in the long run as it would lead you to be cross browser compatible.

Your "id" tags should be alphabetic or alphanumeric, not numeric. So id="1" is (I believe) illegal even if it works.

Actually... Sorry.... but the more i think about it, you really need a good book to advance your javascript before attempting what you want to do otherwise you'll fail to understand limitations or risks to some of your work.

Using jquery (which itself is written in javascript) you could change the URL via

$("#link1").click( Change1 );
$("#link2").click( Change2 );

function Change1()
{
 $("#link1").href("./test.php?try");
}

function Change1()
{
 $("#link2").href("./test.php?try");
}

The above would work if your id tags were renamed from id="1" to id="link1" and id="2" to id="link2"

Sorry I not help more than that...