Forum Moderators: open
What I want to do here is click on an element with an ID, and then click on another element which will give the last clicked element a new backgroundColor value. I merged them as so but it's not working. If you don't have PHP/local server just remove the PHP syntax.
- John
<?php
header("Content-type: application/xhtml+xml");
echo '<?xml version="1.0" encoding="UTF-8"?>
';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[var unknown;
window.onload=function() {
el=document.body.getElementsByTagName('*');
for(c=0;c<el.length;c++) {
el[c].onclick=function() {
unknown=this.id;
//alert(unknown);
}
}
}// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id // ***now changed to 'unknown' from script above!
// p - property
// v - value
//
function setstylebyid(p, v) {
var n = document.getElementById(unknown);
n.style[p] = v;
}
//]]>
</script>
</head><body>
<h1 id="header1">header</h1>
<div id="ha1">...</div>
<div id="hb2">...</div>
<div id="hc3">...</div><div onclick="setstylebyid('backgroundColor', '#f0f');">#f0f</div>
</body>
</html>
Right now I've in a static sense connected the dynamic ID detector and the dynamic style applier. Now all that is left (easier said then done of course) is to make the connection between the two individual scripts dynamic in and of itself.
So let me further elaborate on the goal of this combined script!
I am building a dynamic color picker. You click on the element (that has an ID) and then a color. Immediantly after clicking on the color the backgroundColor of the last selected ID (stored as var unknown) has it's backgroundColor property changed.
The color boxes themselves are only divisible elements with their own IDs. I figure if I name all the color "boxes" with the word 'color' I can adapt the dynamic ID detector to ignore ID's clicked that start or contain the string 'color' thus reserving the (var) 'unknown' and then if the ID of the second clicked element does contain the string (in it's ID) 'color' that it will take the last three letters in the ID's string (such as 'colorff0') it will use the last three letters in the ID's string to assign the new background color to the (var) unknown dynamic ID. I think I explained that pretty well and I'm going to take a serious crack at figuring this out!
So in a non-technical explanation...
You click the id 'hb2', and then the id 'colorff0'. The scripts ultimately change the backgroundColor of 'hb2' to '#ff0'.
- John
<?php
header("Content-type: application/xhtml+xml");
echo '<?xml version="1.0" encoding="UTF-8"?>
';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id // ***now changed to 'unknown' from script above!
// p - property
// v - value
//function setstylebyid(i, p, v) {
var n = document.getElementById(i);
n.style[p] = v;
}var unknown; // dynamic ID
window.onload=function() {
el=document.body.getElementsByTagName('*');
for(c=0;c<el.length;c++) {
el[c].onclick=function() {
unknown=this.id;
//alert(unknown);setstylebyid([unknown],'backgroundColor', '#f0f');
}
}
}
//]]>
</script>
<style type="text/css">
#f0f {background: #f0f;}
#f00 {background: #f00;}
#00f {background: #00f;}
</style>
</head><body>
<h1 id="header1">header</h1>
<div id="ha1">#ha1</div>
<div id="hb2">#hb2</div>
<div id="hc3">#hc3</div><div id="f0f">#f0f</div>
<div id="f00">#f00</div>
<div id="00f">#00f</div></body>
</html>
- John
I think I have to figure out how to assign a matching ID's color (from it's ID) to the previous ID (currently assigned to unknown (var)) ... might have to adapt the dynamic ID detector...
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[
var unknown; // dynamic IDwindow.onload=function() {
el=document.body.getElementsByTagName('*');
for(c=0;c<el.length;c++) {
el[c].onclick=function() {if (this.id.match('^color')) {alert('Success!');}
else {alert('no match');}
}
}
}
//]]>
</script>
<style type="text/css">
h2 {background-color: #ddd; margin: 16px 0px 0px 0px;}
div {background-color: #ccc;}
</style>
</head><body>
<h2>IDs below without color as ID attribute's value</h2>
<div id="ha1">#ha1</div>
<div id="hb2">#hb2</div>
<div id="hc3">#hc3</div><h2>ID's below contain the string 'color' in the value of their ID attribute</h2>
<div id="colorf0f"">#f0f</div>
<div id="colorf00">#f00</div>
<div id="color00f">#00f</div><h2>ID's below contain 'color' in string but not at the begining and <i>should</i> fail.</h2>
<div id="acolorf0f"">#f0f</div>
<div id="acolorf00">#f00</div>
<div id="acolor00f">#00f</div></body>
</html>
So right now if you open this up in Firefox first click on any of the colors under the second/middle header, it should give you two alerts. Secondly click on one of the ids under the first header. It is intended to give the unknown id (the last id that did not start with 'color' in it's value) the backgroundColor from the color assigned to the color variable after initially clicking on a color id. However I'm getting this error and I've been working on this for twelve hours now so my mind is starting to go numb...
Error: n.style has no properties
Line: 54
Anyway here is my latest code...
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Case</title>
<script type="text/javascript">
//<![CDATA[
//
// dynamic ID
var unknown;//
// Determine the ID of the element clicked.
//
window.onload=function() {
el=document.body.getElementsByTagName('*');
for(c=0;c<el.length;c++) {
el[c].onclick=function() {
unknown=this.id;
alert(unknown);//
// Is ID clicked intended to set a color?
//
if (this.id.match('^color'))
{
var mycolor = this.id;
color = mycolor.substr(5);
//
//Confirm the color the var color has been assigned below.
alert('The color variable is currently set to #' + color);
}else if (unknown == undefined) {alert('you have not choosen an ID to give a bg color to!');}
else
{
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id // ***now changed to 'unknown' from script above!
// p - property
// v - value
//function setstylebyid(i, p, v) {
var n = unknown;
n.style[p] = v;
}setstylebyid([unknown],'backgroundColor', [color]);
} //end else
}
}
}
//]]>
</script>
<style type="text/css">
h2 {background-color: #ddd; margin: 16px 0px 0px 0px;}
div {background-color: #ccc;}
</style>
</head><body>
<h2>IDs below without color as ID attribute's value</h2>
<div id="ha1">#ha1</div>
<div id="hb2">#hb2</div>
<div id="hc3">#hc3</div><h2>ID's below contain the string 'color' in the value of their ID attribute</h2>
<div id="colorf0f"">#f0f</div>
<div id="colorf00">#f00</div>
<div id="color00f">#00f</div><h2>ID's below contain 'color' in string but not at the begining and <i>should</i> fail.</h2>
<div id="acolorf0f"">#f0f</div>
<div id="acolorf00">#f00</div>
<div id="acolor00f">#00f</div></body>
</html>
