how to make div on html on js?

how to make div on html on js? - javascript

I try create a modal box for my Extention.
I have a html5 code
<dialog>
<p>Window</p>
<button id="close">Close</button>
</dialog>
<button id="show">Open Modal Box</button>
and JS code
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
But in my Extention not run my code
function Window_app(){
var myDiv = document.createElement('dialog');
var myP = document.createElement ('p')
var myPText = document.createTextNode("Это окно, которое сделано на html5 и javascript");
var buttonClose = document.createElement('button');
buttonClose.id = ('close');
var buttonShow = document.createElement('button');
buttonShow.id = ('show');
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
}
How make html code in js ?

add a html container to store everything, and then create elements and append them accordingly by referencing them
function Window_app() {
var dialog = document.createElement('dialog');
var myP = document.createElement('p')
var myPText = document.createTextNode("Это окно, которое сделано на html5 и javascript");
var buttonClose = document.createElement('button');
buttonClose.id = ('close');
buttonClose.appendChild(document.createTextNode("закрыть"));
var buttonShow = document.createElement('button');
buttonShow.appendChild(document.createTextNode("открыть"));
buttonShow.id = ('show');
myP.appendChild(myPText);
var container = document.querySelector('#dialog-container');
dialog.appendChild(myP);
container.appendChild(dialog);
dialog.appendChild(buttonClose);
container.appendChild(buttonShow);
buttonShow.onclick = function() {
dialog.show();
};
buttonClose.onclick = function() {
dialog.close();
};
}
Window_app()
<div id="dialog-container"></div>

Related

Javascript: Clicking an injected button doesn't work

when I inject some code the onclick doesn't work
here is the code I use.
document.getElementById('headbar').onclick = function() {
var list_div_preleva = document.getElementsByClassName('preleva_dati').length;
var list = document.getElementsByClassName('box_commenti');
for(var i = list_div_preleva; i < list.length; i++) {
var parentDiv = list[i].parentNode.id;
var id_post = document.getElementById(parentDiv);
var creaelementodiv = document.createElement("button");
creaelementodiv.className = "preleva_dati";
creaelementodiv.setAttribute("id", "blocco_dati");
creaelementodiv.innerHTML = "<li>preleva il post</li>";
id_post.appendChild(creaelementodiv);
}
};
<div id="headbar">div</div>
when the code is inside, onclick doesn't work
<!-- begin snippet: js hide: false console: true babel: false -->
document.getElementById('blocco_dati').onclick = function() {
alert(11);
};
can the problem be solved?

document.getElementById('headbar').onclick = function() {
var id_post = document.getElementById("headbar2");
var creaelementodiv = document.createElement("button");
creaelementodiv.className = "preleva_dati";
creaelementodiv.setAttribute("id", "blocco_dati");
creaelementodiv.innerHTML = "preleva il post";
creaelementodiv.setAttribute("onclick", "doSomething();");
id_post.appendChild(creaelementodiv);
};
function doSomething() {
alert(11);
};
<div id="headbar">div</div>
<div id="headbar2"></div>
You can set one more attribute while injecting element
for ex:
creaelementodiv.setAttribute("onclick", "doSomething();");
and then you can call that function like
function doSomething() {
alert(11);
};

Javascript function not looping properly over items

This is my JS that adds evenet listeners to every ideanode:
var ideanodes = [...document.querySelectorAll('.ideanode')];
ideaNodesListRefresh();
function ideaNodesListRefresh(){
ideanodes = [...document.querySelectorAll('.ideanode')];
console.log("refreshed")
ideanodes.forEach(ideanode => {
var maintxt = ideanode.querySelector(".maintext");
var titleArrow = ideanode.querySelector(".title-arrow");
var mainArrow = ideanode.querySelector(".maintxt-arrow");
var comments = ideanode.querySelector(".comments");
titleArrow.addEventListener('click', function() {
maintxt.classList.toggle("hidden");
mainArrow.classList.toggle("hidden");
if (comments.classList.contains("hidden")) {;
} else {
comments.classList.toggle("hidden");
};
});
mainArrow.addEventListener("click", function() {
comments.classList.toggle("hidden");
});
});
};
the function gets fired at the end of the creation of a new ideanode:
function createNeed(user) {
if (user==user1) {
var newNeed = document.createElement('div');
newNeed.className = "ideanode";
var newNeedHeader = document.createElement('div');
newNeedHeader.className = "ideanodeheader";
var newNeedHeaderText = document.createTextNode('Need');
newNeedHeader.appendChild(newNeedHeaderText);
newNeed.appendChild(newNeedHeader);
var newNeedContent = document.createElement('div');
newNeedContent.className = "content";
newNeed.appendChild(newNeedContent);
var needTitle = document.createElement('div');
needTitle.className="title";
var needTitleH3 = document.createElement('h2');
var titleText = document.createTextNode('Title');
needTitleH3.appendChild(titleText);
needTitleH3.setAttribute('onclick', 'this.focus();');
needTitleH3.setAttribute('contenteditable', 'True');
newNeedContent.appendChild(needTitleH3);
var downArrow0 = document.createElement('i');
downArrow0.classList = 'fas fa-sort-down title-arrow';
newNeedContent.appendChild(downArrow0);
var maintext = document.createElement('div');
maintext.classList = 'maintext hidden';
textareaMain = document.createElement("textarea");
textareaMain.className = "maintextinput";
textareaMain.setAttribute('placeholder', 'Text');
maintext.appendChild(textareaMain);
newNeedContent.appendChild(maintext);
var downArrow1 = document.createElement('i');
downArrow1.classList = 'fas fa-sort-down maintxt-arrow hidden';
newNeedContent.appendChild(downArrow1);
var comments = document.createElement('div');
comments.classList = "comments hidden";
textareaComments = document.createElement("textarea");
textareaComments.className = "commentsinput";
textareaComments.setAttribute('placeholder', 'Comments');
comments.appendChild(textareaComments);
newNeedContent.appendChild(comments);
newNeed.appendChild(newNeedContent);
var container = document.querySelector('#needsuser1');
var lastNeed = document.querySelector(".ideanode:last-child");
lastNeed.parentNode.insertBefore(newNeed, lastNeed.nextSibling);
ideaNodesListRefresh();
} else {
console.log("user2")
}
}
But when I add a new ideanode the function doesn't work properly and the eventlisteners only work for the newest ideanode.
This is a codepen of what I'm doing: https://codepen.io/ricodon1000/pen/PoPeXJL
I would like to simply add eventlisteners to the arrows of the new ideanode and have all of the arrows of all of the ideanodes work.

DOM elements Javascript

I have append
cardBodyButton.addEventListener('click', function(){
listGroup.append(addTodo());
})
and I have a function
var addTodo = function(){
var todoList = document.createElement('li');
todoList.className = "list-group-item d-flex justify-content-between";
todoList.appendChild(document.createTextNode('Todo 5'));
var todoList_a = document.createElement('a');
todoList_a.className = "delete-item";
todoList_a.setAttribute('href','#');
var todoList_a_i = document.createElement('i');
todoList_a_i.className = "fa fa-remove";
todoList_a.append(todoList_a_i);
todoList.append(todoList_a);
};
I am trying to call function in append but it says undefined. What is wrong here?

Replace header text with button text using JavaScript

I am using only JavaScript to create buttons and need to add click handlers to the buttons that will replace the header with the contents of the buttons. I have been trying to figure out how to do this for a while. Any help would be great! Thank you!
Below is my JavaScript code that creates the buttons and header.
var col = document.createElement('div');
col.className = 'col';
document.body.appendChild(col);
var header = document.getElementById('col');
var h = document.createElement("H3");
h.innerHTML = "Nothing clicked yet!";
col.appendChild(h);
var divOne = document.createElement('div');
col.appendChild(divOne);
var btnOne = document.getElementById('col');
var textOne = ["1", "2", "3", "4"];
textOne.forEach(function(post) {
var postDiv = document.createElement("div");
postDiv.className = 'btn btn-default';
postDiv.innerHTML = post;
col.appendChild(postDiv);
});

Add an event to your button elements, but as other answers pointed out, a good practice is to assign IDs to your elements for more accurate lookup :
var btnOne = document.getElementById('col');
var textOne = ["Left", "Middle", "Right"];
textOne.forEach(function(post) {
var btnGroupFour = document.createElement('button');
btnGroupFour.className = 'btn btn-default';
btnGroupFour.innerHTML = post;
btnGroupFour.addEventListener("click", function() {
var header = document.getElementsByTagName('H3')[0];
header.innerHTML = this.innerHTML;
}, false);
divThree.appendChild(btnGroupFour);
});

First of all, you are not creating buttons, you're creating divs, although you're using the button classes from bootstrap (I gues...).
Anyway, the way to proceed would be to add a onclick attribute with a callback function, witch takes one argument: the event itself. Then, with the target attribute of the event object, you're getting access to the event source tag and with value you will get the value.
Just like this:
<input type="button" id="button" value="Test Value!" />
<span id="output"></span>
<script>
document.getElementById("button").addEventListener('click', callback);
function callback(e) { document.getElementById("output").innerHTML = e.target.value; }
</script>

Just assign an ID for your header, and while creating the buttons in the loop. Just assign the onclick callback of the button, to get the id of the header, and replace the text
textOne.forEach(function(post) {
var btnGroupFour = document.createElement('button');
btnGroupFour.className = 'btn btn-default';
btnGroupFour.innerHTML = post;
btnGroupFour.onclick = function(){document.getElementById('headerID').innerHTML = post} ;
h.appendChild(btnGroupFour);
});
Should Work for your situation.
A short Demo

Fairly simple, just add an eventListener onto the element during creation. All I really had to add to your code was: .addEventListener("click", function(){ h.innerHTML = post;});
http://www.w3schools.com/jsref/met_element_addeventlistener.asp
<!DOCTYPE html>
<html>
<body>
<p>Hover over the checkbox to simulate a mouse-click.</p>
<script>
var divContainer = document.createElement('div');
divContainer.className = 'container';
document.body.appendChild(divContainer);
var row = document.createElement('div');
row.className = 'row';
divContainer.appendChild(row);
var col = document.createElement('div');
col.id = 'col-md-12';
row.appendChild(col);
var header = document.getElementById('col');
var h = document.createElement("H3");
h.innerHTML = "Nothing clicked yet!";
col.appendChild(h);
var star = document.createElement('div');
col.appendChild(star);
var btnStar = document.getElementById('col');
var textStar = ["Star"];
textStar.forEach(function(post) {
var postStar = document.createElement("div");
postStar.className = 'btn btn-default';
postStar.innerHTML = post;
postStar.addEventListener("click", function(){
h.innerHTML = post;});
col.appendChild(postStar);
});
var secondLine = document.createElement("HR");
document.body.appendChild(secondLine);
col.appendChild(secondLine);
var divOne = document.createElement('div');
col.appendChild(divOne);
var btnOne = document.getElementById('col');
var textOne = ["1", "2", "3", "4"];
textOne.forEach(function(post) {
var postDiv = document.createElement("div");
postDiv.className = 'btn btn-default';
postDiv.innerHTML = post;
postDiv.addEventListener("click", function(){
h.innerHTML = post;});
col.appendChild(postDiv);
});
var btnTwo = document.getElementById('col');
var textTwo = ["5", "6", "7", "8"];
textTwo.forEach(function(post) {
var btnGroupFour = document.createElement('button');
btnGroupFour.className = 'btn btn-default';
btnGroupFour.innerHTML = post;
btnGroupFour.addEventListener("click", function(){
h.innerHTML = post;});
col.appendChild(btnGroupFour);
});
var secondLine = document.createElement("HR");
document.body.appendChild(secondLine);
col.appendChild(secondLine);
var divThree = document.createElement('div');
col.appendChild(divThree);
var btnOne = document.getElementById('col');
var textOne = ["Left", "Middle", "Right"];
textOne.forEach(function(post) {
var btnGroupFour = document.createElement('button');
btnGroupFour.className = 'btn btn-default';
btnGroupFour.innerHTML = post;
btnGroupFour.addEventListener("click", function(){
h.innerHTML = post;});
divThree.appendChild(btnGroupFour);
});
</script>
</body>
</html>

Adding an Image to DOM Dynamically Using Range.insertNode()

How can I dynamically insert an IMG element into the DOM using Range.insertNode() ?
My HTML:
<div class="css_class_for_div" style="height: 250px;" contenteditable="true">
<img src="/path/to/my/image/myimage.png" alt="/myimage.png" title="/myimage.png" class="css_class_for_image" e_resid="/myimage.png" />
<br />
<br />
<span class="css_class_for_span"></span>
</div>
<input id="myButton" type="button" value="insert image" />
MY JS:
var button = document.getElementById("myButton");
button.addEventListener("click", function(e){
var src = "/path/to/my/other/image/image2.png";
var title = "/image2.png";
var cssClassname = "css_class_for_image";
var list = document.getElementsByClassName("css_class_for_div");
var el = list[0];
var selRanges = el.getSelection();
if (selRanges.rangeCount > 0) {
var curRange = selRanges.getRangeAt(0); // Range object
if (curRange.toString().length == 0) {
var imageNode = document.createElement('img');
imageNode.src = src;
imageNode.alt = title;
imageNode.title = title;
imageNode.className = cssClassname;
curRange.insertNode(imageNode);
}
}
},false);
[Link to fiddle]
The above code doesn't work. Any help is appreciated.

If you simply want to insert Image2 into the first occurrence of a div with classname = css_class_for_div using Range.InsertNode(), you can use the following code.
I had to use
var range = document.createRange();
range.selectNode(your div);
range.insertNode(your image);
Updated Fiddle
var button = document.getElementById("myButton");
button.addEventListener("click", function (e) {
debugger;
var range = document.createRange();
var list = document.getElementsByClassName("css_class_for_div");
if (list.length > 0) {
var el = list[0];
range.selectNode(el);
var imageNode = getImageNode();
range.insertNode(imageNode);
}
}, false);
function getImageNode() {
var src = "/path/to/my/other/image/image2.png";
var title = "/image2.png";
var cssClassname = "css_class_for_image";
var imageNode = document.createElement('img');
imageNode.src = src;
imageNode.alt = title;
imageNode.title = title;
imageNode.className = cssClassname;
return imageNode;
}

Develop Reference

JavaScript is the programming language of the Web.

how to make div on html on js? - javascript

Related

Javascript: Clicking an injected button doesn't work

Javascript function not looping properly over items

DOM elements Javascript

Replace header text with button text using JavaScript

Adding an Image to DOM Dynamically Using Range.insertNode()

Categories

Resources