Here is a function that I have:
var save = document.getElementById('savethis'+this.parentNode.childNodes[1].id);
save.addEventListener('click', savethis.bind(this), false);
function savethis() {
this.removeEventListener('click', edit);
var a = this.childNodes[0].childNodes[0].id;
console.log(a);
var b = document.getElementById(a);
console.log(document.getElementById(a).id.replace('minedit',''));
console.log(b.value);
this.innerHTML = b.value;
this.parentNode.cells[4].className = 'text-center min-edit';
setTimeout(function() {this.addEventListener('click',edit);},1);
}
Now, in another function:
var minedit = document.getElementsByClassName('min-edit');
for (var m=0;m<minedit.length;m++){
minedit[m].addEventListener('click', edit);
}
function edit(){
var avalue = this.innerHTML;
console.log(avalue);
if (this.className.indexOf('input-open')>=0){
}
else {
this.className += ' input-open';
var content = '';
content += '<div class="input-group editable-input"><input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control"><span class="input-group-addon editable-input" id="savethis'+this.parentNode.childNodes[1].id+'"><i class="ion-android-done" ></i></span><span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
this.innerHTML = content;
valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;
var save = document.getElementById('savethis'+this.parentNode.childNodes[1].id);
save.addEventListener('click', savethis.bind(this), false);
}
}
function savethis() {
this.removeEventListener('click', edit);
var a = this.childNodes[0].childNodes[0].id;
var b = document.getElementById(a);
this.innerHTML = b.value;
this.parentNode.cells[4].className = 'text-center min-edit';
setTimeout(function() {this.addEventListener('click',edit);},1);
}
When you check the fiddle, you can see that the input box opens and closes on the first click but throws an error on the second click.
TypeError: this.className is undefined
This error stems from this line in the code:
if (this.className.indexOf('input-open')>=0){
I am confused as to why className would be undefined, especially since I define its name within the savethis function. Can someone help clarify and provide a solution?