Creating a div by pressing a button [duplicate] - javascript

This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 2 years ago.
I was trying to create Divs by clicking a button but it just fill the button range with red.
<div class="app">
<button onclick="createDiv()">Make a cube</button>
</div>
<script>
function createDiv ()
{
var boxEle = document.querySelector('.app');
boxEle.style.width = 100;
boxEle.style.height = 100;
boxEle.style.backgroundColor = '#f00';
}
</script>

Your not off by much. You were selecting the div you already created in the html, and some of your js syntax is off.
Try this jsFiddle
function createDiv ()
{
var boxEle = document.createElement('div');
var container = document.querySelector('.app');
boxEle.style.width = '100px';
boxEle.style.height = '100px';
boxEle.style.backgroundColor = '#f00';
container.appendChild(boxEle);
}

Firstly , in your function you are selecting an already created div in your html, so you are not creating a div. If you want to create a div using javascript you can do it like this.
function createDiv() {
let box = document.createElement('div'); // creates div
box.classlist.add('box-styling') // you can add a class and style it using that instead
let container = document.querySelector('.container') // div has to be placed somewhere in html, so create a container and select it.
container.appendChild(box) // then append to container
}

This should do it:
<div class="app">
<button onclick="createDiv()">Make a cube</button>
</div>
<script>
function createDiv () {
var boxEle = document.querySelector('.app');
var newDiv = document.createElement('div');
newDiv.style.width = 100;
newDiv.style.height = 100;
newDiv.style.margin = 5;
newDiv.style.backgroundColor = '#f00';
boxEle.appendChild(newDiv);
}
</script>

Related

How to dynamically add remove block using javascript

I am facing a problem while removing a paragraph, which I have added using javascript.
Adding buttons work fine. The problem occurs when I try to remove the paragraph.
function rdn_id(){return Math.random().toString(36).substring(7);}
//create button
function create_btn()
{
//Create a remove button
var btn_remove = document.createElement("BUTTON");
//create a unique button ID
id_btn_remove = rdn_id();
btn_remove.id = id_btn_remove ;
btn_remove.textContent = "Remove file";
return [btn_remove, id_btn_remove];
}
//add elt function
function create_p_btn()
{
//Create paragraph
var paragraph = document.createElement("P");
//create a unique p ID
id_paragraph = rdn_id();
paragraph.id = id_paragraph;
paragraph.style.paddingTop = "5px";
paragraph.style.background = "blue";
document.getElementById("setItHere").appendChild(paragraph);
// add button
var values = create_btn();
var btn_rmv = values[0];
var id_btn = values[1];
paragraph.appendChild(btn_rmv);
document.getElementById(id_btn).addEventListener("onclick", function(){remove_func(id_paragraph);});
}
//Remove function
function remove_func(id_el)
{
var elt = document.getElementById(id_el);
elt.parentNode.removeChild(id_el);
}
<div id="setItHere">
<Button id="start" onclick="create_p_btn();">add</Button>
</div>
Am I missing something ?
Thank you in advance.
You need to make two changes:
Event name should be click instead of onclick
elt.parentNode.removeChild(id_el); should be elt.parentNode.removeChild(elt);
Check out this pen
https://codepen.io/tanmayv/pen/yLNwNNJ

Create new DIV using Javascript according to Class

How do I convert this into Javascript? I'm trying to create more than 1 div of the same class but different images.
<div class="swiper-slide" style="background-image:url(image/test1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(image/test2.jpg)"></div>
I tried this, but it doesn't work
var div = document.createElement('div');
div.className = 'swiper-slide';
div.style.backgroundImage = 'url("image/test1.jpg")';
div.style.backgroundImage = 'url("image/test2.jpg")';
You need to add
document.append(div)
Where 'document' can be any parent element.
You can try like this for multiple images
make the image names into array and loop it
var images = ['test1','test2','test3'];
for(var i=0;i<images.length;i++){
var div = document.createElement('div');
div.className = 'swiper-slide';
div.style.backgroundImage = 'url("image/'+images[i]+'.jpg")';
div.innerHTML="asd"+i;
document.getElementById('asd').append(div);
}
<body>
<div id="asd">
</body>

Creating div on button click with Javascript not working?

I have a button in a webpage that is linked to a Javascript function, which creates a div as follows:
function creatediv(){
var div = document.createElement('div');
div.innerHTML = document.getElementById('innerhtmlbox').value;
document.body.appendChild(div);
}
However, it is not working. Can anyone give me any advice?
Try this:
function createDiv() {
let div = document.createElement('div');
div.innerText = document.getElementById('getText').innerText;
document.body.appendChild(div);
}
<button onClick="createDiv()">Click me!</button>
<div id="getText" style="display: none;">
INNER TEXT
</div>
You need to use innerText
function creatediv() {
var div = document.createElement('div');
div.innerHTML = document.getElementById('innerhtml').textContent;
document.body.appendChild(div);
}
creatediv();
http://jsfiddle.net/e8jn9pj5/3/
Or if you are populating it from button's value you may use .value as suggested by adeneo http://jsfiddle.net/t4c5yq24/

Javascript create divs with different ids

I want a new div to be created everytime I click on a button. And for that I've been using the following code:
function createDiv(){
var divTag = document.createElement("div");
divTag.id = "div1";
divTag.setAttribute("align","center");
divTag.style.border = "1px solid #ccc";
}
However this will give every created div the id "div1". I need all the div:s to have different id:s.
It would be nice if every new created div would be named "div + increasing number" (div1, div2, div3, div4, div5) and so on.
Create a counter that is then appended to the ID, then increment the counter.
var divCount = 0;
function createDiv(){
var divTag = document.createElement("div");
divTag.id = "div"+divCount;
divCount++;
divTag.setAttribute("align","center");
divTag.style.border = "1px solid #ccc";
}
You could also check if the div already exists and then increase your integer control
function createDiv() {
var created = false;
var index = 1;
while (!created) {
if (document.getElementById('div'+index) == null) { //not sure if the correct check is like this but something similar will work
//create div here
created = true;
}
else {
index++;
}
}
}
Just an alternative

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

Categories