Solved

Dynamic Creating of a button

Posted on 2002-03-12
15
713 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
Independent Software Vendors: 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>
0
 
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 200 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

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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Embedding Tags in a restricted UI 6 31
Selected in an option list 13 26
send email part1 9 40
HTML auto refresh to another site 4 29
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

749 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