4 Replies - 606 Views - Last Post: 20 December 2013 - 09:21 AM

#1 AIintern  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 06-June 12

Button Keeps Dissapearing after click. (Event Listner)

Posted 19 December 2013 - 09:01 AM

hello.

I am basically trying to list out strings submitted by a user underneath the submit button, but every time I click submit, the button diss appears.

I would like the button to be used as many times as possible.

any suggestions?

here is the html
<div id="captionSection">
Caption<br>
 <input type="textbox" name="caption" id="captionSubmission" size="80">
 <input type="submit" value="submit" id="captionsubmit">
 <div id = "captionLister">
 </div>
</div>



and here is the js

function init() {

var button = document.getElementById("captionsubmit");
  if(button.addEventListener){
 	 button.addEventListener("click", function() { createCaption();}, false);
  } 
  	else if(button.attachEvent){
  		button.attachEvent("onclick", createCaption());
  	}
  };
  
  if(window.addEventListener){
  	window.addEventListener("load", init, false);
  } 
  else if(window.attachEvent){
  	window.attachEvent("onload", init);
  } 
  else{
  	document.addEventListener("load", init, false);
}

function createCaption(){
	var myElement = document.createElement('div');
    myElement.className = 'captionList';
    captionLister.appendChild(myElement);

    var cap = document.getElementById("captionSubmission");
    myElement.appendChild(cap);
}



any help would be awesome!

thanks guys!

Is This A Good Question/Topic? 0
  • +

Replies To: Button Keeps Dissapearing after click. (Event Listner)

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Button Keeps Dissapearing after click. (Event Listner)

Posted 19 December 2013 - 10:37 AM

do you use the submit button within a form?
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3834
  • View blog
  • Posts: 13,582
  • Joined: 12-December 12

Re: Button Keeps Dissapearing after click. (Event Listner)

Posted 19 December 2013 - 11:08 AM

As Dormilich indicates, unless you need a submit-button, I would just use a simple button.

The variable captionLister is not defined. I appreciate that modern browsers can associate this variable with the element having this id but I, personally, don't like to rely on this (as yet).

Also, unless the div is given a height then it collapses when I run the code, and it is not apparent, visually, that a new div has been added. Giving the div a height, and perhaps a border, confirms that the code works. As it is a div, though, then presumably it will be given some content - in which case a height would not need to be specified.

Added: The button doesn't disappear for me, it just jumps to the left-side of the page.

This post has been edited by andrewsw: 19 December 2013 - 11:06 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Button Keeps Dissapearing after click. (Event Listner)

Posted 19 December 2013 - 11:24 AM

View PostAIintern, on 19 December 2013 - 05:01 PM, said:

button.addEventListener("click", function() { createCaption();}, false);

no need to use a wrapper function here:
button.addEventListener("click", createCaption, false);


same goes for IE, although it probably just ignores the function call1).




1) - this could become an issue if you use functions as return values.
Was This Post Helpful? 0
  • +
  • -

#5 CY5  Icon User is offline

  • D.I.C Regular

Reputation: 12
  • View blog
  • Posts: 350
  • Joined: 28-September 12

Re: Button Keeps Dissapearing after click. (Event Listner)

Posted 20 December 2013 - 09:21 AM

In my case Button is not disappearing, i have modified your "Html" and "js" code. Please look at the demo
Demo
<div id="captionSection">Caption
    <br/>
    <input type="textbox" name="caption" id="captionSubmission" size="80" />
    <Button id="captionsubmit">Submit</Button>
    <div id="captionLister"></div>
</div>


function init() {

    var button = document.getElementById("captionsubmit");
    if (button.addEventListener) {
        button.addEventListener('click', createCaption(), false);
    } else if (button.attachEvent) {
        button.attachEvent('onclick', createCaption());
    }
}

if (window.addEventListener) {
    window.addEventListener("load", init, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", init);
} else {
    document.addEventListener("load", init, false);
}

function createCaption() {
    var myElement = document.createElement('div');
      var div1 = document.getElementById("captionSection");
    myElement.className = 'captionList';
    div1.appendChild(myElement);

    var cap = document.getElementById("captionSubmission");
    myElement.appendChild(cap);
}


This post has been edited by andrewsw: 20 December 2013 - 09:27 AM
Reason for edit:: Removed large quote

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1