Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
I have a java-script function which will generate buttons dynamically in my html page.
My java-script is:
 
<script type="java/script">
            
            function myFunc(target_div,num_buttons) {
                var buttons = "";
                for (var i = 0; i < num_buttons; i++) {
                    //                             added class ----------------v
                    buttons += '<input type="button" id="button_' + i + '" class="mybuttons" value="button_' + i + '"></input>';
                }
                target_div.html(buttons);
                var doButtonPress = function(i) {
                    alert(i); // I actually do something more complicated here, but it's not important now
                }
 
                //yes, mybuttons exist 
                $('.mybuttons').click(function() {
                    doButtonPress(this.id.replace('button_', ''));
                    //this.id.replace('button_', '') <- returns i value
                });
            }
        </script>
And in the HTML is:
<body  önload="myFunc(this,'10');">
        <form>
            <div id="mydiv" ></div>
        </form>
        
        <?php
        // put your code here
        ?>
    </body>
I don't know why this not calling the myFunc(this, '10'). Is the any problem to pass id and number by my code ?
Posted 27-Apr-13 1:20am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

First the body tag should be like this.
 

 

<body  önload="myFunc(this,'10');">
 
this should be like this
 
<body  onload="myFunc(this,'10');">
 
you write "önload" it should be "onload"
 

 
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

add this
	$(function(){
	     $('.mybuttons').click(function() {
	          doButtonPress(this.id.replace('button_', ''));
		//this.id.replace('button_', '') <- returns i value
	     });
         })
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

Try this
function myFunc(target_div,num_buttons) {
	function getBtn(i) {
		var btn = document.createElement("input");
		btn.setAttribute("type","button");
		btn.setAttribute("value","button_"+i);
		btn.className = "mybuttons";
		btn.setAttribute("id","button_"+i);
		return btn;
	}
	function doButtonPress(k){
		alert(k);
	}
	for(var i=0; i<num_buttons; i++) {
		var btn = getBtn(i);
		btn.onclick = function(){
			doButtonPress(this.id.replace('button_', ''));
		}
		target_div.appendChild(btn);
	}
}
If you are adding the id and class to the button for using it with doButtonPress() only then following might be an easier solution.
function myFunc(target_div,num_buttons) {
	function doButtonPress(k){
		alert(k);
	}
	function getBtn(i) {
		var btn = document.createElement("input");
		btn.setAttribute("type","button");
		btn.setAttribute("value","button_"+i);
		btn.specialProperty = i; //Just add a special property
		btn.onclick = function(){
			doButtonPress(this.specialProperty);
		}
		return btn;
	}
	for(var i=0; i<num_buttons; i++) {
		target_div.appendChild(getBtn(i));
	}
}
 
Accompanying HTML
<div id="mydiv" ></div>
<script type="text/javascript">
	myfunc(document.getElementById("mydiv"),10);
</script>
  Permalink  
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 George Jonsson 215
1 Kornfeld Eliyahu Peter 169
2 Zoltán Zörgő 139
3 PIEBALDconsult 130
4 OriginalGriff 120
0 OriginalGriff 6,165
1 DamithSL 4,658
2 Maciej Los 4,107
3 Kornfeld Eliyahu Peter 3,649
4 Sergey Alexandrovich Kryukov 3,342


Advertise | Privacy | Mobile
Web03 | 2.8.141220.1 | Last Updated 22 May 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100