How to create a function in which a box moves in accordance with 2 user inputs (direction and # of pixels to move)


Tags: javascript,html,css

Problem :

Here's what I have so far:

The following is my CSS for the box:

  p
    {
       width: 100px;
       padding: 25px;
       border: 25px solid red;
       margin: 25px;
       position: fixed;
       top: 100px;
    }

And here is the JavaScript and HTML I have so far:

<!DOCTYPE html>
<html>
    <head>
        <title>Box Mover</title>
        <link rel="stylesheet"; style="text/css"; href="style.css">
    </head>

    <script>
       function initialize()
       {
            var positionBox = document.getElementById("positionBox");
            positionBox = addEventListener("click", moveBox);

       }

       function moveBox()
       {
            var positionBox = document.getElementById("positionBox");
            positionBox.style.position = "absolute";
       }
    </script>


    <body>
        <p>This is a box.</p>

        <form>
            Number of pixels to move:
            <input id="numPixels">
            <br>
            <br>
            Direction to move:
            <select id="directionSelection">
                <option>Up</option>
                <option>Down</option>
                <option>Left</option>
                <option>Right</option>
            </select>
            <br>
            <br>
            <input id="positionBox" type="button" value="Move Box">
        </form>
    </body>
</html>

The part I am stumped on is how I can get my positionBox button to interact with my directionSelection drop-down menu and numPixels within my JavaScript. Could someone help me out here?

In my class yesterday, my prof showed us an example of getting a button to move with hard-coded parameters, but now I need to do that with a box, making it move in the direction the user specifies, along with the number of pixels to move. I could also post that example code if it could be helpful to anyone.



Solution :

The part I am stumped on is how I can get my positionBox button to interact with my directionSelection drop-down menu and numPixels within my JavaScript

In your moveBox function, use document.getElementById("numPixels").value and document.getElementById("directionSelection").value to get the number of pixels and the direction to move.

showed us an example of getting a button to move with hard-coded parameters, but now I need to do that with a box

To be able to move the box from your moveBox function, you will need to add an id attr to the <p>This is a box.</p> element so that you can select it with var box = document.getElementById("myBox");. Then, apply the values to box.style.top and box.style.left to move the box around instead of applying the values to the positionBox.


    CSS Howto..

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    HTML5 Modal Dialog is showing shortly on page load, how can i stop this?

    How to load dynamic CSS files based on condition

    Are where any examples available on how to use postcss-modules instead of css-modules?

    css google font how to download and embedd in css to avoid slow load times

    CSS: How to Solve this “Site-Is-Too-Big” Challenge?

    Show Child Div Above Elements on Parent Div Level using z-index

    How to display text left side and icon on right side in html css?

    How can I create facebook style vertical border line (layout)? :)

    How can I vertically align the text in an anchor tag?

    How to hover over the whole button in css

    How to make font sharp in CSS?

    In html how do I have table within table look visually the same as if I didnt have the inner table

    How to customize the HTML5 input range type looks using CSS?

    How to force or bring vertical scroll bar to front in html css

    How to make a fully responsive web page [closed]

    How to make a div grow with its children when inline-blocks don't fit anymore

    Hide and show when click a button

    How browser auto resize website to mobile browse?

    How to select the first element from a selection when one element does not have a class via CSS?

    How do I get a jquery function to only affect the child element of 'this'

    how is possible to change not nested elements attribute with css?

    How to Make CSS Work on 404 Error Page?

    How can an external stylesheet be used to style Polymer 1.0 elements?

    how to align image and text when floating to image

    How to display size and icon for pdf and word docs?

    How to create an image tag cloud

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How to apply css to asp.net LinkButton?