We Keep Coding

Href link that redirects to another page has a specific action

On my site I created several href buttons, I want these different buttons to lead to the same page but with an additional js action.
As when I click on the first link, this brings me to the page so and the second leads to the same page but with a javascript action activated.
I hope I have been clear enough and that this is possible, thank you for your response.

adding a class/id to it would help I think. I'm new here so let me know if that's what you are looking for
<a class="script" href="...">Link</a>
then in your javascript, you can manipulate it
var link = document.querySelector(".script");
link.addEventListener("click", function(){
// your function here
});

You can make this happen by sending url parameters with each href button: /page.html?action=1 . See parsing url parameters in javascript
Next on page.html use the following javascript:
window.onload = function() {
let url = new URL(window.location.href);
let action = url.searchParams.get("action");
if (action == "1") {
//perform an action
action1();
} else if (action == "2") {
action2();
}
};

Basically, I have a page where there are buttons that lead to another page or there are buttons that make things happen in js, and I want that when we click the button on the first page, we arrives on the second page when js is activated.
Basically I explain my site I have a button "visual identity" which should lead to another page (easy), on this second page there is
sub-buttons like "fish" which display a menu with js commands, its sub-buttons are also on the first page and I want when you click on the sub-button on the first page it will take you to the second page with menu opening.
I don't know if that's what you understood just above?
but thanks for your reply.

javascript function reloads page upon completion

I have a simple javascript program that runs onclick of an image.
However, whenever I clicked the image, the page reloaded.
After a lot of debugging I found that the page doesn't reload until right as the script completes.
There are several setTimeouts in the code, but I noticed the page was reloading instantly. I even changed these timeouts to 15000 milliseconds, but it still reloads immediately.
I am using jquery, if it makes any difference.
I also want a different result from the program every time you click it, so that each time you click it a different script runs and a some text changes in a specific order. I did this by changing the onclick attribute of the images in each script to the name of the next script, so that script one would switch onclick to script two, and so on. I set a timeout on these switches so that one click doesn't race through every single script. script two isn't running, so that much works.
my code:
function getSounds() {
console.log("script. initiated");
$("#soundwebGetSoundDirections").html("Now, Wait until the file is done downloading and click below again.");
console.log("new message");
$("#soundwebGetSoundA").attr('href',"");
console.log("href eliminated");
setTimeout($("#soundwebGetSoundImg").attr('onclick','findFile()'),2000);
console.log("onclick to findFile()");
}
function findFile(){
console.log("FINDFILE")
$("#soundwebGetSoundDirections").html("Find the file(it's probably in your downloads), copy the path of the file (usually at the top of the file explorer) and paste in it the box below. Then, make sure there is a '/' at the end of the path and type 'Linkiness.txt' (case sensitive, without quotes) at the end. Once you have all that stuff typed, click the icon again.");
console.log("FIND IT, DARN IT!!");
$("#soundwebGetSoundPathInput").css("opacity",1);
console.log("diving into reader");
setTimeout($("#soundwebGetSoundImg").attr('onclick','readFile()'),1000);
}
function readFile(){
console.log("loading...");
$("#soundwebGetSoundDirections").html("loading...");
if(document.getElementById("soundwebGetSoundPathInput").value.length == 0){
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
}
}
and the HTML that's linked to,
<a id = "soundwebGetSoundA" href = "https://docs.google.com/feeds/download/documents/export/Export?id=1ynhHZihlL241FNZEar6ibzEdhHcWJ1qXKaxMUKM-DpE&exportFormat=txt">
<img onclick = "getSounds();" class = "soundwebImgResize" src = "https://cdn3.iconfinder.com/data/icons/glypho-music-and-sound/64/music-note-sound-circle-512.png" id = "soundwebGetSoundImg"/>
</a>
Thanks for any help,
Lucas N.

If you don't want clicking the image to cause the anchor tag to load the href, then move the image tag outside of the anchor tag.

You aren't using setTimeout correctly. You should be passing in a function not a statement. So, for example, instead of
setTimeout($("#soundwebGetSoundDirections").html("Please fill in Path!"),1000);
setTimeout(findFile(),2000);
you should use
setTimeout(function () { $("#soundwebGetSoundDirections").html("Please fill in Path!") },1000);
setTimeout(findFile,2000);
I think the same goes for setting the onclick attribute but I've never tried dynamically changing an onclick attribute like that.
Since you're already using jQuery you could try using .on('click'... and .off('click'... if your current setup isn't working.

"onclick" of a button in a popup works only once

I have an html/php webpage (the file is called searchresults.php) that imports jquery mobile. When you enter the page, the url is usually something like
www.domain.com/searchresults.php?&sort="off"&max="5"
In this example sorting is off and only 5 items are displayed. On that page is a button that opens a popup where I want the user to be able to change these settings. I use the built-in jquery mobile popup. On that popup you can toggle "sort" on/off and you can enter a new maximum. On the popup is an "ok" button to confirm your new settings. It looks like this:
OK
The sortAgain(); function in javascript looks like this:
function sortAgain();
{
//some code to get the necessary variables//
...
//change the href of the button so you reload the page
document.getElementById("okbutton").href = "searchresults.php" + "?keyword=" + var1 + "&sort=" + var2 + "&max=" + var3
}
So, basically, right before the "ok" button navigates to another page, I set its href of the page where it should navigate too.
This scheme works, and the searchresults.php file is fetched again from the server and re-interpreted (with the new variables in the url).
However, if i try to change the settings again after changing it once, the popup just does nothing! In other words, the href of the ok button on the popup stays empty and the javascript function sortAgain() is not called. I don't understand why it calls the onclick method perfectly fine the first time, but then refuses to call it again?
I assume it has something to do with the fact that the popup html code is an integral part of searchresult.php file, and that hrefing to the same page gives problems? The popup is pure html, no php is involved in the popup code. and again, it works fine the first time.

You should check out how to attach events via JavaScript. See here: javascript attaching events

You need to use the "pageinit" event when setting up click handlers in JQM: http://api.jquerymobile.com/category/events/
Here is an example of how to bind click handlers when the page is first loaded.
$( document ).on( "pageinit", "#that-page", function() {
$('#okbutton').on( "click", "#that-page", function( e ) {
$(this).attr("href", "searchreslts.php");
});
});

How do I discover which function is called when I press a button?

I'm stuck modifying someone else's source code, and unfortunately it's very strongly NOT documented.
I'm trying to figure out which function is called when I press a button as part of an effort to trace the current bug to it's source, and I"m having no luck. From what I can tell, the function is dynamically added to the button after it's generated. As a result, there's no onlick="" for me to examine, and I can't find anything else in my debug panel that helps.
While I prefer Chrome, I'm more than willing to boot up in a different browser if I have to.

In Chrome, type the following in your URL bar after the page has been fully loaded (don't forget to change the button class):
var b = document.getElementsByClassName("ButtonClass"); alert(b[0].onclick);
or you can try (make the appropriate changes for the correct button id):
var b = document.getElementById("ButtonID"); alert(b.onclick);
This should alert the function name/code snippet in a message box.
After having the function name or the code snippet you just gotta perform a seach through the .js files for the snippet/function name.
Hope it helps!

Open page with your browser's JavaScript debugger open
Click "Break all" or equivalent
Click button you wish to investigate (may require some finesse if mouseovering page elements causes events to be fired. If timeouts or intervals occur in the page, they may get in the way, too.)

Inspect the buttons markup and look at its class / id. Use that class or id and search the JavaScript, it's quite likely that the previous developer has done something like
document.getElementById('someId').onclick = someFunction...;
or
document.getElementById('someId').addEventListener("click", doSomething, false);

You can add a trace variable to each function. Use console.log() to view the trace results.
Like so:
function blah(trace) {
console.log('blah called from: '+trace);
}
(to view the results, you have to open the developer console)

Javascript: check if the url is changed or not?

My url format is like :
http://domain.in/home
http://domain.in/books/notes
http://domain.in/books/notes/copy
I've called a javascript function on window.load to check if the url has changed or not.
If the url has been changed then code is executed else it will return and checks again after 5 sec.
My code is :
window.onload = function(){
setInterval(function(){
page_open();
}, 5000);
};
function page_open(){
var pages=unescape(location.href);
pages=pages.substr( pages.lastIndexOf("studysquare.in/") + 15 );
// gives book if url is http://studysquare.in/book
//alert("pages"+pages+"\n\n recent"+recent);
if (pages==recent) { return; }
recent=pages;
alert("Reached down now the code will execute.");
}
The problem now is : when the url is like :
http://domain.in/book
Single level deep, then everything works fine. But when the url is like
http://domain.in/book/copy or http://domain.in/book/copy/notes
Then nothing works.....
Any help to check 3 level deep url change in javascript every 5 sec ? :)
Hi sorry I forgot to tell that... I've .htaccess file which doesnt allow to navigate the page when any length url after the domain.in/ is written.... that means only single page remains open and not affected by the url change...

When the user changes the URL, the browser unloads the entire page they're currently on (including your javascript, hence it stops running) and then loads the next page. No javascript is able to run across page changes. You can't monitor a change in the URL like you're doing if they're navigating to another page.
The best way to catch a change in the URL is to add an onUnload event to the body object to fire your javascript when the browser unloads the page just before starting to load the new page the user has requested -- but I'm not sure that's going to help achieve your goal of tracking their recent page views (if that's what you're looking to do).

Sounds like a history plugin such as jQuery address would help you a lot.
It lets you handle the event when the URL is changed, so you can load in new content as required.