How to associate several component events to one JavaScript file?

Join the discussion
Ask a follow-up here, or get your own question answered by working scientists, mathematicians and engineers — people, not an autocomplete.
Real named experts · corrections over time · the nuance an AI answer skips
Sign up Log in
5 replies · 2K views
Bob Walance
Insights Author
Gold Member
Messages
84
Reaction score
55
TL;DR
Need help understanding associating web page 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.
 
on Phys.org
Reply
  • Like
Likes   Reactions: Wrichik Basu and Bob Walance
I can follow your html and javascript in Idea#1, and I'm playing around with it on the codepen website. I will start learning html. The javascript is easier for me because I have written C and C++ applications.

Your Idea#4 is something that I will study.

Thank you very much, pbuk. Your effort is sincerely appreciated.
 
Bob Walance said:
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 did find exactly what I was looking for by searching for 'html external javascript'. The key concept is 'external javascript'.

This is how to do it --
Place this in the html file. It associates the name of the JavaScript file and its functions ('<' and '>' omitted here):
script src="myMusicFunctions.js" /script
My .js file has a function called playSineWave(freq).

This code was created by the Google Web Designer app for the button press events:
script type="text/javascript" gwd-events="handlers"
window.gwd = window.gwd || {};
gwd.playThe440Hz = function(event) {
playSineWave(440);
};
gwd.button2 = function(event) {
playSineWave(550);
};
gwd.button1event = function(event) {
playSineWave(440);
};
gwd.button2event = function(event) {
playSineWave(550);
};
/script
 
If you are happy with that then fine, but IMHO sooner or later you are going to find that Google Web Designer is just getting in your way and not really doing much for you - you can achieve a lot with just a few lines of vanilla HTML/CSS/JS (leveraging the excellent tone.js library).

 
Reply
  • Like
Likes   Reactions: Bob Walance
Yes, GWD is definitely a crutch. I have zero experience with html so it will help me achieve my goal more quickly AND allow me to see what-is-what in the html.

Cb or B#? E# or Fb? That is all very confusing to me - even having played trombone all throughout junior and senior high school. IMHO, the 12 notes should be called 0,1,2,3...11. No more enharmonic equivalents to worry about. No more sharp and flat keys and very simple key changes.

I blame the piano for this obfuscation. I posted about this a couple of years ago and am still really enjoying playing this other layout. There's a video at the bottom of the thread.
https://www.physicsforums.com/threa...d-juxtaposed-with-a-balanced-keyboard.989172/