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

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

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

Post 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>
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

JavaScript has a RegExp object. Beyond that (finding if the id has "color" in it), your post lost me.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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");
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Have you read the manual superdezign has pointed to you? Your code is syntaxly wrong...
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Use the "match" method of the string object.
http://www.regular-expressions.info/javascript.html
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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>
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

You didn't use the ^ ...
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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>
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

You could keep it simple (and fast) by using substr().
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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>
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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>
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Ops, double post :(
Last edited by VladSun on Mon Oct 01, 2007 7:38 am, edited 1 time in total.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post 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];
			}
		}
	}
}
There are 10 types of people in this world, those who understand binary and those who don't
Post Reply