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..

    How do I make the class 'path' show up at higher zoom levels using carto CSS in MapBox Studio?

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

    How to set the jquery draggable with margin left?

    CSS: How to make background color around text not flush to the text?

    How to align text differently inside a single inline element with CSS?

    How do i shrink my link menu

    css footer background didn't shows properly in html5

    How to make a div fill up remaining horizontal space

    Dropdown Menu doesn't show all links and can't change css social media icons color

    how to make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    How to use CSS with javascript

    How to access smarty variable in css URL attribute?

    CSS: How to shorter code having select direct children with multiple id

    How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

    How do I stop a CSS layout from distorting when zooming in/out?

    How to generate CSS with loop in less

    How to construct multilevel menu using CSS only?

    I want to make a circle graph how to make it in javascript and css

    How do I prevent a link tag from adding extra padding below an image?

    How to set negative z-index with jQuery?

    How Should I Send HTML/CSS Content To A Server?

    How to add text to a CSS Sprite

    How do I get rid of the last tr td bottom border using css?

    Safari displays font differently from other browsers -Set specific font-family for specific browser - How to change font smoothing for Safari [closed]

    How to style child components from parent component's css file?

    How to make div disappear when image is placed over it?

    How to Build fieldSets with fixed width/height & 2 columns of checkboxes

    How to align specific element to the right using :last-child pseudo

    How to display loading.gif at the center of the screen which has a scrollbar