Not sure what I am doing wrong. I know <p> and <h1> are block elements but even with display: inline-block; nothing happens. H1 still overrides the P tag. What am I doing wrong? I've tried multiple methods, I'm sure it's really simple.
The code is below.
let newContent = document.createElement('div');
newContent.classList.add('new');
let mewOne = document.createElement('h1');
newContent.style.cssText = 'border-color: black; background-color:pink;';
mewOne.textContent ="hey, i'm in a div";
let mewTwo = document.createElement('p');
mewTwo.textContent ="me too";
container.appendChild(mewOne, mewTwo);
full code ------
Html
JS
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'My first dom manipulation!';
container.appendChild(content);
//first//
let newContent = document.createElement('div');
newContent.classList.add('new');
let mewOne = document.createElement('h1');
newContent.style.cssText = 'border-color: black; background-color:pink;';
mewOne.textContent ="hey, i'm in a div";
let mewTwo = document.createElement('p');
mewTwo.textContent ="me too";
container.appendChild(mewOne, mewTwo);
//second//
const contentHeading = document.createElement('h3');
contentHeading.classList.add('new');
contentHeading.textContent = "i'm blue h3!";
contentHeading.style.color = 'blue';
container.appendChild(contentHeading);
//third///
const contentParagraph = document.createElement('p');
contentParagraph.classList.add('new');
contentParagraph.textContent ="Hey i'm red";
contentParagraph.style.color = 'red';
container.appendChild(contentParagraph);
//fourth//
Related
I'm working on a table content with JS. What I can update with a button or clear data from the table.
Phone Number: phoneNumber.value
Bay Number: bayNumber.Value (it's not added yet, but will work same)
The First column in the table is always the same (Phone Number and Bay Number), but the second column should change what is in the input after I press the save button (it works fine) Just if I press the delete, it deletes the all table.
I think the problem is how I created the table, but don't know how should I fix it.
//FORM//
var form = document.createElement('div');
form.style.width = "500px";
form.style.height = "500px";
form.style.margin = "auto";
form.style.textAlign = "center";
form.style.paddingTop = "20px";
form.style.background = "grey";
form.classList.add("printVisible");
document.body.appendChild(form);
var phoneNumber = document.createElement("INPUT");
phoneNumber.setAttribute("type", "text");
phoneNumber.value = "07";
phoneNumber.classList.add("hiddenPrint");
form.appendChild(phoneNumber);
var bayNumber = document.createElement("INPUT");
bayNumber.setAttribute("type", "text");
bayNumber.value = "Bay Number";
bayNumber.classList.add("hiddenPrint");
form.appendChild(bayNumber);
var buttonSave = document.createElement("BUTTON");
buttonSave.addEventListener("click", saveDatas);
var buttonSaveT = document.createTextNode("Save");
buttonSave.appendChild(buttonSaveT);
form.appendChild(buttonSave);
var buttonClear = document.createElement("BUTTON");
buttonClear.addEventListener("click", clearDatas);
var buttonClearT = document.createTextNode("Clear");
buttonClear.appendChild(buttonClearT);
form.appendChild(buttonClear);
var phoneNumberT = document.createElement("P");
form.appendChild(phoneNumberT);
var bayNumberT = document.createElement("P");
form.appendChild(bayNumberT);
//SAVE BUTTON//
function saveDatas() {
tablePhoneNumberTx.textContent = phoneNumber.value;
bayNumberT.textContent = bayNumber.value;
}
//CLEAR BUTTON//
function clearDatas() {
tablePhoneNumberTx.textContent = "";
bayNumberT.textContent = "";
}
//TABLE//
let body = document.body;
let tbl = document.createElement("table");
tbl.style.textAlign = "center";
tbl.style.margin = "auto";
let tablePhoneNumberTx = tbl.insertRow();
let tablePhoneNumber = tablePhoneNumberTx.insertCell();
tablePhoneNumber.appendChild(document.createTextNode(`Phone Number`));
tablePhoneNumberTx.appendChild(document.createTextNode(phoneNumber.value));
tablePhoneNumber.style.border = "1px solid black";
tablePhoneNumber.style.width = "250px";
tablePhoneNumberTx.style.border = "1px solid black";
tablePhoneNumberTx.style.background = "250px";
form.appendChild(tbl);
P.S. Its a TamperMonkey Script so, must be everything in JS
some sort of code factorization you could use, but since you wrote "only JS" I wonder why you are referencing CSS classes?
const newEl = ( tag, styling={}, attrbs={} ) =>
{
let elm = document.createElement(tag)
for(let key in styling) elm.style[key] = styling[key]
for(let key in attrbs) elm[key] = attrbs[key]
return elm
};
let myDiv = document.body
.appendChild
( newEl('div'
, {width:'200px', margin:'auto'}
, {className:'toto', textContent:'hello world'}
) );
console.log( myDiv )
I'm doing the Odin Project and am stuck on an exercise.
The requirement is that I have to add specific elements to a container in the HTML file but I can't get the following sections to show up at all when I run it:
a <div> with a black border and pink background color with the following elements inside of it:
another <h1> that says “I’m in a div”
a <p> that says “ME TOO!”
Hint for this one: after creating the <div> with createElement, append the <h1> and <p> to it before adding it to the container.
Here's my code https://codepen.io/mohd057/pen/KKQWdYV
const container = document.querySelector('#container');
const myP = document.createElement("p");
myP.style.color = "red";
myP.textContent = "Hey I'm red!";
const myH = document.createElement("h3")
myH.style.color = "blue";
myH.textContent = "I'm a blue h3!";
container.appendChild(myP);
container.appendChild(myH);
const myDiv = document.createElement("div");
myDiv.setAttribute('style', 'border: black; background: pink;');
const anotherH = document.createElement("h1");
anotherH.textContent = "I'm in a div";
const anotherP = document.createElement("p");
anotherP.textContent = "ME TOO!";
container.appendChild(myDiv);
Here's the link to the exercise https://www.theodinproject.com/lessons/foundations-dom-manipulation-and-events (struggling on questions 3, 1, and 2 are fine)
Would love to know where I'm going wrong.
What is missing:
border needs a border-style property to show
background's color property is called background-color otherwise you have to define it like this
You didn't append any element inside myDiv
const container = document.querySelector('#container');
const myP = document.createElement("p");
myP.style.color = "red";
myP.textContent = "Hey I'm red!";
const myH = document.createElement("h3")
myH.style.color = "blue";
myH.textContent = "I'm a blue h3!";
container.appendChild(myP);
container.appendChild(myH);
const myDiv = document.createElement("div");
myDiv.setAttribute('style', 'border: black solid; background-color: pink;');
const anotherH = document.createElement("h1");
anotherH.textContent = "I'm in a div";
const anotherP = document.createElement("p");
anotherP.textContent = "ME TOO!";
myDiv.appendChild(anotherH);
myDiv.appendChild(anotherP);
container.appendChild(myDiv);
I'm having a lot of problems trying to write an HTML code in Javascript DOM. This website is my last hope.
I want to convert this HTML tag:
<div class="received_msg">
<div class="received_withd_msg">
<p>
<b>Username: </b> Hello everyone!
</p>
</div>
</div>
This is what I have written so far:
var div2 = document.createElement('div');
div2.className = 'received_msg';
var div3 = document.createElement('div');
div3.className = 'received_withd_msg';
var par = document.createElement('p');
var bold = document.createElement('b')
div2.innerHTML += div3.outerHTML;
par.innerHTML += bold.innerHTML + data.username + ' : ' + data.msg;
document.querySelector('#message').append(div2);
document.querySelector('#message').append(par);
The above javascript code doesn't print out the HTML code that I want. What's the proper way to do it?
Note that data.username and data.msg are variables referenced in the full code.
You should be appending the elements you create to their parent elements
var div2 = document.createElement('div');
div2.className = 'received_msg';
var div3 = document.createElement('div');
div3.className = 'received_withd_msg';
var par = document.createElement('p');
var bold = document.createElement('b');
bold.textContent = "hello";
// var boldTxt = document.createTextNode("Hello");
// bold.appendChild(boldTxt);
var txt = document.createTextNode(" World");
div2.appendChild(div3);
div3.appendChild(par);
par.appendChild(bold);
par.appendChild(txt);
document.body.append(div2);
Writing HTML using vanilla JS might be truly confusing :) As written above, appending children to parent elements would be easier and better in many ways. Just to complete the whole idea with your case and all the variables:
var data = {username: 'John Doe', msg: 'Hello World!'};
var root = document.querySelector('#root');
var div2 = document.createElement('div');
div2.className = 'received_msg';
var div3 = document.createElement('div');
div3.className = 'received_withd_msg';
var par = document.createElement('p');
var bold = document.createElement('b');
bold.textContent = `${data.username}: `;
par.appendChild(bold);
var text = document.createTextNode(data.msg);
par.appendChild(text);
div3.appendChild(par);
div2.appendChild(div3);
root.appendChild(div2);
<div id="root"></div>
i want my li tag in a ol tag have a line all over it
but it just put the line on the content of the li tag
how can i make it work?
my code:`
ol.type = "i";
var li1 = document.createElement("li");
var li2 = document.createElement("li");
var li3 = document.createElement("li");
var li4 = document.createElement("li");
var li5 = document.createElement("li");
li1.textContent = "user dashboard";
ol.appendChild(li1);
li2.textContent = "admin dashboard";
ol.appendChild(li2);
li3.textContent = "authentication";
ol.appendChild(li3);
var ul = document.createElement("ul");
var li11 = document.createElement("li");
var li12 = document.createElement("li");
var li13 = document.createElement("li");
li11.textContent = "login";
ul.appendChild(li11);
ol.appendChild(ul);
li12.textContent = "register";
li12.style.textDecoration = "line-through";
ul.appendChild(li12);
ol.appendChild(ul);
li13.textContent = "log out";
ul.appendChild(li13);
ol.appendChild(ul);
li4.textContent = "about page";
ol.appendChild(li4);
li5.textContent = "contact page";
li5.style.textDecoration = "line-through";
ol.appendChild(li5);
document.body.appendChild(ol);
`
my code is on the left side but i want it to be like the right side``
enter image description here
Use list-style-position: inside;
https://codepen.io/battletag13/pen/OJROGjr
It's not supported in every browser but is supported on both Chrome/Chromium & Firefox.
If I am not misunderstanding then you want a border around the LI tag instead of having the text cut down with a line:
...
//li12.style.textDecoration = "line-through";
li12.style.border = "1px solid red";
...
//li5.style.textDecoration = "line-through";
li5.style.border = "1px solid red";
I have the following code:
JS :
i.addEventListener("click", function () {
var br1 = document.createElement("br");
var div1 = document.createElement("div");
div1.className = "input-group";
var ipt1 = document.createElement("input");
ipt1.type = "text";
ipt1.className = "form-control";
var span = document.createElement("span");
span.className = "input-group-addon";
var ipt2 = document.createElement("input");
ipt2.type = "text";
ipt2.className = "form-control";
div1.appendChild(ipt1);
div1.appendChild(span);
div1.appendChild(ipt2);
divdiv.appendChild(div1);
divdiv.appendChild(br1);
});
document.getElementById('modal2body').appendChild(divdiv);
However, when there are multiple <i>s, the divdiv is appended to the last one.
This is all in a for loop, which adds an <i> for each element in a list.
The list might look like ['customers','employees','managers','night-shifts']
There needs to be an option to add the input-group to each one of these. (the i is a FontAwesome 'plus' icon).
The problem I have, is that clicking any of the icons, it will add the input-group to the night-shift list.
I thought I might need to use dynamic variables to fix this.
If it happens that this is the most effective solution, how can I achieve this?
Or is there a better way to do this ?
Screenshot :
In this screenshot, I clicked the + to the right of Customers
This code creates the original 4 input-groups (1 for each section) :
var divdiv = document.createElement('div');
divdiv.id = 'd' + d;
var div1 = document.createElement('div')
div1.className = 'input-group';
var ipt1 = document.createElement('input');
ipt1.type = 'text';
ipt1.className = 'form-control'
var span = document.createElement('span');
span.className = 'input-group-addon';
var ipt2 = document.createElement('input');
ipt2.type = 'text';
ipt2.className = 'form-control'
var div2 = document.createElement('div');
var t = document.createElement('t');
t.className = 'helv-b grey'
t.style.fontSize = '15px';
t.textContent = inputstext[d];
div2.appendChild(t);
var i = document.createElement('i');
i.className = 'fa fa-plus';
i.style.float = 'right'
i.style.fontSize = '20px';
i.style.marginTop= '5px'
i.onmouseenter = i.style.opacity = "60%";
i.onmouseleave = i.style.opacity = "100%";
div2.appendChild(i);
var br1 = document.createElement('br');
var br2 = document.createElement('br');
divdiv.appendChild(div2);
divdiv.appendChild(br1);
div1.appendChild(ipt1);
div1.appendChild(span);
div1.appendChild(ipt2);
divdiv.appendChild(div1);
divdiv.appendChild(br2);
divdiv.id = 'f' + d;
(inputstext = ['Customers','Employees','Managers','Night-Shifts'])
HTML :
<div class="modal-body" id="modal2body">
</div>
###Update
Screenshots :
I can't figure out how to fix these alignment issues and make them look like my original screenshot.
Also, how do I have 1 input-group already displayed for each section ?
The problem is that the code which adds is event-driven, which means that it will run when the user clicks the add icon. So when the add icon is click the value of divdiv will be the last element of array "Night-Shifts".
Here is a way of doing it using arrays.
var inputstext = ['customers', 'employees', 'managers', 'night-shifts']
var divdivArray = [];
var mainDiv = document.getElementById("modal2body");
for (var d = 0; d < inputstext.length; d++) {
var divdiv = document.createElement('div');
divdiv.id = 'd' + d;
var div1 = document.createElement('div')
div1.className = 'input-group';
var ipt1 = document.createElement('input');
ipt1.type = 'text';
ipt1.className = 'form-control'
var span = document.createElement('span');
span.className = 'input-group-addon';
var ipt2 = document.createElement('input');
ipt2.type = 'text';
ipt2.className = 'form-control'
var div2 = document.createElement('div');
var t = document.createElement('t');
t.className = 'helv-b grey'
t.style.fontSize = '15px';
t.textContent = inputstext[d];
div2.appendChild(t);
var i = document.createElement('i');
i.className = 'fa fa-plus';
i.style.float = 'right'
i.style.fontSize = '20px';
i.style.marginTop = '5px'
i.onmouseenter = i.style.opacity = "60%";
i.onmouseleave = i.style.opacity = "100%";
i.setAttribute("index", d)
div2.appendChild(i);
var br1 = document.createElement('br');
var br2 = document.createElement('br');
divdiv.appendChild(div2);
divdiv.appendChild(br1);
div1.appendChild(ipt1);
div1.appendChild(span);
div1.appendChild(ipt2);
divdiv.appendChild(div1);
divdiv.appendChild(br2);
divdiv.id = 'f' + d;
mainDiv.appendChild(divdiv)
divdivArray.push(divdiv);
i.addEventListener("click", function() {
var br1 = document.createElement("br");
var div1 = document.createElement("div");
div1.className = "input-group";
var ipt1 = document.createElement("input");
ipt1.type = "text";
ipt1.className = "form-control";
var span = document.createElement("span");
span.className = "input-group-addon";
var ipt2 = document.createElement("input");
ipt2.type = "text";
ipt2.className = "form-control";
div1.appendChild(ipt1);
div1.appendChild(span);
div1.appendChild(ipt2);
var index = this.getAttribute("index");
divdivArray[index].appendChild(div1);
divdivArray[index].appendChild(br1);
});
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="modal-body" id="modal2body" style="display: inline-block;">
</div>
<html>
Here I save every divdiv inside the array. And also add an index attribute to the <i> element so when it is clicked you can know which divdiv you want to edit.