i want display key values objects on click. each button has click listener calling prototypes method various instances of employee.
this works ok-ish.
but want output method following when button clicked: - opacity:0, slide height of #demo 1px(just small), , when new innerhtml value in #demo, animate height 30px , opacity 0. have tried pass callback functions in many ways, getting type error. next issue how set context when working addeventlistener , somehow possible around assigning different function each eventlistener?
function employee(name, jobtitle, born) { this.name=name; this.jobtitle=jobtitle; this.born=born; this.callback = function(){}; } employee.prototype.output = function(){ var pee = document.queryselector("p"); pee.style.opacity = 0; pee.style.height = "30px"; pee.style.opacity = 1; return this.name + "is " + this.jobtitle + " born in year" + this.born}; link codepen:
http://codepen.io/damianocel/pen/meaegx
javascript please, can in jquery, there still learning how happens in vanilla js.
you use css transition, first question matter of waiting transition finish before put text , set height 30px, otherwise interrupt animation immediately. can listen transitionend event.
i suggest not set style property directly, use classes instead. want clip text not overflow when animating height.
for second question: can use bind make function reference has this , possibly arguments fixed it.
here code after having made adaptations on points:
function employee(name, jobtitle, born) { this.name=name; this.jobtitle=jobtitle; this.born=born; this.callback = function(){}; } employee.prototype.output = function(target){ var whenhidden = function () { target.textcontent = this.name + " " + this.jobtitle + " born in year " + this.born; target.removeeventlistener('transitionend', whenhidden); target.classlist.remove('hide'); }.bind(this); target.addeventlistener('transitionend', whenhidden); target.classlist.add('hide'); }; var fred = new employee("fred flintstone", "caveman", 1970); var mike = new employee("mike francois", "wrestler", 1965); var demo = document.getelementbyid("demo"); var output = employee.prototype.output; document.getelementbyid("a").addeventlistener('click', output.bind(fred, demo)); document.getelementbyid("b").addeventlistener('click', output.bind(mike, demo));p { border:2px black solid; transition:.5s; height:30px; text-overflow: clip; overflow: hidden; opacity: 1; } p.hide { height: 1px; opacity: 0.1; }<button id="a">fred</button> <button id="b">mike</button> <button id="c">tom</button> <p id="demo"></p>