How do I create a div element with an id that is dynamically used when calling a method on the div element?
Question
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.
2 answers
solution1
1 ACCPTED 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
});
solution2
1 2013-12-05 06:03:08
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.