|
JavaScript - Magic Square
Hello wise javascript programers
I come to you for help with some programming assignment Im not quite getting the assignment it self is based on the use of the getElementsByClassName() method. Basically I have a 3x3 table with some outer cells that at this point dont do much. there is a loop that iterates through all the inner cells checking for errors. inside the cells, are input boxes. the loop checks to see if the inner cells are empty, contain a non-numeric value, or a zero. if any of this instances is true, a message is displayed explaining the situation. those cells that DON'T have a number will be colored in yellow indicating that numbers should go in there. I got as far as testing all the conditions and generating the appropriate messages, I wrote additional code that supposedly colors the cells that have other than a number in but the code does not execute this is the code if you would like to take a peek at it and help a newbe out. thanks Code: <html>
<head>
<title>Magic Square</title>
<script type="text/javascript">
function checkit()
{
var j;
var inputelement = document.getElementsByClassName("inner");
var colorcells = document.getElementsByClassName("in");
for(j=0;j<inputelement.length;j++)
{
if(inputelement[j].value=="")
{
alert(" you must enter a number cells cannot be empty");
for(r=0;r<colorcells.lenght;r++)
{
colorcells[r].style.backgroundColor="yellow";
return false;
}
}
else if (isNaN(inputelement[j].value))
{
alert(" you must enter a number cells cannot be a letter");
for(r=0;r<colorcells.lenght;r++)
{
colorcells[r].style.backgroundColor="yellow";
return false;
}
}
else if(inputelement[j].value <= 0)
{
alert(" you must enter a number cells cannot be zero");
for(r=0;r<colorcells.lenght;r++)
{
colorcells[r].style.backgroundColor="yellow";
return false;
}
} //end else if
} //end first for loop
} //end function
</script>
</head>
<body>
<table align="center">
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td class="in"><input type="text" size="1" maxlength="1" class="inner" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td></tr>
<tr><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer" /></td><td><input type="text" size="1" maxlength="1" readonly class="outer"/></td></tr>
<tr><td colspan="5"><input type="button" value="Check The Magic Square" onclick="checkit()" /></td></tr>
<tr><td colspan="5"><input type="button" value="Clear The Magic Square" onclick="clearit()" /></td></tr>
</table>
</body>
</html>
Similar TutorialsWhat is the [0] for? And even better if you can tell me what they're called, in this context; I want to find a tutorial. Tryit Editor v2.1 PHP Code: var a=document.getElementsByTagName("a")[0]; Thanks! All, I have the following code: Code: function createSquare(event) {
var x = parseInt(event.clientX);
var y = parseInt(event.clientY);
var left = x - 50;
var top = y - 50;
var d = document;
var div = event.target.parentNode.lastChild;
//alert(div.nodeType)
if (div.nodeType != 1)
div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";
var leftbox = x - 80;
alert(x);
alert(leftbox);
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";
var sel = d.getElementById('tagged_person');
sel.style.display = 'block' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person;
tagged_user = tagged_user.value;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
divselect.appendChild(sel);
event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(divselect);
This shows me a square and a select but the select isn't populated with anything. i do have a form later on down the page. The form code is (which I try and pull in the info from the select in the form in the select in the createSqua PHP Code: <form action="" name="tag" method="post"> <input type="hidden" name="picture_id" value="4"> <select name="tagged_person" id="tagged_person"> <?php $qryfav = "Select * from favorites where user_name='creep'"; $resultfav = mysql_query($qryfav); while($resultsetfav = mysql_fetch_array($resultfav)){ echo "<option value=\"$resultsetfav[favorite_user]\">$resultsetfav[favorite_user]</option>"; } ?> </select> </form> Thanks for the help in advance. I know very little about javascript, but was wondering if something like this can be done? Would it be possible (with mootools or jquery) to have homepage that will rotate its home page content forwards and backwards based on either triangle or square? ie, you can rotate through 3, 4, etch home pages? Sort of like a slider, but it rotates off a center axis of the triangle or square? Hi, I need help with this magic square program. I included the instructions and there are a few sample runs to get an idea of what the program is suppose to come out as. Would be helpful if the most basic java language is used. Willing to PayPal money to whoever gets the program correct. Thank you. Hey, hoping someone can help. As this is my first post and I have a very very very small understanding of Javascript you have permission to mock me! Anyway, here goes... I am using a third party shopping cart system. One of the dropdown menus uses an array as the 'name'. <select name="product[]"> I'm pretty sure it has to stay this way or the cart won't work. I have a function which runs to make sure it can't be left on the first option when submitted, however it won't work with the 'name' containing square brackets! function validate_form_acflgotmt ( ) { valid = true; if ( document.acftshirt.product[].selectedIndex == 0 ) { alert ( "Neigh! Whoa boy, don't forget to choose a t-shirt size!" ); valid = false; } return valid; } If anyone can help please do and I will shed a single tear of joy. Thanks! Jake |
|||||||