How do I create a div element with an id that is dynamically used when calling a method on the div element?

Question

How do I create a div element with an id that is dynamically used when calling a method on the div element?

1.1k views Asked by Krish At 20 November 2024 at 00:45

First of all I am new to JavaScript. I am using the aloha editor. I want to create text areas dynamically using div tags by assigning id's for each div. Using that id I have to call a method, which is the aloha method. Everything goes fine but the aloha method is not getting the id. On the browser I am getting an empty space rather than an aloha box.

Here is my code..

javascript

     var screen=document.getElementById('addScreens');
     num_q=document.getElementById('numquest').value;

     for(i=0;i<num_q;i++) {   
         div1=document.createElement("div");
         div1.id="multicolumn";
         screen.appendChild(div1);
     }

     //aloha
     $(document).ready(function() {
         $('#multicolumn').aloha(); //multicolumn is not defined
     });

**HTML**

<html>
<body>
 <br><input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
     <input type="button" value="submit" onclick="getFields();">
<div id="addScreens"> <br> </div>
</body>
</html>

<style type="text/css">

            #multicolumn {

                -webkit-column-width:300px;
                -webkit-column-gap:30px;
                -moz-column-width:300px;
                -moz-column-gap:30px;
                column-width:100px;
                column-gap:30px;
                      width:550px;
                height: 150px;
                margin: 0 auto;
                      overflow-x: auto;
                      overflow-y: auto;
                   }

            </style>

So, how do I have the id of the dynamically created div's accessible everywhere?? Thanks in advance for any ideas.

Original Q&A

There are 2 answers

Nicolas ABRIC On 05 December 2013 at 06:03

From the code you have shared no multicolumn div will be created at all because the value of your input field is never set to a numeric value. Considering this line in your code

<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>

and calling this line in JS

num_q=document.getElementById('numquest').value;

will result in num_q evaluated to an empty string. Hence your loop won't have any effect. You could try to give a default value for your input and access its value a bit differntly with something like this :

<input type="text" name = "numquest" id ="numquest" value="1" size="5" style="" disabled>
//JS
num_q= parseInt(document.getElementById('numquest').value, 10);

On Top of that I must agree with Saravana it will be a better approach to put everything in the $(document).ready function.

**Saravana Kumar** · Accepted Answer · 2013-12-05 05:55:27

You can create the div inside $document ready and then call aloha on it. See the below code for dynamic id generation

 //aloha
    $(document).ready(function() {
         var screen=document.getElementById('addScreens');
         var num_q=document.getElementById('numquest').value;
         for(i=0;i<num_q;i++)
         {   
            var div1=document.createElement("div");
            div1.id = "multicolumn_" + i;
            screen.appendChild(div1);
            $('#' + div1.id).aloha(); 
         }
         //multicolumn is not defined
    });

TechQA.

How do I create a div element with an id that is dynamically used when calling a method on the div element?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in ALOHA-EDITOR

Popular Questions

Popular Tags

Trending Questions