I've really gotten into HtMl and have pretty much memorized a 900 page book about it. the book covers a little bit about javascript but not a whole lot. i learned enough to make something on my page collapsable. this worked at home because my computers browser is probably as old as the book. anyway, i went to school to show my friend but it didn't work on the schools updated browsers. i need someone to tell me either what i need to change to comply with the new browser (Google Chrome or IE11) or what the new way is. here is the function i was using.
Code:
function changeDisplay( el ){
var Parent = el.parentElement;
var childCount = Parent.children.length;
var thisChild = 0;
for (i = 0;i<childCount;i++){
thisChild = Parent.children(i);
if (i != el){
if (thisChild.style.display == "")
thisChild.style.display = "none";
else
thisChild.style.display = "";
}
}
return;
}
if you need to see the html, i can give that to. the line the browser was telling me it had a problem with is this one:
Code: thisChild = Parent.children(i);
if you know anything about this, please help.
the error the browser gives says something about something on that line not being an object??? if that helps at all.
What element did you pass to that function? I'd be willing to bet that the element was not correctly passed. Also, please oh please indent your Javascript code properly, to make it more readable.
sorry, i was trying to go fast. my actual code is indented but i don't have much time.
i was passing it like this:
Code: <div>
<h1 onClick="changeDisplay(this);">click</h1>
<div style="display:none">
<h2>hello</h2>
</div>
</div>
i tried changing the problem line to:
Code: thisChild = Parent.children[i];
but that only slightly helped. now when i click on the words they disappear and are replaced by what i want to uncollapse. this is not supposed to happen.
I have absolutely no knowledge of JavaScript (So why the heck am I posting here?
) But in C/C++, when you do for(i =0;...., you need to specify the variable if it hasn't already been declared. Such as:
for(var i=0;.... I think?
i just now figured it out. thanks for telling me to put the i in [i] because that was part of it but the other part was this:
Code: if (i != el){
was supposed to be:
Code: if(thisChild != el){
that was my second problem. thanks for helping. 
No problem!
That makes sense then, because you are checking that, not the counter.
yeah, but for some reason checking the counter works on old browsers. kind of wierd.
Here is what has come out of that script. It's really kind of cool. To see it, follow these instructions:
1) copy the code below and past it into any word editing program.
2) save the file with the extension .html
3) open the saved file in your browser
Code: <html>
<head>
<title>Javascript Test</title>
<script type="text/javascript">
function onColor(el){
/* Just a function for a mouse-over change of color when used with the next function */
el.style.color = "red";
el.style.textDecoration = "underline";
}
function offColor(el){
/* Just a function for a mouse-over change of color when used with the previous function*/
el.style.color = "black";
el.style.textDecoration = "none";
}
function changeDisplay(el){
/* This function is currently not being used but will be in the future. It changes the display of every child of the called elements parent except for the called element itself. */
var parent = el.parentElement;
var childCount = parent.children.length;
var thisChild = 0;
for(i = 0;i<childCount;i++){
thisChild = parent.children[i];
if (thisChild.style.display == "")
thisChild.style.display = "none";
else
thisChild.style.display = "";
}
}
function changeHr(el){
/*this function makes it so that when you click on the green dotted horizontal line (yes, thats what it is. the dots are actually the border.) the color of the text becomes the lines color and the line changes to either white or green */
body.style.color = el.style.borderColor;
if (el.style.borderColor == "white")
el.style.borderColor = "#00ff00"; /*green*/
else
el.style.borderColor = "white";
}
function radio(el){
/* this function lets me change the display of whatever I put into it */
if (el.style.display == "") /*if it is displayed */
el.style.display = "none"; /*don't display it */
else /* if it is anything but displayed, display it */
el.style.display = "";
}
</script>
<style type="text/css">
body{
background-color: black;
}
input{
border: 0px solid black;
background-color: black;
display: inline;
margin-right: 5px;
text-align:center;
}
h1{
font-size: 20pt;
text-decoration: underline;
padding: pt;
margin: 5pt;
text-align: center;
}
h2{
font-size: 16pt;
padding: 5pt;
margin: 0pt;
text-decoration: none;
text-align: center;
}
div.leveltwo{
margin-left: 10pt;
}
hr.main{
height: 20px;
background-color: black;
border:10px dotted;
}
</style>
</head>
<body id="body" style="color: white">
<h1>Poll on KSS classes</h1>
<hr class="main" onClick="changeHr(this)" style="border-color: #00ff00">
<!-- The next group of elements are the checkboxes. I call the script using the ID of the radio button that I want to change, thus allowing only one function to change all. -->
<h2><input type="checkbox" checked disabled>check each class that you are taking.</h2><br>
<input type="checkbox" value="English" id="English" onClick="radio(English1)"><label for="English">English</label><br>
<input type="checkbox" value="Language" id="Language" onClick="radio(Language1)"><label for="Language">Language</label><br>
<input type="checkbox" value="Math" id="Math" onClick="radio(Math1)"><label for="Math">Math</label><br>
<input type="checkbox" value="Art" id="Art" onClick="radio(Art1)"><label for="Art">Art</label><br>
<input type="checkbox" value="History" id="History" onClick="radio(History1)"><label for="History">History</label><br>
<input type="checkbox" value="TechnologyComputers" id="TechnologyComputers" onClick="radio(TechnologyComputers1)"><label for="TechnologyComputers">Technology / Computers</label><br>
<input type="checkbox" value="Geography" id="Geography" onClick="radio(Geography1)"><label for="Geography">Geography</label><br>
<hr>
<!-- These are the radio buttons that get displayed depending on the choices above-->
<h2>Which class is the hardest?</h2>
<input type="radio" name="hardclass" value="No choice" checked style="display:none">
<div id="English1" style="display:none"><input type="radio" name="hardclass" value="Englsh" id="English2"><label for="English2">English</label></div>
<div id="Language1" style="display:none"><input type="radio" name="hardclass" value="Language" id="Language2"><label for="Language2">Language</label></div>
<div id="Math1" style="display:none"><input type="radio" name="hardclass" value="Math" id="Math2"><label for="Math2">Math</label></div>
<div id="Art1" style="display:none"><input type="radio" name="hardclass" value="Art" id="Art2"><label for="Art2">Art</label></div>
<div id="History1" style="display:none"><input type="radio" name="hardclass" value="History" id="History2"><label for="History2">History</label></div>
<div id="TechnologyComputers1" style="display:none"><input type="radio" name="hardclass" value="TechnologyComputers" id="TechnologyComputers2"><label for="TechnologyComputers2">Technology / Computers</label></div>
<div id="Geography1" style="display:none"><input type="radio" name="hardclass" value="Geography" id="Geography2"><label for="Geography2">Geography</label></div>
<hr>
</body>
</html>
This works for sure in any IE that supports javascript, and GoogleChrome. not sure about Netscape but it probably will work. (if anyone still uses Netscape)
That is pretty neat! I like how the radio buttons appear when checked. Nice work!
MateoConLechuga wrote:
That is pretty neat! I like how the radio buttons appear when checked. Nice work!
Thanks, it's for my schools newspaper club. Obviously a class can't be the hardest if you aren't taking it, so I'm not going to show those classes.
The main reason for doing this is because i wanted to show the club that me doing is better than finding an online program that does it because those can't do what I can do.
The biggest problem I started out with was that I was trying to call Elements from my script by the Elements class and not the ID. Whoops .
Heres my latest, including a lot of messing around. This is a kind of cool page but really long for some colors. i'm working on simplifying it but i still think it's awesome. Try it out:
Code: <html>
<head>
<title>Javascript Test</title>
<script type="text/javascript">
function onColor(el){
/* Just a function for a mouse-over change of color when used with the next function */
el.style.color = "red";
el.style.textDecoration = "underline";
}
function offColor(el){
/* Just a function for a mouse-over change of color when used with the previous function*/
el.style.color = "white";
el.style.textDecoration = "none";
}
function changeDisplay(el){
/* This function is currently not being used but will be in the future. It changes the display of every child of the called elements parent except for the called element itself. */
var parent = el.parentElement;
var childCount = parent.children.length;
var thisChild = 0;
for(i = 0;i<childCount;i++){
thisChild = parent.children[i];
if (thisChild.style.display == "")
thisChild.style.display = "none";
else
thisChild.style.display = "";
}
}
function radio(el){
/* this function lets me change the display of whatever I put into it */
if (el.style.display == "") /*if it is displayed */
el.style.display = "none"; /*don't display it */
else /* if it is anything but displayed, display it */
el.style.display = "";
}
function changeValue(el){
if (el.value == "Answer here")
el.value = "";
}
function changeValueBack(el){
if (el.value == "")
el.value = "Answer here";
}
function turnOn(el){
el.style.display = "";
}
function bodyColor(el){
var theColor = el.style.backgroundColor;
body.style.color = theColor;
mainhr.style.borderColor = theColor
}
function bodyBColor(el){
var theColor = el.style.backgroundColor;
body.style.backgroundColor = theColor;
mainhr.style.backgroundColor = theColor;
}
function innerChange(el){
testzone.innerHTML = inputhtml.value;
}
</script>
<style type="text/css">
body{
background-color: black;
}
h1{
font-size: 20pt;
text-decoration: underline;
padding: pt;
margin: 5pt;
text-align: center;
}
h1.top{
margin-top: 60px;
}
h2{
font-size: 16pt;
padding: 5pt;
margin: 0pt;
text-decoration: none;
text-align: center;
}
div.leveltwo{
margin-left: 10pt;
}
hr.main{
height: 0px;
background-color: black;
border:10px dotted;
}
div.head{
position: absolute ;
top: 0;
left: 10px;
background-color: green;
width: 98%;
text-align: right;
height: 40px;
border: 2pt solid white;
}
h3{
padding: 0;
margin: 0;
border: 0;
width: auto;
font-size: 18pt;
}
h3.options{
width: 50px;
}
div.options{
position: absolute;
top: 2%;
left: 10%;
background-color: green;
height: 560px;
width: 80%;
border: 2pt solid white;
}
#right{
text-align: right;
}
#center{
text-align: center;
align: center;
}
#left{
text-align: left;
}
table.options{
text-align: right;
width: 100%;
}
div.box{
margin: 5px;
border: 1pt solid black;
width: 20px;
height: 20px;
display: block;
}
</style>
</head>
<body id="body" style="color: #ffffff">
<h1 class="top">Poll on KSS classes</h1>
<hr class="main" style="border-color: #00ff00" id="mainhr">
<!-- The next group of elements are the checkboxes. I call the script using the ID of the radio button that I want to change, thus allowing only one function to change all. -->
<h2><input type="checkbox" checked disabled>check each class that you are taking.</h2><br>
<input type="checkbox" value="English" id="English" onClick="radio(English1)"><label for="English">English</label><br>
<input type="checkbox" value="Language" id="Language" onClick="radio(Language1)"><label for="Language">Language</label><br>
<input type="checkbox" value="Math" id="Math" onClick="radio(Math1)"><label for="Math">Math</label><br>
<input type="checkbox" value="Art" id="Art" onClick="radio(Art1)"><label for="Art">Art</label><br>
<input type="checkbox" value="History" id="History" onClick="radio(History1)"><label for="History">History</label><br>
<input type="checkbox" value="TechnologyComputers" id="TechnologyComputers" onClick="radio(TechnologyComputers1)"><label for="TechnologyComputers">Technology / Computers</label><br>
<input type="checkbox" value="Geography" id="Geography" onClick="radio(Geography1)"><label for="Geography">Geography</label><br>
<hr>
<!-- These are the radio buttons that get displayed depending on the choices above-->
<h2>Which class is the hardest?</h2>
<input type="radio" name="hardclass" value="No choice" checked style="display:none">
<div id="English1" style="display:none">
<input type="radio" name="hardclass" value="Englsh" id="English2">
<label for="English2">English</label>
</div>
<div id="Language1" style="display:none">
<input type="radio" name="hardclass" value="Language" id="Language2">
<label for="Language2">Language</label>
</div>
<div id="Math1" style="display:none">
<input type="radio" name="hardclass" value="Math" id="Math2">
<label for="Math2">Math</label>
</div>
<div id="Art1" style="display:none">
<input type="radio" name="hardclass" value="Art" id="Art2">
<label for="Art2">Art</label>
</div>
<div id="History1" style="display:none">
<input type="radio" name="hardclass" value="History" id="History2">
<label for="History2">History</label>
</div>
<div id="TechnologyComputers1" style="display:none">
<input type="radio" name="hardclass" value="TechnologyComputers" id="TechnologyComputers2">
<label for="TechnologyComputers2">Technology / Computers</label>
</div>
<div id="Geography1" style="display:none">
<input type="radio" name="hardclass" value="Geography" id="Geography2">
<label for="Geography2">Geography</label>
</div>
<hr>
<br>
<a href="JavaJavaAwesomeForm1.html">JavaJava</a>
<input type="text" value="Answer here" onFocus="changeValue(this)" onBlur="changeValueBack(this)" style="background-color: white"><hr>
<h2>Input a segment of html code into the box below!</h2><br>
<textarea rows="10" cols="30" id="inputhtml"></textarea>
<input type="button" value="test" onClick="innerChange(this)" style="text-color: blue;">
<div style="border: 2pt solid red; width: 500px; height: 500px;" id="testzone">
</div>
<div class="head">
<div style="text-align: right; padding: 5px;">
<h3 onMouseOver="onColor(this)" onMouseOut="offColor(this);" onClick="turnOn(options)" class="options">Options</h3>
</div>
</div>
<div>
<div id="options" style="content: dead; display: none;" class="options">
<table class="options" width="100%">
<tr id="right">
<td id="right" colspan="20">
<input type="button" value="Close Options" onClick="changeDisplay(options)" style="margin-top: 6px;">
</td>
</tr>
<!-- major gap between color headings and previous html -->
<tr id="center">
<td colspan="20">
<hr>
<h3>Text Colors</h3>
<hr>
</td>
</tr>
<!-- major gap between headings and color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: #ffffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff0000;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ff00;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000ff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff00ff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffff00;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #000000;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #70db93;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #5c3317;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #9f5f9f;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #b5a642;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #d9d919;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #a62a2a;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #8c7853;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #a67d3d;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #5f9f9f;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #d98719;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #b87333;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff7f00;" onClick="bodyColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: #42426f;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #5c4033;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #2f4f2f;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #4a766e;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #4f4f2f;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000ff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #000000;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #c0c0c0;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffaa77;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #cc00cc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000cc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffccff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffcc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #cccccc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccccff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: aqua;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: black;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: fuchsia;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: gray;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: green;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: lime;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: maroon;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: navy;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: olive;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: orange;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: purple;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: red;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: silver;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: teal;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: yellow;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: white;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: yellow;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: #ffff00;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff0000;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ff00;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ffff;" onClick="bodColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff00ff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000ff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #000000;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #c0c0c0;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffaa77;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #cc00cc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000cc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffccff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffcc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #cccccc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccccff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: #ffff00;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff0000;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ff00;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff00ff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000ff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #000000;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #c0c0c0;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffaa77;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #cc00cc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000cc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffccff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffcc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #cccccc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccccff;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyColor(this)">
</div>
</tr>
<!-- major gap between headings and color rows -->
<tr id="center" width="100%">
<td colspan="20">
<hr>
<h3>Background Colors</h3>
<hr>
</td>
</tr>
<!-- major gap between headings and color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: aqua;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: black;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: fuchsia;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: gray;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: green;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: lime;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: maroon;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: navy;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: olive;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: orange;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: purple;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: red;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: silver;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: teal;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: yellow;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: white;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: yellow;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyBColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: #ffff00;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff0000;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ff00;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff00ff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000ff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #000000;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #c0c0c0;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffaa77;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #cc00cc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000cc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffccff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #cccccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccccff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyBColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: aqua;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: black;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: fuchsia;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: gray;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: green;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: lime;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: maroon;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: navy;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: olive;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: orange;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: purple;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: red;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: silver;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: teal;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: yellow;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: white;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: yellow;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyBColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: #ffff00;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff0000;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ff00;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff00ff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000ff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #000000;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #c0c0c0;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffaa77;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #cc00cc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000cc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffccff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #cccccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccccff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyBColor(this)">
</div>
</tr>
<!-- gap between color rows -->
<tr id="center" width="100%">
<td>
<div class="box" style="background-color: #ffff00;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff0000;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ff00;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #00ffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ff00ff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000ff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #000000;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #c0c0c0;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffaa77;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #cc00cc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #0000cc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffccff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #cccccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccccff;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ffcccc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #ccffcc;" onClick="bodyBColor(this)">
</div>
<td>
<div class="box" style="background-color: #bb0077;" onClick="bodyBColor(this)">
</div>
</tr>
</table>
</div>
</div>
<div id="dead" style="display: none;"></div>
</body>
</html>
I figured out how to call elements from a different frame so i'm working on a new project. This project is a simple HTML editor that can display your HTML as a page. I know this has been done many times by many people but it's the next step for me.
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.
»
Go to Registration page
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
