Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Dynamic Creating of a button

Posted on 2002-03-12
15
Medium Priority
?
787 Views
Last Modified: 2010-08-05
I am trying to create a button dynamically using vbscript on an HTML page. However I cannot seem to capture the onclick event. The button is displayed correctly, but clicking it has no effect.

The code I am using to create the button is as follows:

Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
oField.onclick="msgbox(1)"
oDoc.insertAdjacentElement "afterBegin", oField

I have also tried using oField.onclick=GetRef ("msgbox(1)"), but it makes no difference

I am using IE 5.5 BTW

Thanks in advance.
0
Comment
Question by:JEGB
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
15 Comments
 
LVL 14

Expert Comment

by:avner
ID: 6856228
<script>
function createButton()
     {
     var oField = document.createElement("INPUT")
     oField.type = "BUTTON"
     oField.name = "cmd1"
     oField.value = "Remove"
     oField.onclick="msgbox(1)"
     oField.text="b";
     document.getElementById("addB").appendChild(oField);
     }


</script>
<button onclick="createButton()">Create Button </Button>
<DIV id="addB"> </DIV>
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6856268
sub functionname()
   msgbox("check")
end sub


with

oField.onclick=functionname

CJ
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6856625
Where does the script run, client or server?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 23

Expert Comment

by:b1xml2
ID: 6856717
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
'you need to use the SET keyword here
Set oField.onclick="msgbox(1)"
oDoc.insertAdjacentElement "afterBegin", oField
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6856728
amendment
=========
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
'you need to use the SET keyword here
Set oField.onclick= GetRef("myClick")
oDoc.insertAdjacentElement "afterBegin", oField

Function myClick()
 Set el = document.all[event.srcElement.sourceIndex]
 'blah blah

End Function
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6856818
you might want to set the onclick event AFTER inserting it into the document e.g. I have noticed that VBScript can be a bit buggy when dealing with the DOM.

'you need to use the SET keyword here
oDoc.insertAdjacentElement "afterBegin", oField
Set oField.onclick= GetRef("myClick")

0
 

Author Comment

by:JEGB
ID: 6856914
It is a client side script.

The SET keyword does not work as oField.onclick is not an object, but an event of an object. I have tried putting the code for the onclick event after creating the element, but this makes no difference.
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6857137
You can assign the onclick event to the function you want via the GetRef() method

e.g.
Set Window.OnLoad = GetRef("init")

Function init()


End Function

here the onload is an event
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6857140
that is why you have to use the SET keyword,

from SDK
==========
In other scripting and programming languages, the functionality provided by GetRef is referred to as a function pointer, that is, it points to the address of a procedure to be executed when the specified event occurs.

The following example illustrates the use of the GetRef function.

<SCRIPT LANGUAGE="VBScript">

Function GetRefTest()
   Dim Splash
   Splash = "GetRefTest Version 1.0"   & vbCrLf
   Splash = Splash & Chr(169) & " YourCompany 1999 "
   MsgBox Splash
End Function

Set Window.Onload = GetRef("GetRefTest")
</SCRIPT>
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6857160
The following script shows how you can assign functions to events
==================================
<html>
<head>
<title>VBScript</title>
<script language="vbscript">
Set window.onload = GetRef("init")

Function init()
Dim oData, oField
Set oData = document.all.data
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
oData.insertAdjacentElement "afterBegin", oField
Set oField.onclick = GetRef("showme")
End Function

Function showme()
msgbox "You Clicked On Me"

End Function

</script>
</head>
<body>
<div id="data"></div>
</body>
</html>
1
 
LVL 23

Expert Comment

by:b1xml2
ID: 6857164
Note, you can't send in parameters in the procname...
0
 

Author Comment

by:JEGB
ID: 6857206
Thanks a lot b1xml2 for your help, your suggestion works, unfortunately, I do need to send in parameters, so I'm still stuck.  Do you know if this is possible, if not I'll simply accept your answer as it does solve the problem i orginally asked.
0
 
LVL 23

Accepted Solution

by:
b1xml2 earned 800 total points
ID: 6857265
<html>
<head>
<title>VBScript</title>
<script language="vbscript">
Set window.onload = GetRef("init")

Function init()
Dim oData, oField
Set oData = document.all.data
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
oField.setAttribute "Tag", 1
oData.insertAdjacentElement "afterBegin", oField
Set oField.onclick = GetRef("showme")
End Function

Function showme()
msgbox "The Param Is " & window.event.srcElement.getAttribute("Tag")
End Function

</script>
</head>
<body>
<div id="data"></div>
</body>
</html>

what you could do is use the DOM, populate your OWN attribute with a value, and call that up inside the function
0
 

Author Comment

by:JEGB
ID: 6857302
Cheers b1xml2, works a treat, your a star :)
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6857358
welcome =)
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question