//MAKE: 2.06 Skill-builder: Move things with buttons


Saving your work

Use Save as... to save the empty template as "2.06S-MoveThingsWithButtons-LastName.html" in your Computer Programming 12 directory.

The assignment

Reuse, copy, and modify the code below to create a page that uses Javascript to move an image up, down, left, and right.

For example

The following is used to move an image of a star down 15px with each press of the button:

image of a star

Distance to move for each button press: px

Show me the code!

<!doctype html>
<html lang="en">
        <meta charset="UTF-8">
            drapak.ca - Move things with buttons
            content="Assignment: Use Javascript to read current positions and move to a new one.">
            content="Dave Drapak">
            Change log:
                29. Sept 2015   - created!                                      - Drapak
                5. March 2017   - reworked for clearer style                    - Drapak
                3. October 2018 - moved to 2.06                                 - Drapak

            #imageId {
                position:   absolute;
                top:        50px;   
                left:       300px;
            input {
                width:      50px;

            alt="image of a star"
            Distance to move for each button press:
            <input id="distanceId" type="text" value="15">px
            <button id="buttonId">&darr;</button>
                A reference for arrow symbols:
                up = &uarr;     down =&darr;    left = &larr;   right = &rarr;

            // This reads the distance per click and moves the star down by that amount
            var moveDown = function () {
                console.log( 'in moveDown...' );
                // INPUT: get the movement to move with each click
                var movementPerClick    = document.getElementById( 'distanceId' ).value;
                // .value returns a string - you convert it to a number with parseInt()
                var parsedMovement      = parseInt( movementPerClick );
                // INPUT: get the image's current distance from the top of the page
                var currentTop          = document.getElementById( 'imageId' ).offsetTop;
                // PROCESS: increase the distance from the top by the parsed movement/click
                var newTop              = currentTop + parsedMovement;
                // OUTPUT: send the variable contents to the developer's console
                console.log( 'currentTop, newTop=' + currentTop + ', ' + newTop );
                // OUTPUT: update the image with a new top value
                // note that you have to add px to the end of the number 
                document.getElementById( 'imageId' ).style.top  = newTop + 'px';
            //INPUT: trigger moveDown when #buttonId is clicked
            document.getElementById( 'buttonId' ).onclick   = moveDown;