JavaScript image click error

Question

In JavaScript, I am making a contact form, and I have tried to make an exit button, which on click, deletes the contact form. However, it doesn't work:

var box = document.createElement('div');
box.id='contactForm';
var title = document.createElement('div');
title.id='formTitle';
title.innerHTML = "Contact Us";
var i = document.createElement('img');
i.src = 'images/exitBtn.jpg';
i.id = 'exitButton';
i.addEventListener('click', function(){var b = document.getElementById('contactForm'); b.parentNode.removeChild(b);});

I tried this too:

i.addEventListener('click', function(e){var b = document.getElementById('contactForm'); b.parentNode.removeChild(b);});

What should I do?

Edit - Included all the code:

CSS

#contactForm
{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height: 650px;
    width: 525px;
    background-color: #CCC;
    margin: auto;
    z-index:9999;
    color:white;
    box-shadow: 1px 1px 1px 1px #444;
}
.contactText
{
  padding-top: 5px;
  padding-bottom: 5px;
  outline: none;
  padding-left: 20px;
  width: 480px;
  height: 31px;
  border: 1px solid #666;
  background-color: #777;
  font-family: "Iceland";
  color: #FFF;
  font-size: 1.2em;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; 
}
.contactTextArea
{
  padding-top: 10px;
  padding-bottom: 10px;
  outline: none;
  padding-left: 20px;
  width: 478px;
  resize: none;
  height: 125px;
  border: 1px solid #666;
  background-color: #777;
  font-family: "Iceland";
  color: #FFF;
  font-size: 1.2em;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; 
}
#contactHolder
{
  margin: auto;
  position: relative;
  width: 502px;
  height: 615px;
}
.contactText:hover,
.contactTextArea:hover
{
  background-color: #888;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; 
}
#exitButton
{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  float: right;
}
#exitButton:hover
{
  cursor: pointer;
}
#contactSend
{
  padding-top: 9.5px; 
  padding-bottom: 9.5px;
  height: 35px;
  background-color: #888;
  width: 125px;
  float: right;
  font-family: "Iceland";
  color: #FFF;
  font-size: 1.2em;
}
.contactText:focus, 
.contactTextArea:focus
{
  background-color: #999;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out; 
}
#formTitle
{
    text-align: center;
    width: 525px;
    height: 35px;
    font-family: "Iceland";
    font-size: 2.5em;
    background-color: #EEEEEE;
    color: #000;
}

JavaScript

var w = document.getElementById("wrapper");
w.style.opacity = 0.4;
w.style.filter = 'alpha(opacity="40");';
var box = document.createElement('div');
box.id='contactForm';
document.body.appendChild(box);
var title = document.createElement('div');
title.id='formTitle';
title.innerHTML = "Contact Us";
var i = document.createElement('img');
i.src = 'images/exitBtn.jpg';
i.id = 'exitButton';
i.addEventListener('click', function(){var b = document.getElementById('contactForm'); b.parentNode.removeChild(b);});
title.appendChild(i);
box.appendChild(title);
box.innerHTML += '<br>';
var h = document.createElement('div');
h.id='contactHolder';
box.appendChild(h);
var name = document.createElement('input');
name.placeholder = 'Name';
name.className = 'contactText';
h.appendChild(name);
h.innerHTML += '<p></p>';
var mail = document.createElement('input');
mail.placeholder = 'E-Mail Address';
mail.className = 'contactText';
h.appendChild(mail);
h.innerHTML += '<p></p>';
var message = document.createElement('textarea');
message.placeholder = 'Message';
message.className = 'contactTextArea';
h.appendChild(message);
h.innerHTML += '<p></p>';
var send = document.createElement('div');
send.id = 'contactSend';
send.innerHTML = 'Send Message';
h.appendChild(send);

I don't get it, you added the parameter e but you don't use it? That's not different than the other version — Sterling Archer
– Sterling Archer, Commented Dec 3, 2013 at 20:52
Did you append those elements? what doesn't work? what type of error you get? — Givi
– Givi, Commented Dec 3, 2013 at 20:59

Givi · Accepted Answer · 2013-12-04 10:31:40Z

You should remove the line box.innerHTML += '<br>';
Element.innerHTML MDN

When you using innerHTML you deleting all content and recreating it, so event listener is added to an i element that doesn't exist any more.

Let's assume that you have similar html structure.

<div id="wrap">
    <div id="first"></div>
</div>

So, if you use innerHTML you lose reference to the actual object, because it's re-created.

(function () {
    var wrap = document.getElementById("wrap"),
        first = document.getElementById("first"),
        second = document.createElement("div");

    second.id = "second";
    wrap.appendChild(second);

    console.log(first === document.getElementById("first")); // true
    console.log(second === document.getElementById("second")); // true

    wrap.innerHTML += "<div id='third'></div>";

    console.log(first === document.getElementById("first")); // false
    console.log(second === document.getElementById("second")); // false
}());

Look at jsFiddle to better understand.

Instead, you can create new <br> element and then append it.

var br = document.createElement("br"); box.appendChild(br);

Or, at the bottom of your script file you can get new img file and then add event handler.

document.querySelector("#formTitle > img").addEventListener("click", function(e) { 
    var ele = document.getElementById("contactForm");
    ele.parentNode.removeChild(ele);
}, false);

Collectives™ on Stack Overflow

JavaScript image click error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related