ansaurus

Question

How to pass parameter in the newElement.setAttribute in javascrip

Answer 1

A:

    function addElement(tag_type, target, parameters) {        
        var newElement = document.createElement(tag_type);        

        //Add parameters        
        if (typeof parameters != 'undefined') {        
          for (parameter_name in parameters) { 
               newElement[parameter_name] = parameters[parameter_name];
          } 
        }        

        //Append element to target        
        document.getElementById(target).appendChild(newElement);        

        if (document.getElementById('txthidden').value == "") {         
          document.getElementById('txthidden').value = 1;        
        } else {        
           document.getElementById('txthidden').value = parseInt(document.getElementById('txthidden').value) + parseInt(1);        
        }        
     }

Change this line in your html to this

<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag' + document.getElementById('txthidden').value, 'name':'my_input_tag' + document.getElementById('txthidden').value, 'type':'text', 'value':'txt2','size':'5'}); return false;" value="Add Input Tag" />

Here is a litle demo http://jsbin.com/emiza4/2

John Hartsock 2010-10-23 05:43:44

He needs a counter appended after the name. You can use the value of `txthidden` for that.

ArtBIT 2010-10-23 05:46:55

yes, thank you for your replay . i am passing the textbox name in the button On click event .how to pass the textbox box value as parameter. <input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag1', 'name':'my_input_tag', 'type':'text', 'value':'txt2','size':'5'}); return false;" value="Add Input Tag" />

Meena 2010-10-23 06:01:07

@Meena ... if you notice I modified your 'for...loop' This modification will take the associative array you pass in as a parameter and populate the corresponding values in your new element. If you pass {id: "mynewID1"} the element that is created will have the and id = "mynewID1" any valid property will populate in the new element such as; style, name, value...etc...

John Hartsock 2010-10-23 06:05:53

No it show error can you explain how to assign txthidden this value to the parameter

Meena 2010-10-23 06:40:15

@Meena ... Look at the input tag I coded in my answer.... Basically i populate your associative array with id: 'my_input_tag' + document.getElementById('txthidden').value

John Hartsock 2010-10-23 06:45:47

Thank you so much its working fine

Meena 2010-10-23 06:58:46

Is it possible to insert the line break after every textBox

Meena 2010-10-23 08:05:16

after appending the element append a br tag too: `document.getElementById(target).appendChild(document.createElement("br"));`

galambalazs 2010-10-23 15:37:12

Answer 2

A:

You can do a much clearer solution. You can save the current number of input fields in a property of the function (instead of a hidden input field).

Also you can create two function as a separation of concerns and modularity addElement and addInput, such as addInput will be a special case for addElement but you have to type less if you want to call it:

// creates a child element to a given parent
function addElement(tag, target, params) {
    var el = document.createElement(tag);
    // Add parameters
    if (typeof params != 'undefined') {
        for (var parameter in params) {
          if (params.hasOwnProperty(parameter)) {
            el[parameter] = params[parameter];
          }
        }
    }

    // Append element to target
    document.getElementById(target).appendChild(el);
}

// creates an <input> child to a given target
function addInput(target, id, type, value, size) {
  var params = {
    id:    id + addInput.cnt,
    name:  id + addInput.cnt,
    type:  type || "text", 
    value: value,
    size:  size
  };
  addElement("input", target, params);
  addInput.cnt++;
}

addInput.cnt = 1;

HTML

onclick="addInput('targetTag', 'my_input_tag', 'text', 'txt2', '5');"

galambalazs 2010-10-23 07:17:35

ansaurus

tags:

views:

answers:

How to pass parameter in the newElement.setAttribute in javascrip

related questions