Detect if an attribute exists in an element?

Forum Moderators: open

Message Too Old, No Replies

Detect if an attribute exists in an element?

JAB Creations

2:20 am on Oct 2, 2007 (gmt 0)

How do we detect if an attribute exists within an element? For example I want to detect if the 'onclick' JavaScript event attribute exists. Here is my not working example...

if (document.getElementById("myidhere").onclick) {alert('Your element does have an onclick attribute.')}

- John

Drag_Racer

9:27 am on Oct 2, 2007 (gmt 0)

try...

if (document.getElementById("myidhere").onclick!= null){ do something }

you do realise this may only work on inline declarations. I think listeners defined with 'attachEvent' are not accessable as they are 'out of scope' with the window object.

this may be of help?
[dean.edwards.name...]

JAB Creations

7:32 pm on Oct 2, 2007 (gmt 0)

This does not seem to be working either...

if (myidhere.hasAttribute('onclick')) {alert('this element has an onclick attribute'); return true;}

Nor this...

if (document.getElementById(myidhere).hasAttribute('onclick')) {alert('this element has an onclick attribute');}

Suggestions?

- John

Fotiman

7:57 pm on Oct 2, 2007 (gmt 0)

Works for me...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
 <title></title> 
</head> 
<body> 
<div id="container" onclick="alert('hello');"> 
</div> 
<script type="text/javascript"> 
window.onload = function() { 
  if (document.getElementById('container').onclick) { 
    alert('onclick defined'); 
  } 
} 
</script> 
</body> 
</html>

JAB Creations

8:18 pm on Oct 2, 2007 (gmt 0)

I was applying this in the wrong part of the script.

Here is the working version though now my issue is returning the script in a way that allows the element with the onclick attribute to continue executing it's event.

To test the desired function rename the start function to something like s1tart, save, reload, and click on the bottom header. That is the desired behavior of that script; I'd like to achieve that while also having the color editor work. How do I correctly return the color editor script or am I approaching this the wrong way?

- 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[
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setstylebyid(i, p, v) {
var n = document.getElementById(i);
n.style[p] = v;
}
// Color Editor
function coloreditor() {
result = null;
elements = document.body.getElementsByTagName('*');
for(i=0; i < elements.length; i++)
{
elements[i].onclick = function()
{
re = /^color([0-9abcdef]+)/i;
if (this.hasAttribute('onclick')) {alert('your id has an onclick so return false'); return}
else {if (this.id.match('^color'))
{
var mycolor = this.id;
result = mycolor.substr(5);
}
}
if (result == null) {return true;}
else if (this.id &&!this.id.match('^color'))
{
this.style.backgroundColor = '#' + result;
}
}
}
}
function start() {
coloreditor();
}
window.onload = start;
//]]>
</script>
<style type="text/css">
h2 {background-color: #ddd; margin: 16px 0px 0px 0px;}
div {background-color: #ccc;}
#prompt {
background-color: #000000;
border: #fff solid 1px;
color: #a7a68f;
display: none;
height: 398px;
left: 50%;
margin-top: -198px;
margin-left: -40%;
position: absolute;
top: 50%;
width: 80%;
z-index: 3;
}
</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>
<h3 id="header3end" onclick="setstylebyid('prompt', 'display', 'block');">this header should open a new layer onclick!</h3>
<div id="prompt">
<p>This is a layer that is supposed to be hidden by default.
Executing the script to display this layer while setting colors is our goal.</p>
</div>
</body>
</html>

Fotiman

8:51 pm on Oct 2, 2007 (gmt 0)

Looks like you want to be checking if the element already has an onclick event handler *before* you set it to your function.

Maybe something more like this:


elements = document.body.getElementsByTagName('*'); 
for(i=0; i < elements.length; i++) 
{ 
  if (!elements[i].onclick) { // if element doesn't have an onclick handler 
    elements[i].onclick = function() // then define it to use this one 
    { 
      re = /^color([0-9abcdef]+)/i; 
      if (this.id.match('^color')) { 
        var mycolor = this.id; 
        result = mycolor.substr(5); 
      }  
    } 
  } 
}

JAB Creations

9:49 pm on Oct 2, 2007 (gmt 0)

Thanks Fotiman, here is what I have right now...

- 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[
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setstylebyid(i, p, v) {
var n = document.getElementById(i);
n.style[p] = v;
}
// Color Editor
function coloreditor() {
result = null;
elements = document.body.getElementsByTagName('*');
for(i=0; i < elements.length; i++)
{
if (!elements[i].onclick) { // if element doesn't have an onclick handler
elements[i].onclick = function() // then define it to use this one
{
re = /^color([0-9abcdef]+)/i;
if (this.id.match('^color')) {
var mycolor = this.id;
result = mycolor.substr(5);
}
if (result == null) {return true;}
else if (this.id &&!this.id.match('^color'))
{
this.style.backgroundColor = '#' + result;
}
}
}
}
}
function start() {
coloreditor();
}
window.onload = start;
//]]>
</script>
<style type="text/css">
h2 {background-color: #ddd; margin: 16px 0px 0px 0px;}
div {background-color: #ccc;}
#prompt {
background-color: #000000;
border: #fff solid 1px;
color: #a7a68f;
display: none;
height: 398px;
left: 50%;
margin-top: -198px;
margin-left: -40%;
position: absolute;
top: 50%;
width: 80%;
z-index: 3;
}
</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>
<h3 id="header3end" onclick="setstylebyid('prompt', 'display', 'block');">this header should open a new layer onclick!</h3>
<div id="prompt">
<p>This is a layer that is supposed to be hidden by default.
Executing the script to display this layer while setting colors is our goal.</p>
</div>
</body>
</html>

JAB Creations

10:41 pm on Oct 2, 2007 (gmt 0)

Here is the next step in the editor's evolution. :)

- 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[
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setstylebyid(i, p, v) {
var n = document.getElementById(i);
n.style[p] = v;
}
// Color Editor
function coloreditor() {
result = null;
elements = document.body.getElementsByTagName('*');
for(i=0; i < elements.length; i++)
{
if (!elements[i].onclick) { // if element doesn't have an onclick handler
elements[i].onclick = function() // then define it to use this one
{
re = /^color([0-9abcdef]+)/i;
if (this.id.match('^color')) {
var mycolor = this.id;
result = mycolor.substr(5);
}

if (result == null) {return true;}
else if (this.id &&!this.id.match('^color'))
{
if (document.getElementById('myselect').selectedIndex == 0) {this.style.backgroundColor = '#' + result;}
else if (document.getElementById('myselect').selectedIndex == 1) {this.style.color = '#' + result;}
else {alert('You seem to be missing a form.');}
}
}
}
}
}
function start() {
coloreditor();
}
window.onload = start;
//]]>
</script>
<style type="text/css">
h2 {background-color: #ddd; margin: 16px 0px 0px 0px;}
div {background-color: #ccc;}
#prompt {
background-color: #000000;
border: #fff solid 1px;
color: #a7a68f;
display: none;
height: 398px;
left: 50%;
margin-top: -198px;
margin-left: -40%;
position: absolute;
top: 50%;
width: 80%;
z-index: 3;
}
</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>
<form>
<fieldset>
<select id="myselect">
<option>Background Color</option>
<option>Font Color</option>
</select>
<div id="colorf0f"">#f0f</div>
<div id="colorf00">#f00</div>
<div id="color00f">#00f</div>
</fieldset>
</form>
<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>
<h3 id="header3end" onclick="setstylebyid('prompt', 'display', 'block');">this header should open a new layer onclick!</h3>
<div id="prompt">
<p>This is a layer that is supposed to be hidden by default.
Executing the script to display this layer while setting colors is our goal.</p>
</div>
</body>
</html>

Fotiman

3:49 pm on Oct 3, 2007 (gmt 0)

I think this is what you're trying to do:


function coloreditor() { 
  elements = document.body.getElementsByTagName('*'); 
  for(i=0; i < elements.length; i++) { 
    if (!elements[i].onclick) { // if element doesn't have an onclick handler 
      elements[i].onclick = function() { // then define it to use this one 
        var result = null; 
        if (this.id && this.id.match('^color')) { 
          var mycolor = this.id; 
          result = mycolor.substr(5); 
        } 
        if (result == null) {return true;} 
        if (document.getElementById('myselect').selectedIndex == 0) {this.style.backgroundColor = '#' + result;} 
        else if (document.getElementById('myselect').selectedIndex == 1) {this.style.color = '#' + result;} 
        else {alert('You seem to be missing a form.');       
      } 
    } 
  } 
}