Was ist mit diesem Handler falsch? JS

Question

Ich brauche den Text nur in der ausgewählten Zelle geändert werden. Das erste Mal ist alles gut. Wenn ich es in einer anderen Zelle versuche, ändert sich der Text auch so, wie er sollte, aber gleichzeitig auch in der vorherigen, und so weiter.

//change text 
 
var changeText = function(e) { 
 
    var inputChangeText, applyChanges, blockTd; 
 
    inputChangeText = document.getElementById('changeText'); 
 
    applyChanges = document.getElementById('applyToChanges'); 
 

 
    inputChangeText.value = e.target.textContent; 
 

 
    applyChanges.addEventListener('click', function() { 
 
    e.target.textContent = inputChangeText.value; 
 
    }, false); 
 
} 
 

 
//allow to change 
 
function eventsInTable() { 
 
    var checkBoxChanges = document.getElementById('changes'); 
 
    var table = document.getElementById('tableCinema'); 
 

 
    if (checkBoxChanges.checked) { 
 
    table.addEventListener('click', changeText, false); 
 
    } else { 
 
    table.removeEventListener('click', changeText, false); 
 
    alert("You haven't access to change"); 
 
    } 
 
}

<table id="tableCinema"> 
 
    <tr> 
 
    <th>Type</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>*</td> 
 
    <td>*</td> 
 
    </tr> 
 
</table> 
 

 
Change: <input id="changes" type="checkbox" name="" onclick="eventsInTable()"><br> Get text for change: <input id="changeText" type="text" name="" value=""> 
 

 
<button id="applyToChanges">Apply</button>

Answer 1

Jedes Mal, wenn Sie einen anderen changeText() Zuhörer hinzufügen rufen, und sie alle laufen, wenn Sie auf die Schaltfläche Apply.

Anstatt einen Listener in changeText() hinzuzufügen, setzen Sie einfach eine globale Variable auf das Element, das geändert werden muss.

var targetElement; 
 

 
var inputChangeText = document.getElementById('changeText'); 
 

 
var applyChanges = document.getElementById('applyToChanges'); 
 
applyChanges.addEventListener('click', function() { 
 
    if (targetElement) { 
 
    targetElement.textContent = inputChangeText.value; 
 
    } 
 
}, false); 
 

 
//change text 
 
var changeText = function(e) { 
 
    inputChangeText.value = e.target.textContent; 
 
    targetElement = e.target; 
 
} 
 
//allow to change 
 
function eventsInTable() { 
 
    var checkBoxChanges = document.getElementById('changes'); 
 
    var table = document.getElementById('tableCinema'); 
 

 
    if (checkBoxChanges.checked) { 
 
    table.addEventListener('click', changeText, false); 
 
    } else { 
 
    table.removeEventListener('click', changeText, false); 
 
    alert("You haven't access to change"); 
 
    } 
 
}

<table id="tableCinema"> 
 
    <tr> 
 
    <th>Type</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>*</td> 
 
    <td>*</td> 
 
    </tr> 
 
</table> 
 

 
Change: <input id="changes" type="checkbox" name="" onclick="eventsInTable()"><br> Get text for change: <input id="changeText" type="text" name="" value=""> 
 

 
<button id="applyToChanges">Apply</button>

Answer 2

Hoffnung, dies hilft Ihnen.

var input = document.querySelector('#changeText'); 
 
var button = document.querySelector('#applyToChanges'); 
 
var table = document.querySelectorAll('table tr td'); 
 

 
var tobechanged = null; // remembers which td was last clicked 
 
for(i=0;i<table.length;i++){ // adds onclicked event for every td element 
 
    table[i].onclick = function(){ 
 
    tobechanged = this; 
 
    input.value = this.innerHTML; 
 
    } 
 
} 
 

 
button.onclick = function(){ 
 
    tobechanged.innerHTML = input.value; // make changes to innerhtml of last td clicked. 
 
}

table td{ 
 
border:1px solid black; 
 
}

<table id="tableCinema"> 
 
    <tr> 
 
     <th >Type</th> 
 
    </tr>     
 
    <tr> 
 
     <td >1</td><td >*</td><td >*</td> 
 
    </tr>     
 
</table> 
 

 
Get text for change: <input id="changeText" type="text" name="" value=""> 
 

 
<button id="applyToChanges">Apply</button>