Text and Input are not on the same line - javascript

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);

Related

Change color of specific part of element string in JavaScript

I'm creating a chat application, and I want the users text's to be colored. Here is how I create the text element:
var item = document.createElement('li');
item.textContent = `[Anye]: hello`;
item.style.fontWeight = 'bold';
item.style.color = 'red';
This is how this code is executed:
This, on the other hand, is what I would want:
Is there a way that I can change the color of only part of the text?
Note: The desired image was created using the console, and please keep in mind that the messages are not fixed, it's up to the user what they want to say.
I'm willing to use jQuery for this example, if needed.
Thanks!
You can wrap the author in a span element and set style property.
var item = document.createElement('li');
item.style.fontWeight = 'bold';
const author = document.createElement("span");
author.innerText = "[Anye]: ";
author.style.color = 'red';
item.append(author);
item.innerHTML += "hello";
document.body.append(item);
Or you can wrap the message in a span element and set a predefined style in CSS.
var item = document.createElement('li');
item.innerHTML = `[Anye]: <span>hello</span>`;
item.style.fontWeight = 'bold';
item.style.color = 'red';
document.body.append(item);
li span {
color: initial;
}

Dynamic creating elements using javascript

So I have created elements in my html using javascript. The only problem is that my button is not showing up. Following is my code:
var search_div1 = document.createElement("div");
search_div1.className = "input-group row-fluid";
var search_div2 = document.createElement("div");
search_div2.className = "span4 offset4";
var search_input = document.createElement("input");
search_input.className = "form-control offset8";
search_input.id = "searchText";
search_input.type = "text";
search_input.placeholder = "Search...";
search_input.style.width = "200px";
search_input.style.marginLeft = "550px";
var search_span = document.createElement("span");
search_span.className = "input-group-btn";
search_span.width = "50px";
var search_button = document.createElement("button");
search_button.type = "submit";
search_button.id = "search";
search_button.name = "search";
search_button.className = "btn btn-flat";
search_button.onclick = myFunction;
var search_icon = document.createElement("i");
search_icon.className = "fa fa-search";
search_button.appendChild(search_icon);
search_span.appendChild(search_button);
search_input.appendChild(search_span);
search_div2.appendChild(search_input);
search_div1.appendChild(search_div2);
Everything else is showing perfectly except for the search_button and I have created buttons like this that work perfectly. Can someone kindly assist me? Thanks in advance.
You're using .appendChild() incorrectly. For example, this line of code:
search_input.appendChild(search_span);
Is trying to make a <span> a child of an <input>. That is not legal HTML.
Remember x.appendChild(y) makes y a child of x in the DOM hierarchy.
We can't really advise what the exact right sequence of appending is because we don't know what HTML structure you're trying to end up with. If you show us what you want the DOM hierarchy to look like when you're done, we can help with the proper code to achieve that.

Newline added when appending elements to a div

The output of code below produces a line of text and then a button below the text.
How can I place the button beside the text?
var count = document.createTextNode('My text: ');
document.getElementById('container').appendChild(count);
var f = document.createElement('form');
f.setAttribute('method','POST');
f.setAttribute('action','test');
var text = document.createElement('input');
text.setAttribute('type','hidden');
text.setAttribute('name','text');
text.value = 'Hey! - hidden value';
var s = document.createElement('input'); //input element, Submit button
s.setAttribute('type','submit');
s.setAttribute('value','Hey!');
f.appendChild(text);
f.appendChild(s);
document.getElementById('container').appendChild(f);
s.onclick=function(){
f.submit();
};
jsFiddle: http://jsfiddle.net/bobbyrne01/hk0annoq/
The display attribute of form elements is set to block by default, which means that when they're created they'll skip one line within a paragraph. To solve this, one approach would be to make the form's display atrribute to inline or inline-block:
f.style.display = 'inline';
Here:
var f = document.createElement('form');
f.setAttribute('method','POST');
f.setAttribute('action','test');
f.style.display = 'inline';
Your updated fiddle here.
Update:
Expanding epascarello's answer, a more correct approach would be:
var f = document.createElement('form');
f.setAttribute('method','POST');
f.setAttribute('action','test');
// Create your label
var label = document.createElement('label');
// Set its text
var count = document.createTextNode('My Text: ');
var text = document.createElement('input');
text.setAttribute('type','hidden');
text.setAttribute('name','text');
text.value = 'Hey! - hidden value';
var s = document.createElement('input'); //input element, Submit button
s.setAttribute('type','submit');
s.setAttribute('value','Hey!');
// Append your text, hidden input and submit button to the label
label.appendChild(count);
label.appendChild(text);
label.appendChild(s);
// Append the label to the form
f.appendChild(label);
// Append the form to the container
document.getElementById('container').appendChild(f);
Because it gives the document better semantics.
What you have
<text node - inline>
<form - block - causes new line>
You would need to append it inside the form, not the container.
f.appendChild(count);
f.appendChild(text);
f.appendChild(s);
document.getElementById('container').appendChild(f);
You should also look at using a label element since that is how you are treating that text.
It's easier than what they say and no CSS needed, look at HERE
You just had to put 'count' inside the form rather than the container
f.appendChild(count);
instead of
document.getElementById('container').appendChild(count);

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

How can I append new "p" element with formatted text

I have a javascript function designed to dynamically append text to my document (and slides it down with JQuery). I create a new "p" element, and then I want to add text to it, but I need this text to have several formats. For example, I need the first part to be italicized, second part to be underlined, and third part to be white. As of now, I managed to get three different "div" elements with their own text nodes, each with their own style, but this makes it on three separate lines. I need it all on one line. Is there any way I can insert HTML tags into a text node, or somehow split the internal string up so I can style each part separately?
This code demonstrates the closest I got, but this puts each styled text node on different lines, and I need it all on one line in that p element:
function append_announcement(time_string, user_by, text){
newp = document.createElement("p");
head = document.createElement("span");
headt = document.createTextNode("You wrote: ");
head.appendChild(headt);
body = document.createElement("div");
bodyt = document.createTextNode(text);
body.appendChild(bodyt);
body.setAttribute("style", "color: white");
foot = document.createElement("div");
foott = document.createTextNode("Done.");
foot.appendChild(foott);
newp.appendChild(head);
newp.appendChild(body);
newp.appendChild(foot);
newp.setAttribute("align", "center");
newp.style.display = "none";
document.getElementById("announcement_posts").insertBefore(newp,
document.getElementById("announcement_posts").firstChild);
$("p").slideDown("slow");
}
Change the <div>s for <span>s, they're displayed inline by default.
Alternatively you could apply a class to the <div> elements you create and set that class to display: inline-block; using CSS.
Example
function append_announcement(time_string, user_by, text){
newp = document.createElement("p");
var i = document.createElement("i");
i.textContent = ("You wrote ");
var span = document.createElement("span");
span.textContent = text;
span.style.color = "white";
var u = document.createElement("u");
u.textContent = " Done.";
newp.appendChild(i);
newp.appendChild(span);
newp.appendChild(u);
newp.setAttribute("align", "center");
newp.style.display = "none";
document.getElementById("announcement_posts").insertBefore(newp,
document.getElementById("announcement_posts").firstChild);
$("p").slideDown("slow");
}
You want to create elements that display inline like <i>, <u> or <span>

Categories