Page 1 of 2

Detect if string is part of string value of an ID value?

Posted: Sun Sep 30, 2007 6:11 pm
by JAB Creations
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?

Code: Select all

<?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>

Posted: Sun Sep 30, 2007 7:04 pm
by superdezign
JavaScript has a RegExp object. Beyond that (finding if the id has "color" in it), your post lost me.

Posted: Sun Sep 30, 2007 7:40 pm
by JAB Creations
Well I could use ^ to detect color at the beginning of the ID's value, but I suck with regular expressions.

Here is what I'm messing with though every example online is overly complex. I think I have some clue how to do this in PHP.

Code: Select all

var reg = 'color';
if (reg(^unknown))
  alert(unknown + " has color in the ids value")
else
  alert(unknown + " is not a color based id");

Posted: Sun Sep 30, 2007 8:18 pm
by VladSun
Have you read the manual superdezign has pointed to you? Your code is syntaxly wrong...

Posted: Sun Sep 30, 2007 8:25 pm
by JAB Creations
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.

Posted: Sun Sep 30, 2007 8:34 pm
by VladSun
Use the "match" method of the string object.
http://www.regular-expressions.info/javascript.html

Posted: Sun Sep 30, 2007 9:08 pm
by JAB Creations
See, I just need a good example. Thank you very much! 8)

Code: Select all

<?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')) {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" onclick="alert(this.id);">#f0f</div>
<div id="colorf00">#f00</div>
<div id="color00f">#00f</div>

</body>
</html>

Posted: Sun Sep 30, 2007 9:14 pm
by VladSun
You didn't use the ^ ...

Posted: Sun Sep 30, 2007 9:18 pm
by JAB Creations
You're correct! Thankfully that part only took me two seconds...

Code: Select all

<?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')) {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" onclick="alert(this.id);">#f0f</div>
<div id="colorf00">#f00</div>
<div id="color00f">#00f</div>

</body>
</html>

Posted: Sun Sep 30, 2007 9:54 pm
by JAB Creations
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?

Posted: Sun Sep 30, 2007 9:55 pm
by superdezign
You could keep it simple (and fast) by using substr().

Posted: Sun Sep 30, 2007 10:05 pm
by JAB Creations
Awesome-sauce!

Code: Select all

<?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>

Posted: Sun Sep 30, 2007 11:53 pm
by JAB Creations
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! :)

Code: Select all

<?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>

Posted: Mon Oct 01, 2007 7:33 am
by VladSun
Ops, double post :(

Posted: Mon Oct 01, 2007 7:36 am
by VladSun
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 ;)

Code: Select all

window.onload=function() 
{
	elements = document.body.getElementsByTagName('*');
	for(i=0; i < elements.length; i++) 
	{
		elements[i].onclick = function() 
		{
			re = /^color([0-9abcdef]+)/i;
			result = this.id.match(re);
			if (result)
			{
				this.style.backgroundColor = result[1];
			}
		}
	}
}