We Keep Coding

Text and Input are not on the same line

I am trying to create an "on an off switch" for a project where I can get a questionnaire group of elements. When you run the following code, you will see a div appear on the screen in a group of elements. The text is above the checkbox, I need them to be side by side. Any ideas?
var bigDiv = document.createElement("div")
var fem = document.createElement("P");
var t = document.createTextNode("FooText");
var femI = document.createElement("INPUT");
bigDiv.style.display = 'block';
fem.appendChild(t);
bigDiv.appendChild(fem);
femI.setAttribute("type", "checkbox");
bigDiv.appendChild(femI);
bigDiv.setAttribute("id", "demChoosing")
document.body.appendChild(bigDiv);
P.S - the key words 'fem' and 'demChoosing' don't mean anything

The reason for that is simple: p elements are rendered as block-elements. So they use the whole available width. You can try to set the display type to "inline" or "inline-block" to put the p tag and the input tag in the same line.
var bigDiv = document.createElement("div")
var fem = document.createElement("P");
var t = document.createTextNode("FooText");
var femI = document.createElement("INPUT");
bigDiv.style.display = 'block';
fem.appendChild(t);
bigDiv.appendChild(fem);
femI.setAttribute("type", "checkbox");
fem.setAttribute('style', 'display: inline-block;')
bigDiv.appendChild(femI);
bigDiv.setAttribute("id", "demChoosing")
document.body.appendChild(bigDiv);

create div, h3 using for loop and insert array variable in javascript

I am working on a web application in which I have to fill user friend list using JavaScript. I used the following code to perform that, but I don't get any name inside it and only div are created I need to create heading also. How to add heading using javascript and fill value in it?
$(document).ready(function(){
var name = ["Amar", "rahul", "vinay"];
var hobby=["aaa","bbb","ccc"];
var toAdd = document.createDocumentFragment();
for(var i=0; i <name.length; i++){
var newDiv = document.createElement("div");
var newheading = document.createElement("h2");
newDiv.id='r'+i;
newDiv.id='h'+i;
newDiv.innerHTML = name[i];
newDiv.className = 'ansbox';
toAdd.appendChild(newDiv);
}
document.getElementById('sel').appendChild(toAdd);

Please try this code
$(document).ready(function(){
var name = ["Amar", "rahul", "vinay"];
var hobby=["aaa","bbb","ccc"];
var toAdd = document.createDocumentFragment();
for(var i=0; i <name.length; i++){
var newDiv = document.createElement("div");
var newheading = document.createElement("h2");
newheading.innerText = hobby[i];
newDiv.id='r'+i;
newDiv.id='h'+i;
newDiv.innerHTML = name[i];
newDiv.className = 'ansbox';
toAdd.appendChild(newheading);
toAdd.appendChild(newDiv);
}
document.getElementById('sel').appendChild(toAdd)
});
Fiddle
Hope this will help you.

Hope This Will Help. Add the heading element inside division
newDiv.appendChild(newheading);
Check Fiddle

If you want the div to appear in that order just reverse the order in which you write appendChild like adding "toAdd.appendChild(newDiv);" first and then adding "toAdd.appendChild(newheading);" later.

Change the onClick function to target the edit buttons

I have the following script
var counter = 0;
function appendText(){
var text = document.getElementById('usertext').value;
if ( document.getElementById('usertext').value ){
var div = document.createElement('div');
div.className = 'divex';
var li = document.createElement('li');
li.setAttribute('id', 'list');
div.appendChild(li);
var texty = document.createTextNode(text);
var bigdiv = document.getElementById('addedText');
var editbutton = document.createElement('BUTTON');
editbutton.setAttribute('id', 'button_click');
var buttontext = document.createTextNode('Edit');
editbutton.appendChild(buttontext);
bigdiv.appendChild(li).appendChild(texty);
bigdiv.appendChild(li).appendChild(editbutton);
document.getElementById('button_click').setAttribute('onClick', makeAreaEditable());
document.getElementById('usertext').value = "";
counter++;
}
};
var makeAreaEditable = function(){
alert('Hello world!');
};
I want the makeAreaeditable function to work when the Edit button is pressed(for each of the edit buttons that are appended under the textarea).. In this state, the script, alerts me when i hit the Addtext button.
the following is the html. P.S. i need this in pure javascript, if you can help. thanks
<textarea id="usertext"></textarea>
<button onClick="appendText()">Add text </button>
<div id="addedText" style="float:left">
</div>

instead of:
document.getElementById('button_click').setAttribute('onClick', makeAreaEditable());
you need to do this:
editbutton.onclick = makeAreaEditable;
the function's name goes without brackets unless you want to execute it
instead of obtaining the element from the DOM using document.getElementById('button_click')
you can use the editbutton variable already created. this object is the DOM element you are looking for
SIDE NOTE:
the standard way to do it is to add the onclick property before appending the element

add html text with javascript

i am adding a input file tag and a link using a javascript function, works great. Now i want to add also a radio button and a text whit this radio... i can add the radio whit no problems, but the text... idk how.
here is the code...
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'archivo';
nDiv.id = 'file' + (++numero);
nCampo = document.createElement('input');
nCampo.name = 'archivos[]';
nCampo.type = 'file';
a = document.createElement('a');
a.name = nDiv.id;
a.href = '#';
a.onclick = elimCamp;
a.innerHTML = ' Eliminar';
portada = document.createElement('input');
portada.name = 'portada';
portada.type = 'radio';
portada.value = '1';
nDiv.appendChild(nCampo);
nDiv.appendChild(portada);
// HERE I WANT A SIMPLE TEXT SAYING WHATS DOES THE RADIO =)
nDiv.appendChild(a);
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
this is working just fine! the only thing i dont know is how to add text whitout tags...

You need
text = document.createTextNode('what the radio does');
nDiv.appendChild(text);
Although it's better to use a label, because then you don't have to sharp-shoot the radio button. In that case you'd need:
portada.id = 'portada';
text = document.createElement('label');
text.innerText = 'what the radio does';
text.for = 'portada';
nDiv.appendChild(text);
Edit: as mentioned in the comments, innerText is not necessarily supported by all browsers, sorry! Just use innerHTML instead, use textContent if you don't care about old versions of IE, or create a text node and add it to the label node.

Dynamicaly creating and removing a div

I have been strugling with this for a while and I am sure there is a simple answer to this. What happens is I remove a div called "payment" then dynamicaly create it again so I can add to it. That then gets repeated as the infomation that needs to be added to it changes.
I have mangaged to get this so far.
function clearPage()
{
var d = document.getElementById("contain");
var d_nested = document.getElementById("payment");
var deleteNode = d.removeChild(d_nested);
}
function createPayment()
{
payment = document.createElement("div");
payment.id = "mine";
document.getElementById("contain").appendChild(payment);
}
function printOnPage()
{
var x = names.length;
for( var i = 0 ; i < x ; i++ )
{
var para = document.createElement("p");
var paymentDiv = document.getElementById("payment");
paymentDiv.appendChild(para);
var txtName = document.createTextNode("Item: ");
para.appendChild(txtName);
var txtNameArray = document.createTextNode(names[i]);
para.appendChild(txtNameArray);
var txtQty = document.createTextNode(" Qty: ");
para.appendChild(txtQty);
var txtQtyArray = document.createTextNode(qty[i]);
para.appendChild(txtQtyArray);
var txtCost = document.createTextNode(" Cost: ");
para.appendChild(txtCost);
var txtCostArray = document.createTextNode(prices[i]);
para.appendChild(txtCostArray);
}
}
Related HTML
<div id="contain">
<p>Payment</p>
<div id="payment">
<br />
</div>
</div>
It needs the ID of payment for both my CSS rules and for my creating the text that goes in it.
This is the error I get in FireFox
Error: paymentDiv is null Source File:
http://itsuite.it.brighton.ac.uk/ks339/sem2/javascript/js.js Line: 76
Hope someone can provide some insight in to this and please tell me if I am completly off!
Thanks
Edit: Is it easior to clear the div rather than delete it, how would I go about doing such a thing?

In create_payment(), you set the ID to 'mine'. Shouldn't it be 'payment'?

I do not understand your requirements very well, but anyway you cannot create multiple items in the page using the same id attribute, if you want to duplicate an item and still have control over it, you should be using class instead.
Try switching your code into jquery it will be cleaner and easier to understand for you & me.

Your problem is the fact that in createPayment() you're setting the id to 'mine':
payment.id = "mine";
while later on in printOnPage() you're looking for the element using id 'payment':
var paymentDiv = document.getElementById("payment");

As you mention in your edit, it is far easier just to clear the div than to remove it, specially if you still need it later.
To clear a DIV-block just set it's content to empty:
document.getElementById('payment').innerHTML = "";
I hope you find a solution! Good luck!