Hey guys,
In the following code I'am trying to change the shape of the box and also be able to move it around the page with the cursor keys.

Here is a link to a site hosting the files: http://mobile.sheridanc.on.ca/~agnihopr/WebDev2_A3/

HTML Code:

<!DOCTYPE html>

<html onkeypress="boxReset()">

<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="_js/a3_Events.js"></script>
    <link href="_css/a3_CSS_Events.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="moveBox">
        <p id="divText">
            The box can be moved around. You can center a value for the height and width to change the box size.
        </p>
    </div>

    <fieldset >
        <legend> Change Box Values </legend>
        <label for="boxHeightInput" >Box Height </label>
        <input id="boxHeightInput" name="boxHeightInput" type="text" onkeyup="heightAdjust()">

        <label for="boxWidthInput">Box Width </label>
        <input id="boxWidthInput" name="boxWidthInput" type="text" onkeyup="widthAdjust()">

        <label for="boxTextInput">Box Text </label>
        <input id="boxTextInput" name="boxTextInput" type="text" onkeyup="textAdjust()">
    </fieldset>
</body>

</html>

Javascript Code:

var movingBox = document.getElementById("moveBox");
var topOfBox = movingBox.style.top.value;

//////////////////////////////////////DIV Movement Function//////////////////////////////////

document.onkeydown = function(evt)
{
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            leftArrowPressed();
            alert("left arrow pressed");        //these are here to see if the function is even responding
        break;
        case 39:
            rightArrowPressed();
            alert("right arrow pressed");
        break;
        case 38:
            upArrowPressed();
            alert("up arrow pressed");
        break;
        case 40:
            downArrowPressed();
            alert("down arrow pressed");
        break;
    }
}

function leftArrowPressed() {
    alert("message from the left method");                              //Once again, to check for resonse
    var moveableBox = document.getElementById("moveBox");
    moveableBox.style.left = (moveableBox.style.left) - 5 + 'px';
}

function rightArrowPressed() {
    alert("message from the right method");
    var moveableBox = document.getElementById("moveBox");
    moveableBox.style.left = (moveableBox.style.left) + 5 + 'px';
}
function upArrowPressed() {
    alert("message from the up method");
    var moveableBox = document.getElementById("moveBox");
    moveableBox.style.top = (moveableBox.style.top) - 5 + 'px';
}
function downArrowPressed() {
    alert("message from the down method");
    var moveableBox = document.getElementById("moveBox");
    moveableBox.style.top = (moveableBox.style.top) + 5 + 'px';
}

//////////////////////////////////////Height, Width and Text Adjustment//////////////////////////////////

function heightAdjust()
{   
    var heightIn = document.getElementById("boxHeightInput").value;
    document.getElementById("moveBox").style.height = "heightIn" + 'px';
    alert(heightIn);
}

function widthAdjust()
{
    var widthIn = document.getElementById("boxWidthInput").value;
    document.getElementById("moveBox").style.width = "widthIn";
    alert(widthIn);
}

function textAdjust()
{
    var textIn = document.getElementById("boxTextInput").value;
    document.getElementById("divText").innerHTML = textIn;
}

function boxReset()
{
    //to-add: will bring box to original position
}

The problems I'm having:
1.) When it come to function like rightArrowPressed(), top, left and bottom. The problem is that the left and top values are not variables, so when they are activated the <div> goes to left + 5 (rightArrowPressed) or aligns itself flush with the edge(leftArrowPressed). Same thing happen with the up and down arrows. I realize that if I declare the original starting position of the div(top and left position value) as a variable and call them in the function and return the value after adding 5 to it, then It would work. However, whenever I try to declare them as variables (as seen below):

var moveableBox = document.getElementById("moveBox");
var topOfBox = moveableBox.style.top.value;

I get the message Uncaught TypeError: Cannot read property 'style' of null.
So whats the issue here and what steps can I tak to resolve it.

2.)This one is weird. When I type in the height and width input boxes the size of the <div> is supposed to change immediately. However, when I do so nothing happens. I place alert boxes around after the adjustment should happens and it shows me the correct px value.

Any Help will be greatly appriciated.

Recommended Answers

All 5 Replies

Let's go to the points:

  1. You need to wait until the DOM is loaded so you can get the reference of an object.

    // This won't work
    var movingBox = document.getElementById("moveBox");
    var topOfBox = movingBox.style.top.value;

    // This should work
    var movingBox, topOfBox;

    window.onload = function() {
    movingBox = document.getElementById("moveBox");
    topOfBox = movingBox.style.top.value;
    };

  2. It's a silly error:

    // "heightIn" is a string, not the value of the heightIn variable
    // This will set the height to an string with value 'heightInpx'
    document.getElementById("moveBox").style.height = "heightIn" + 'px'

    // This should work
    document.getElementById("moveBox").style.height = heightIn + 'px'

Thanks a lot brother, that helped me out a lot!

You're welcome.

Just mark the question as solved please =)

I had another question for you, however, it doesnt have anything to do with javascript. How can I remove the link I posted in the original post? I realize I should have not posted it since it can lead to personal info.

Edit the post and remove the link

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.