Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

create button with createElement 1

Status
Not open for further replies.
gerases

gerases

Programmer
Apr 27, 2006
29
US
All right, a new problem.

I'm trying to create a button with with document.createElement but IE refuses to work right.

Here's the code:

basicElem = document.createElement("INPUT");
basicElem.setAttribute("type", "button");
basicElem.setAttribute("value", "edit");
basicElem.setAttribute("class", "buttonStyle1");
basicElem.setAttribute("onClick", "alert('ttt')");

The button is shown but neither "edit" works nor the style is honored.

I googled this and found out that one can create an element in IE this way:

basicElem = document.createElement("<input type='button' value='Edit' onClick=alert('ddd') class="buttonStyle1" />");

That DOES work but I would hate to resort to this "hack". Am I missing something in the original syntax? It works fine in Firefox, etc.
 
Sort by date Sort by votes
This is how you create a button with css.
As for setting an event using setAttribute save yourself the trouble trying since it's not supported anyway.
Code: 
<html>
<head>

<script type="text/javascript">
<!--//
function createButton() {
	var target = document.getElementById("target");

	var button = document.createElement("INPUT");
	button.setAttribute("type", "button");
	button.setAttribute("value", "edit");

	// button.setAttribute("class", "button");     // Mozilla
	// button.setAttribute("className", "button"); // IE only

	button.id = "button"; // better solution

	target.appendChild(button);
}
//-->
</script>

<style type="text/css">
<!--
#button {
    border: 1px dashed #000000;
}
-->
</style>

</head>
<body onLoad="createButton()">

<span id="target"></span>

</body>
</html>

M. Brooks
 
Upvote 0 Downvote
Very nice. This is indeed working.

That's crazy that IE uses className... How about the "style" attribute? How do you set that in IE?

So, there's no cross-browser way of setting onclick when creating a button dynamically?
 
Upvote 0 Downvote
That's crazy that IE uses className... How about the "style" attribute?
How do you set that in IE?
Click to expand...
Code: 
button.style.width = "150px";
So, there's no cross-browser way of setting onclick when creating a button dynamically?
Click to expand...
Not that I know of. Hopefully there will be a day that all browsers follow the same standards.

M. Brooks
 
Upvote 0 Downvote
Cool. Just tried it and it works perfectly both in IE and FF.
Thank you! Your comments were extremely helpful.
 
Upvote 0 Downvote
I don't know if this is cross-browser on not, but it's a little trick I found (reading the code for the DynArch JS calendar) for setting an event handler for on object.
Code: 
basicElem["onclick"] = function() {alert('ttt')};
Note that "onclick" contains NO capital letters.

It works fine in IE.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Yep, you're absolutely right. That's what I ended up doing. I tried to play with attachEvent (IE only) and addEventListener (everything but IE) and onclick worked best.

Thank you!
 
Upvote 0 Downvote
You're welcome. I just ran across that and used it myself a couple of weeks ago, and you're the second person that asked a question where it came in useful since then.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
173
gmmastros
gmmastros
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
560
Rayj0000
Rayj0000
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
551
berkshirea
berkshirea
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
172
xwb
xwb
dvannoy
  • Locked
  • Question
Enable ASP button
Replies
1
Views
147
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top