Develop Reference

How to have a div open by a button closed by clicking off when there are multiple buttons?

I have several buttons on my site that call a script to open the content into full screen and I also want to be able to click off the created div to close it. This works but after opening one container, which is deleted after, my program produces errors trying to click another button.
function closeDiv(evt) {
const maindiv = document.getElementById('div3');
let targetElement = evt.target;
do {
if (targetElement == maindiv.childNodes[1]) {
return;
}
targetElement = targetElement.parentNode;
} while (targetElement);
var viewpost = maindiv.childNodes[1];
viewpost.parentNode.removeChild(viewpost);
maindiv.classList.remove('viewcontainer');
};
function buttonClick(button) {
var div = button.parentElement.parentElement;
var clone = div.cloneNode(true);
var element = div.childNodes;
var username = element[1].innerText;
var title = element[7].innerText;
var contenttext = div.childNodes[3].value;
var clone = document.createElement('div');
clone.classList.add('viewcontainercon');
var viewuser = document.createElement('p');
viewuser.classList.add('viewcontaineruser');
var text = document.createTextNode(username);
viewuser.appendChild(text);
clone.appendChild(viewuser)
var viewtitle = document.createElement('p');
viewtitle.classList.add('viewcontainertitle');
var text = document.createTextNode(title);
viewtitle.appendChild(text);
clone.appendChild(viewtitle);
var viewcontent = document.createElement('p');
viewcontent.classList.add('viewcontainercontent');
var text = document.createTextNode(contenttext);
viewcontent.appendChild(text);
clone.appendChild(viewcontent);
document.getElementById('div3').classList.add('viewcontainer');
document.getElementById('div3').appendChild(clone);
document.addEventListener("click", function(event){
var isClickInside = button.contains(event.target);
if (!isClickInside) {
closeDiv(event);
}
});
}
The error is specifically `viewpost is undefined' in the closeDiv() function, which is strange since that shouldn't be called until after the click. Any ideas?

focus is not working on textarea

I am creating a page in which a user can add a question and its solution, he can delete the problem and can also edit it dynamically using DOM in javascript. I want that whenever user clicks on edit button the textbox which appears get autofocus.
This the javascript code of my page...
var questionText;
var answerText;
var questionArray=[];
var answerArray=[];
var i=0;
var j=10000;
function addProblem(){
var body = document.getElementsByTagName('body')[0];
questionText = document.getElementById('questionId').value;
answerText = document.getElementById('answerId').value;
questionArray.unshift(questionText);
answerArray.unshift(answerText);
var myContainer = document.getElementById('container');
var myDiv = document.createElement("div");
var questionLogo = document.createElement("p");
questionLogo.id = "questionLogo";
var textNode = document.createTextNode("Question:");
var question = document.createElement("p");
question.id = "question";
var questionDetail = document.createTextNode(questionArray[0]);
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "Delete";
deleteButton.id = i;
var editButton = document.createElement("button");
editButton.innerHTML = "Edit";
editButton.id = j;
var answerLogo = document.createElement("p");
answerLogo.id = "answerLogo"
var ansTextNode = document.createTextNode("Answer: ");
var answer = document.createElement("p");
answer.id = "answer";
var answerDetail = document.createTextNode(answerArray[0]);
var mybr = document.createElement("br");
if(i==0){
myContainer.appendChild(myDiv);
myDiv.appendChild(questionLogo);
questionLogo.appendChild(textNode);
questionLogo.appendChild(question);
question.appendChild(questionDetail);
myDiv.appendChild(answerLogo);
answerLogo.appendChild(ansTextNode);
answerLogo.appendChild(answer);
answer.appendChild(answerDetail);
answerLogo.appendChild(mybr);
myDiv.appendChild(deleteButton);
myDiv.innerHTML += ' ';
myDiv.appendChild(editButton);
}
else if (i > 0)
{
myContainer.insertBefore(myDiv,myContainer.firstChild);
myDiv.appendChild(questionLogo);
questionLogo.appendChild(textNode);
questionLogo.appendChild(question);
question.appendChild(questionDetail);
myDiv.appendChild(answerLogo);
answerLogo.appendChild(ansTextNode);
answerLogo.appendChild(answer);
answer.appendChild(answerDetail);
answer.appendChild(mybr);
myDiv.appendChild(deleteButton);
myDiv.innerHTML += ' ';
myDiv.appendChild(editButton);
}
i++;
j++;
myDiv.childNodes[7].addEventListener("click", function(){
var deleteElement = document.getElementById(this.id);
deleteElement.parentNode.parentNode.removeChild(deleteElement.parentNode);
});
myDiv.childNodes[9].addEventListener("click",function(){
var editElement = document.getElementById(this.id);
var quesEdit = editElement.parentNode.childNodes[1];
var quesEditText = quesEdit.innerHTML;
var ansEdit = editElement.parentNode.childNodes[4];
var ansEditText = ansEdit.innerHTML;
var editDiv1 = document.createElement("div");
editDiv1.id = "editDiv1"
var quesTextArea = document.createElement("textarea");
quesTextArea.innerHTML += quesEditText;
quesTextArea.focus();
var saveButton1 = document.createElement("button");
saveButton1.innerHTML = "Save";
editDiv1.appendChild(quesTextArea);
editDiv1.innerHTML += ' ';
editDiv1.appendChild(saveButton1);
quesEdit.parentNode.replaceChild(editDiv1,quesEdit);
var editDiv2 = document.createElement("div");
editDiv2.id = "editDiv2"
var ansTextArea = document.createElement("textarea");
ansTextArea.innerHTML += ansEditText;
var saveButton2 = document.createElement("button");
saveButton2.innerHTML = "Save";
editDiv2.appendChild(ansTextArea);
editDiv2.innerHTML += ' ';
editDiv2.appendChild(saveButton2);
ansEdit.parentNode.replaceChild(editDiv2,ansEdit);
});
}
I have tried to focus the textarea using
quesTextArea.focus();
but its not working where questextArea is the name of the textarea. Please help how i can do it.

For the element could be got focused, it must be in the DOM when you invoke focus on it. You should invoke focus function after replaceChild function
editDiv1.appendChild(quesTextArea);
editDiv1.appendChild(saveButton1);
quesEdit.parentNode.replaceChild(editDiv1,quesEdit);
quesTextArea.focus();
I've created a simple sample as below link, you could check it
https://jsfiddle.net/pd9c6c7a/3/

Add autofocus attribute to the textarea element. So that whenever it is appended to the DOM, will get cursor activated in it.

The 'textarea' has not been added to window to be shown, an element must be part of the document object tree. In case that didn't work, add a 50ms delay.
setTimeout(function(){e.focus();}, 50);

Try the following approach:
var body=document.getElementsByTagName('body')[0];
var quesTextArea=document.createElement("textarea");
var button=document.createElement("button");
button.innerHTML = "click Me";
button.addEventListener("click",function(e){
e.preventDefault();
quesTextArea.focus();
});
body.appendChild(quesTextArea);
body.appendChild(button);
<html>
<body>
<body>
</html>
Try to add preventDefault.

var div = document.getElementById('parent');
var txt = document.createElement('textarea');
div.appendChild(txt);
txt.focus();
<html>
<head></head>
<body>
<div id="parent">
<input type="text" value="" />
</div>
</body>
</html>
The element must be in the DOM when you invoke the focus function. Move your focus() function after the appendChild() is invoked.
quesTextArea.innerHTML += quesEditText;
var saveButton1=document.createElement("button");
saveButton1.innerHTML="Save";
editDiv1.appendChild(quesTextArea);
quesTextArea.focus();

How to add an Id, value and onclick event to a dynamic generated div

i have to add onglets (dev) and affect them an id, value and onclick.
i tried by this way but is not working
function functionDeleteLevel(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var formData = new FormData();
formData.append("valeur", "deleteLevel");
ajaxPost("/deleteLevel", formData, function (reponse) {
var data = JSON.parse(reponse);
data.forEach(function(level){
var newLi = document.createElement("li");
newLi.value = level.level;
newLi.id = "levelId_"+level.level;
newLi.innerHTML = 'onclick="functionSelectedLevel(this.id)"';
newLi.innerHTML = '<a data-toggle="tab">Niveau'+level.level+'</a>';
s2.appendChild(newLi);
});
});
}

you can use
newLi.addEventListener('click', function() {functionSelectedLevel(this.id);})
or
newLi.onclick = function() {functionSelectedLevel(this.id);};
or - with a bit of a change to functionSelectedLevel
newLi.addEventListener('click', functionSelectedLevel)
or
newLi.onclick = functionSelectedLevel;
functionSelectedLevel would then be
functionSelectedLevel() {
// here, the value of this is the element that was clicked
do things with this.id
}

How to refer to a dynamically created div with JS

So I am creating div's onclick and giving them incrementally greater Id's. I want to then change the CSS properties of each div but I can't seem to select it with document.getElementById.
Obviously I'm missing something incredibly simple here, any advice or reading would be appreciated.
JS Fiddle
Some relevant Javascript:
function createDiv(){
i++;
var newDiv = document.createElement("div");
newDiv.id = "newDiv"+i;
var e = document.getElementById("newDiv1");
e.innerHTML = "hello";
e.className = "newDivs";
var x = 50*i;
e.style.left = x+"px";
e.style.top = 200+"px";
//but nothing appears
}

you have not attached your div to the DOM tree, you should first attach it then try to grab its reference:
function createDiv(){
i++;
var newDiv = document.createElement("div");
newDiv.id = "newDiv"+i;
document.body.appendChild(newDiv); // <--- Append it here
var e = document.getElementById("newDiv1");
e.innerHTML = "hello";
e.className = "newDivs";
var x = 50*i;
e.style.left = x+"px";
e.style.top = 200+"px";
//but nothing appears
}

You need to append the div into the dom see fiddle
http://jsfiddle.net/coqkg5oz/5/
function addDiv() {
var objTo = document.getElementById('container')
var divtest = document.createElement("div");
divtest.innerHTML = "new div"
objTo.appendChild(divtest)
}

You haven't added the element to the page, that's why it doesn't show up.
You don't need to use getElementById to get a reference to the element, as you already have a reference to the element.
Example:
function createDiv(){
i++;
var e = document.createElement("div");
e.id = "newDiv"+i;
document.body.appendChild(e);
e.innerHTML = "hello";
e.className = "newDivs";
var x = 50*i;
e.style.left = 100+"px";
e.style.top = 200+"px";
}
Demo: http://jsfiddle.net/Guffa/coqkg5oz/8/

Trying to delete element with Javascript

When a client clicks the "buy" button, I create a popup on screen which allows them to fill in a purchase form. On the poput I want to have a "x" button so they can close it and return to the main website.
The code I run to generate the popup is:
var o = document.createElement('div');
o.className = 'overlay';
var p = document.createElement('div');
p.className = 'buyticketid';
p.setAttribute('id','buy-ticket');
var cb = document.createElement('p');
cb.className = 'closeButton';
cb.setAttribute('onclick','close()');
cb.setAttribute('title','Close');
cb.setAttribute('id','close-btn');
var x = document.createTextNode('x');
cb.appendChild(x);
p.appendChild(cb);
document.getElementsByTagName('body')[0].appendChild(o);
document.getElementsByTagName('body')[0].appendChild(p);
The code I use to try and delete the popup (ID = 'buy-ticket') is:
function close(){
var element = document.getElementById("buy-ticket");
element.parentNode.removeChild(element);
}
For some reason when I click the close button nothing happens. If anyone could point me in the right direction that would be awesome.

you can assign a click handler to a dom element like this: element.onclick = callback; where callback is your callback function.
This works as expected:
function close(){
var element = document.getElementById("buy-ticket");
element.parentNode.removeChild(element);
}
var o = document.createElement('div');
o.className = 'overlay';
var p = document.createElement('div');
p.className = 'buyticketid';
p.setAttribute('id','buy-ticket');
var cb = document.createElement('p');
cb.className = 'closeButton';
cb.onclick = close;
cb.setAttribute('title','Close');
cb.setAttribute('id','close-btn');
var x = document.createTextNode('x');
cb.appendChild(x);
p.appendChild(cb);
document.getElementsByTagName('body')[0].appendChild(o);
document.getElementsByTagName('body')[0].appendChild(p);