This script below will alert you to the value of the ID attribute or alert that it does not have an ID.
What I would like to do is detect if the ID contains the string 'color' and what I've been attempting doesn't seem to work. I'm trying stuff like if (unknown='color') and such. I'm trying to guide the script towards eventually effecting any element that has an ID but does not have an ID with the string 'color' in it. So 'colorf0f' for example would be color=true, 'ha1' would be color=false, and no id would be id=false. Does this make sense?
<?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 ID
window.onload=function() {
el=document.body.getElementsByTagName('*');
for(c=0;c<el.length;c++) {
el[c].onclick=function() {
// test for attribute ?
if (this.id) {unknown=this.id; alert(unknown);}
else {alert('no id on this element');}
}
}
}
//]]>
</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" onclick="alert(this.id);">#f0f</div>
<div id="colorf00">#f00</div>
<div id="color00f">#00f</div>
</body>
</html>
I did read the page, unless I already have a good idea of how to apply syntax I hardly can do any better then any examples I come across. I'm a designer, not a developer so learning this scripting/programming language for me is effective in replication even if it's only done at a partial level. Unfortunately the examples I'm coming across are overly complex. This approach is like going skinny dipping in Berkley Pit Lake in Butte Montana. If I had a good example (share a link please) then I might be able to figure out how to replicate it on my own.
If ^ is used to detect string beginning with a string what do I use to select a string after a string? So for example how do I select the string after the 'color' string in an ID? What symbol do I use? Where is a list of the symbols used for regular expressions?
<?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 ID
window.onload=function() {
el=document.body.getElementsByTagName('*');
for(c=0;c<el.length;c++) {
el[c].onclick=function() {
if (this.id.match('^color')) {var mycolor = this.id; color = mycolor.substr(5); alert('You have selected the ' + mycolor + ' ID with a color of ' + color);
}
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" onclick="alert(this.id);">#f0f</div>
<div id="colorf00">#f00</div>
<div id="color00f">#00f</div>
</body>
</html>
Ok so here is the entire script (very roughly). I'm just trying to get it to work minimally before I smooth the rough edges out. From how I have the script organized you first have to choose a color (click on any of the colors under the second/middle header. Then click on an ID to assign that color to as a background color. In Firefox I get the following error...
Error: n.style has no properties
Line: 54
Here is the code, what do I need to fix to have the color assigned to the var color to apply to the currently assigned ID unknown? Thanks for all your help so far!
<?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>
I strongly recommend you to change your writing style... I mean - proper number of tab spacing, new lines after each statement, use {} even for single line statements, proper variable naming, etc. It will help you