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.
