html link, href assignment from a Javascript function - javascript

I have a simple Javascript function which builds a Url that I want to provide a link to.
However, I can't seem to get the anchor tag working with it. How do I assign the href of the anchor tag the results of the Javascript function?
Neither one of these work correctly:
Click here
Click here
This is what I want to accomplish.

<script type="text/javascript">
function getUrl()
{
return "http://www.google.com";
}
</script>
Click here
-- update --
If I wanted to incorporate user278064s' comments, i would change the above into:
<script type="text/javascript">
function getUrl()
{
return "http://www.google.com";
}
</script>
Click here

None of the above solutions worked for me. A good way would be to create a new link in the function.
function fetchURL() {
var title = "Download";
var URL = title.link("https://www.google.com");
document.getElementById("dynamicButton").innerHTML = URL;
}
<body onload="fetchURL()">
<div id="dynamicButton">
//empty
</div>

<a onclick="getUrl();" href="#">Click here</a>
Click Here

Give the link an id:
<a id="specialLink">Click Here</a>
Later on, set its href from JavaScript:
document.getElementById('specialLink').href = getUrl();
(You might want to include a placeholder href in the link which people with JavaScript disabled will see.)

function getUrl(that) {
return "www.whateveryouwant.com";
}
// Point the a.href attribute at your url.
var a = document.getElementsByTagName('a')[0];
a.href = getUrl();
UPDATE
I assume that you want to use the getUrl() method to set the href attribute, because probably the pointed url is not static (so it could change at any moment e point to the getUrl() returned url.)
Anyway, you could assign the href attribute, when i.e. the user click on the link, in this way.
function changeHref(aElem) {
aElem.href = getUrl();
}
Following the complete code:
click me!
<script>
function getUrl(that) {
return "www.whateveryouwant.com";
}
function changeHref(aElem) {
aElem.href = getUrl();
}
</script>
One other thing. You should avoid the use of javascript: pseudo-protocol.
This fragment will explain you why:
A pseudo-protocol is a nonstandard take on this idea.
The javascript: pseudo-protocol is supposed to be used to invoke JavaScript from within a link.
Here’s how the javascript: pseudo-protocol would be used to call the popUp function:
Example
This will work just fine in browsers that understand the javascript: pseudo-protocol. Older browsers, however, will attempt to follow the link and fail. Even in browsers that understand the pseudoprotocol,
the link becomes useless if JavaScript has been disabled.
In short, using the javascript: pseudo-protocol is usually a very bad way of referencing JavaScript
from within your markup.
DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition

The following worked for me
<script type="text/javascript">
$(function() {
document.getElementById("aTag").href = getUrl();
});
</script>
<a id="aTag">Click Here</a>

Related

Changing the value of enqueued Javascript

I am trying to change the value of a value of a variable, which is located within the the enqueued javascript file.
Here is my code:
- Enqueued Javascript:
jQuery(document).ready(function() {
jQuery("#adminSearch").click(function() {
var adminURL = "";
window.location = adminURL;
});
});
- Javascript on the Wordpress page:
<script>
jQuery(document).ready(function() {
var adminURL = "test.org/shop";
});
</script>
The reason I am trying to do this, is I am trying to create a function, where I can replace the url with a value assigned by the variable "adminURL" and change it's value on different Wordpress pages.
This would help make the code modular and I can use it throughout the website.
Any suggestions would be a major help!
Thanks :)
Don't quite understand why you need to do this, I think refactoring might be better but you could try using data attributes.
jQuery("#adminSearch").click(function(e) {
e.preventDefault();
var adminURL = $(this).data('adminurl');
window.location = adminURL;
)};
So you'd get the url from a data attribute on the clicked link itself instead of an attribute.
<a href="#" id="adminSearch" data-adminurl="http://test.org/shop">
This code has not been tested.

Multiple function call in one href tag

I'm developing one Flipbook by using html, css, js. Also, i have included video files with the Book. The problem with the book is, When i load the book for the first time, video file is working, after flipping Video is not working. I found what the problem is. It needs to be refreshed when each page turns.
The following is the code which i'm using to call the video file.
<a class="voverlay" id="sk" href="index_videolb/vdbplayer.swf?volume=100&url=video/change1.mp4" onclick="javascript:myfunc();"><img src="index_videolb/thumbnails/change1.png"/></a>
<script>
function myfunc()
{
location.reload(true);
}
</script>
The problem with the code is, It only access the Onclick function, not href.
Is there anyother way to access both href and onclick?
If you have both href and onclick, href would override any onclick behaviour. To avoid that you can do,
<script>
function myfunc(event)
{
event.preventDefault();
location.reload(true);
}
</script>
Try this
function myfunc() {
window.location = "index_videolb/vdbplayer.swf?volume=100&url=video/change1.mp4";
}

The onclick function not work in safari

Please help me on this how can i use hash function to go to another tab or id without location.reload();.
it should be needed to go to the download tab or id without needing to refresh the page.
here is my code
<script>
function Download() {
window.location.hash = "#Download";
location.reload();
}
</script>
Do you actually need to use JavaScript for this? What about just using #href attributes to go to another <a> link on the page?
Something like this:
<a id='first' href='#second'>Go to Second Link.</a>
<a id='second' href='#first'>Return to First Link.</a>
See this fiddle for example: https://jsfiddle.net/3axqpr1x/1/
you can try this one;
<script>
function Download() {
window.location.hash = "#Download";
location.reload();
}
</script>
Please refer this page Javascript reload the page with hash value

how to add a css class in javascript to be used onload

I am trying to load a popup lightbox window when the page is initially opened. I can get it to work on a click but I cannot get the code right to add a class in the script. I am using 'Lightbox' from within HTML Kickstart.
The link that works looks like this: <a class="lightbox" href="#bbc">BBC</a> This works perfectly. Basically how do I get that to work automatically on page load.
My attempt at the script:
<script type="text/javascript">
function load() {
var target = location.href = "#bbc";
target.className = "lightbox";
}
</script>
So I assume you want to add a class to that anchor tag:
$(function () {
$("a[href=#bbc]").addClass("lightbox");
});
Using $(function() {…}) is the same as using the ready() function (in JQuery). I would recommend running the code after the DOM is ready rather the "on load".
you need to call the load() function on the onLoad event of <body> tag.
<body onLoad="load()">
The way I read this question — ignoring the title — is that the user is trying to trigger the lightbox on load. Whilst this may be a wrong assumption, the way to trigger a link using javascript is to use the .click() method:
window.onload = function(){
var i, list = document.getElementsByTagName('a');
for ( i=0; i<list.length; i++ ) {
/// this will only work for links with only a class name of lightbox.
/// you could look into using getElementsByClassName or something similar.
/// I use getElementsByTagName because I know how supported it is.
if ( list[i].className == 'lightbox' ) {
list[i].click();
}
}
};
The above code would support multiple lightbox links in a page, which might not be desired, so it may be best just to add an id to the link you wish to target and then use:
window.onload = function(){
document.getElementById('clickonload').click();
};
<a id="clickonload" class="lightbox" href="#bbc">BBC</a>
You may find however, that in reading the documentation for whatever lightbox plugin you are using, that there is a command you can use from JavaScript, rather than clicking a target link.
$(window).load(function () {
var target = location.href = "#bbc";
target.className = "lightbox";
});

windows.location.href not working on Firefox3

We have a JavaScript function named "move" which does just "windows.location.href = any given anchor".
This function works on IE, Opera and Safari, but somehow is ignored in Firefox. Researching on Google doesn't produce a satisfactory answer why it doesn't work.
Does any JavaScript guru knows about this behavior, and what would be the best practice to jump to an anchor via JavaScript?
Have you tried just using
window.location = 'url';
In some browsers, window.location.href is a read-only property and is not the best way to set the location (even though technically it should allow you to). If you use the location property on its own, that should redirect for you in all browsers.
Mozilla's documentation has a pretty detailed explanation of how to use the window.location object.
https://developer.mozilla.org/en/DOM/window.location
If you are trying to call this javascript code after an event that is followed by a callback then you must add another line to your function:
function JSNavSomewhere()
{
window.location.href = myUrl;
return false;
}
in your markup for the page, the control that calls this function on click must return this function's value
<asp:button ........ onclick="return JSNavSomewhere();" />
The false return value will cancel the callback and the redirection will now work. Why this works in IE? Well I guess they were thinking differently on the issue when they prioritized the redirection over the callback.
Hope this helps!
One observation to ensure in such a scenario
Following will work in IE, but neither in Chrome nor in Firefox (the versions I tested)
window.location.href("http://stackoverflow.com");
Following will work all the three
window.location.href = "http://stackoverflow.com";
Maybe it's just a typo in your post and not in your code, but it's window and not windows
I am not sure to follow you.
I just tried: going with FF3 to Lua 5.1 Reference Manual (long and with lot of anchors).
Pasting javascript:window.location.href="#2.5"; alert(window.location.href); in the address bar, I went to the right anchor and it displayed the right URL. Works also with a full URL, of course.
Alternative code: javascript:(function () { window.location.href="#2.5"; })();
Perhaps you forgot the #. Common problem, also with image maps.
I have the same problem and I guess this is related to a click event.
I have a function that moves the browser to a specific page. I attach that function to some click events: in a button and in a image. AlsoI execute the function when the user press escape (document onkeypress event).
The results are that in all cases the function is called and executed, but only when there is a click the browser goes to the address I want.
Update
I got it working! with a
setTimeout( "location.replace('whatever.html');", 0 );
I don't know why the location.replace wasn't working when the event was a keypress, but with the settimeout it works :)
Update
Returning false after the event when you press escape makes the redirection works. If you return true or nothing the browser will not follow
You've got to add return false; after the window.location.href as mentioned above.
function thisWorks()
{
window.location.href = "http://www.google.com";
return false;
}
function thisDoesNotWork()
{
window.location.href = "http://www.google.com";
}
window.location.href works fine in all versions of Firefox, as does document.location.href I think that there is something else in your code that is breaking things.
drop this in a blank page, if it works, it indicates there is something else wrong on your page.
<script>
window.location.href = 'http://www.google.com/';
</script>
You could also use window.location.replace to jump to an anchor without register it in the browser history:
This article illustrates how to jump to an anchor and uses href as read-only property.
function navigateNext()
{
if (!window.location.hash)
{
window.location.replace(window.location.href + unescape("#2"))
}
else
{
newItem = nextItem(window.location.hash)
if (document.getElementById(newItem))
{
window.location.replace(stripHash(window.location) + "#" + newItem)
}
else
{
window.location.replace(stripHash(window.location) + "#1")
}
}
}
Have you tried this?
Response.Write("<script type='text/javaScript'> window.location = '#myAnchor'; </script>";);
please add full javascript script tag
<script type="text/javascript" language="javascript"></script>
window.location.hash = "#gallery";
For reference I had the same problem.
onclick = "javascript: window.location('example.html');" didn't work under FF (latest)
I just had to rewrite to onclick = "javascript: window.location = 'example.html';" to get it working
I just overcome the same problem. and the problem is not in javascript, but the href attribute on the <a> element.
my js code
function sebelum_hapus()
{
var setuju = confirm ("Anda akan menghapus data...")
if (setuju)
window.location = "index.php";
}
my previous html was
Klik here
and I update it to
Klik here
or remove the href attribute
hope this helps.
window.location.assign("link to next page") should work in both (chrome and firefox) browsers.
window.location.assign("link to next page")
Another option:
document.location.href ="..."

Categories