Dynamic buttons help

JavaScript
1

Hello,

So I’m new to JavaScript and I have a homework and I don’t know how to start:

I must create a dynamic Start button and a Stop one. After Start is clicked, I press w,s,s,d for example and then I press Stop. Something like " w was pressed 1 time" , “s was pressed 2 times” and so on must appear on my screen.

My question is how do I keep track of what letter was pressed and how many times after the event takes place? Do I use an if?

2

Hi dude1x, welcome to the forums.

The first step is to have your “skeleton” HTML page that the buttons and javascript will work in, do you have that?
If so, please show it, if not, please put one together and show it.

3

I made this for the HTML.

<html>
    <body>
    <div id='buttons'></div>

  </body>

</html>
4

Well, that certainly is a “skeleton” :wink:

For testing purposes I find it easiest to put the javascript not in its own file, but inside script tags inside the page’s head tags.

And a div tag with an id of “buttons” won’t show any buttons. You can put either button tags or inputs with type=button inside and it should be good enough. Give then each an id and we can get to the function.

5

Sorry for being such a ,… beginner :slight_smile: but… I really am and it’s nice to have someone that can help :slight_smile: Thank you :slight_smile:


<html>
<head>
<script></script>
</head>

    <body>

   <div id=start><input type='button'  value='Start' /></div>
   <div id=stop><input type='button'  value='Stop' /></div>

  </body>

</html>
6

That’s good enough to start, except the id’s should be on the inputs not the divs. then javascript can get them

function dynamic_buttons() {
var start_button = document.getElementById('start');
var stop_button = document.getElementById('stop');
// more code to follow
}
7

So this is calling the buttons, right? And now it’s time for the function code, right?

<html>
<head>
<script type="text/javascript">
function dynamic_buttons() {
var start_button = document.getElementById('start');
var stop_button = document.getElementById('stop');
</script>
</head>

    <body>

   <div><input type='button' id="start" value='Start' /></div>
   <div><input type='button' id="stop" value='Stop' /></div>

  </body>
 </html>
8

That is a function, well, the start of one anyway.
We’ll need another function to work with https://developer.mozilla.org/en-US/docs/Web/API/Window.onkeypress

First, add event handlers to the buttons

//previous code
start_button.onclick = log_keypress;
stop_button.onclick = log_keypress;
}

Then start the log_keypess function, save the page, open in a browser and test to see if it works so far

function log_keypress() {
alert('click event happened'); // quick and dirty but it's good enough for now
}
9

Ok, so I added the event handlers to the code and then I copied the log_keypress function and it doesn’t work, no.

I’ve noticed that in the link you gave me, the event was window.onkeypress. Do I have to have the onclick event to click Start and a onkeypress event as well?

10

edit: and then I called the function and it works :slight_smile:

11

Just so we’re on the same page, you now have something like this?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function dynamic_buttons() {
	var start_button = document.getElementById('start');
	var stop_button = document.getElementById('stop');
	start_button.onclick = log_keypress;
	stop_button.onclick = log_keypress;
}
function log_keypress() {
	alert('click event happened'); // quick and dirty but it's good enough for now
}
</script>
</head>
<body>
	<div><input type='button' id="start" value='Start' /></div>
	<div><input type='button' id="stop" value='Stop' /></div>
<script type="text/javascript">
dynamic_buttons();
</script>
</body>
</html>

We now know that the dynamic_buttons function is working with the buttons OK. But we can’t have both doing to the same thing!
So we’ll create two new functions, one for each and change the dynamic_buttons function to use those instead.
And to make it more clear that the function is “initializing” we’ll change the name slightly.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function init_dynamic_buttons() {
	var start_button = document.getElementById('start');
	var stop_button = document.getElementById('stop');
	start_button.onclick = start_clicked;
	stop_button.onclick = stop_clicked;
}
function log_keypress(button_type) {
	alert("The " + button_type + " button was clicked"); // quick and dirty but it's good enough for now
}
function start_clicked() {
	log_keypress("start");
}
function stop_clicked() {
	log_keypress("stop");
}
</script>
</head>
<body>
	<div><input type='button' id="start" value='Start' /></div>
	<div><input type='button' id="stop" value='Stop' /></div>
<script type="text/javascript">
init_dynamic_buttons();
</script>
</body>
</html>