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);
Related
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?
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();
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/
I'm trying to create a submenu for a menu item, i have got as far as creating a list of items and using a mouseover event handler but the submenu just remains there. i need it to be removed once the mouse clears away from the submenu div, not the label div. The mouseover function works but the mouseout im having a problem with. I am new to using javascript and DOM
This is the code (DOM):
var creatbtndiv = document.createElement("div");
var creatbtn = document.createElement("button");
creatbtn.innerHTML = "Click Me";
var creatlbl = document.createElement("label");
creatlbl.innerHTML = "Hover Over Me ";
creatbtndiv.appendChild(creatlbl);
creatbtndiv.appendChild(creatbtn);
document.body.appendChild(creatbtndiv);
var list = function () {
var creatDiv = document.createElement("div");
creatDiv.id = "submenudiv";
creatDiv.className = "submenudiv";
var creatul = document.createElement("ul");
for(index = 0; index < 5; ++index){
li = document.createElement("li");
li.className = "list";
li.innerHTML = "Submenu" + index;
creatul.appendChild(li);
}
creatDiv.appendChild(creatul);
document.body.appendChild(creatDiv);
};
//If the cursor hovers over the label, activate this function//
creatlbl.onmouseover = function () {
var alert = confirm("yes master");
list();
};
creatDiv.onmouseout = function(){
var confirm = confirm("the mouse is out");
list.removeChild(creatDiv);
};
creatDiv its outside its scope, so this function does nothing:
creatDiv.onmouseout = function(){
//var confirm = confirm("the mouse is out");
list.removeChild(creatDiv);
};
You could put this function, after:
document.body.appendChild(creatDiv);
creatDiv.onmouseout = function(){
//var confirm = confirm("the mouse is out");
this.parentNode.removeChild(this);
};
The issue is that 'creatDiv' doesn't exist until the mouseover event occurs, and thus triggers the list() function.
You cannot attach the onmouseout event to the nonexistent creatDiv.
Suggested change:
var list = function () {
var creatDiv = document.createElement("div");
creatDiv.id = "submenudiv";
creatDiv.className = "submenudiv";
var creatul = document.createElement("ul");
for(index = 0; index < 5; ++index){
li = document.createElement("li");
li.className = "list";
li.innerHTML = "Submenu" + index;
creatul.appendChild(li);
}
creatDiv.appendChild(creatul);
document.body.appendChild(creatDiv);
creatDiv.onmouseout = function(){
document.body.removeChild( this )
};
};
This will still be not quite right, though, because the div will go away when you mouse between text, but that's another issue.
I have the following javascript code which should be able to create a dialog box triggered by an onclick event in the html file.
But strangely I alway get the error Uncaught TypeError: Cannot read property 'style' of null. By the way the TypeError concerns the reopenprogram(element) function!!! I have already checked whether the element is really null but putting it in alert showed me the usual element name. I know the code looks a little bit rough but I am free for any suggestions. Here is the jsfiddle code. I am pretty new to javascript so I would be really glad if you could fully adjust the code yourself.
Please help me!
function executeprogram(element) {
var program = document.createElement("div");
var toolbar = document.createElement("div");
var title = document.createElement("div");
var minimize = document.createElement("div");
var close = document.createElement("div");
var iframe = document.createElement("iframe");
var container = document.getElementById("container");
// Create program Div //
program.id = element;
program.className = "dialog";
program.width = iframe.width;
add(element);
program.setAttribute("onmousedown", "dragstart(this)");
container.appendChild(program);
// Toolbar //
toolbar.id = "toolbar";
toolbar.width = iframe.width;
program.appendChild(toolbar);
// Title //
title.id = "title";
title.innerHTML = element;
toolbar.appendChild(title);
// Minimize //
minimize.id = "minimize";
minimize.innerHTML = "-";
minimize.onclick = minimizeprogram(element);
toolbar.appendChild(minimize);
// Close //
close.id = "close";
close.innerHTML = "x";
close.onclick = closeprogram(element);
toolbar.appendChild(close);
// Create Iframe //
iframe.frameBorder = 1;
iframe.width = "500px";
iframe.height = "250px";
iframe.id = "iframe";
iframe.src = "#";
program.appendChild(iframe);
}
// Minimize program //
function minimizeprogram(element) {
document.getElementById(element).style.display = "hidden";
}
function reopenprogram(element) {
document.getElementById(element).style.visibility = "visible";
}
// Close program //
function closeprogram(element) {
var container = document.getElementById("container");
var app = document.getElementById(element);
container.removeChild(app);
remove(element);
}
// Tabs //
function add(element) {
var tabs = document.createElement("li");
tabs.id = ""+element+"tab";
alert(element);
tabs.onclick = reopenprogram(element);
var add = document.getElementById("tabs");
add.appendChild(tabs);
}
function remove(element) {
var add = document.getElementById("tabs");
var app = document.getElementById(element+"tab");
add.removeChild(app);
}
In your fiddle, you never add an element with the id of the element argument value to the document. That is the cause.