We Keep Coding

How to associate several webpage component events to one JavaScript file?

I am creating a web page that will have several buttons on it. When a button is pressed it will play a tone or combination of tones.
With the Google Web Designer application, I can create a simple page with one button on it. I'm able to associate the clicking of that button with "Custom Code" for that button in order to play a tone, and it works.
I have not been able to figure out how to use one JavaScript file that several buttons use for their tone-generating functions - rather than having "Custom Code" for each button separately.
I'm not a software engineer and perhaps Google Web Designer is not the appropriate tool.
Any ideas would be appreciated.

Chrome Extension Popup Questions

I'm trying to make a bot for a website, to make purchases faster and automated. In order to do so, I am using javascript (atom) and chrome extensions. I need some help with the following things to do with chrome extension popup, which will improve the UI of my program (user interface)
1.Is there a way for the user to set a time for the code to excecute at? For example, a 24 hour clock they can edit using text boxes in the popup. Maybe this triggers a new tab which has a coutdown clock, at the end of which the code is excecuted on the website.
2.Can I create text boxes, so that the user can fill in various details such as item name and size value, that can be integrated with my main javascript code to change which product is purchased by the bot?
3.How do I create dropdown boxes for things like the category, with multiple options. Again, this must correspond with the main JS code.
4.Can I create a login page that must be filled in with a unique login before the user can access the main login page?
5.Can I create little switches?
6.Is there a way for me to customise the buttons with certain fonts, colours and sizes, and to customise the backgroud colour etc. I really want it to pop!
I know that this is a lot of questions, so please feel free to answer one or two rather thatn all of them! I have an incredibly basic understanding of HTML, so I may have some followup questions for you.
Thanks in advance,
Louis

Trace clicking behavior of visitors of on web page

I am writing my own home page in html and javascript.
I have many hyperlinks on the home page, which interests me is, how many times visitors of my page click on them.
For instance, pdf is a hyperlink which directs to downloading a pdf file. I would like to set up a mechanism of counter of clicking on it. For instance this information is automatically recorded in a file so that I could check it from time to time.
Besides counter, other information such as the time of clicking, the IP of visitors who click interest me too. It will be great if I can record them.
I don't know javascript, could anyone suggest me an efficient way to realize this with details (or a piece of code)?

As per you code
PDF
You can see I have added one ID in the PDF link, now
$("#uniqueID").click(function(){
//Write a ajax function to calculate the count and storing
});
I have not written the entire code, I think it's sufficient for you to understand the logic.

How do I build a multi-stage web form?

I'm trying to build a webform that has multiple stages. I'm patterning it off of the Stack Overflow / Stack Exchange flagging webform. The problem is, I'm not sure how to trigger the "next stage" action.
To illustrate, if one wants to flag a question on Stack Overflow, you click flag and then a popup prompts you to make a choice. If you choose the second option ("it doesn't belong here, or it is a duplicate") the form automagically takes you to a second screen.
First screen:
Upon click, it auto-redirects to:
The problem is that I don't know what the underlying trigger is. How does clicking that radio button send the end user to the next screen?
I tried checking the source, but I have a feeling I'm only seeing half the picture:
No amount of HTML tutorials I find have any practice example similar to this. I suspect this is JavaScript, but I can't find the linked .js file that would trigger these actions.
So: How does the webform auto-redirect upon click? As a follow-up, if it's using JavaScript, is there an HTML/CSS-only workaround I can use?

It might help to think about this at a lower level than frameworks. There are two ways one could make a multi-stage form.
The first (and generally older) way is to store the state on the server. Each stage of the form is actually a separate form, and the client's progress through the questionnaire is kept on the server (for example, as part of the session data).
The second way (the more modern one) is to use JavaScript, as you suspected. There is actually very little black magic in this case, and no auto-redirects on clicks at all. All you do is have one very long form where you show/hide some of the elements depending on the user's selections (of course, you could have multiple <form> elements which you show/hide).

Well, I'd use some sort of jQuery wizard plugin and adapt it to my needs. I did it very recently and it wasn't that hard. You should try SmartWizard 3.0, it's pretty active, the last release was about 2 months ago and the coders answered my questions pretty fast.
Here it is: https://github.com/mstratman/jQuery-Smart-Wizard
You can trigger the wizard to advance to the next step linking an event to the action of clicking the radio button.
Good luck :)

Javascript idle visitor checking

Is there a Javascript library (preferably a jQuery plugin) or simple mechanism to check if a visitor is idle? For example, if the visitor to a webpage has been there more than 5 minutes only moving their mouse but not clicking any buttons or pressing any keys, then call a particular Javascript function.
It seems like I could just call setTimeout() for my desired idle time and then call clearTimeout() upon any mouse click or keyboard press by having something like $('body').click(clearTimeout(.... But I'm sure there are issues I don't want to have to figure out. The one thing I definitely don't want to have happen is for my site to think someone's been idle and they haven't really been. The other way around is ok.

Yes, very possible and there are a couple sites that use this (like banks and Mint) with great success. Take a look at these two blog posts:
http://www.erichynds.com/jquery/creating-a-mint-com-style-idle-logout-timer-using-jquery/
http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/
I have used this approach in the past with Admin pages within websites to a fair amount of success, especially after adding the modal dialog box informing users that the session was about to expire. This helps the user to feel like the web application/site is working with them to help.