SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamic buttons help

    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. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,189
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made this for the HTML.

    Code HTML4Strict:
    <html>
        <body>
        <div id='buttons'></div>
     
      </body>
     
    </html>

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,189
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    Well, that certainly is a "skeleton"

    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. #5
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for being such a ,... beginner but.. I really am and it's nice to have someone that can help Thank you

    Code HTML4Strict:
    <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. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,189
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    That's good enough to start, except the id's should be on the inputs not the divs. then javascript can get them
    Code JavaScript:
    function dynamic_buttons() {
    var start_button = document.getElementById('start');
    var stop_button = document.getElementById('stop');
    // more code to follow
    }

  7. #7
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So this is calling the buttons, right? And now it's time for the function code, right?

    Code HTML4Strict:
    <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. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,189
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    That is a function, well, the start of one anyway.
    We'll need another function to work with https://developer.mozilla.org/en-US/...dow.onkeypress

    First, add event handlers to the buttons
    Code JavaScript:
    //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
    Code JavaScript:
    function log_keypress() {
    alert('click event happened'); // quick and dirty but it's good enough for now
    }

  9. #9
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    edit: and then I called the function and it works

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,189
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    Just so we're on the same page, you now have something like this?
    HTML Code:
    <!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.
    HTML Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •