Javascript 所选项目的按钮功能

我正在做待办事项列表应用程序。用户输入后，信息将显示在表中。我的目标是从该表中标记所选项目，并对其应用一些按钮功能（将其标记为已完成、重要或删除该项目）。然而，我找到了选择的部分，但无法使按钮工作

这是打印屏幕 !（）

HTML

日期
任务
谁负责
日期
任务
负责的
日期
任务
负责的
'''
//选择器
const toDoDate=document.getElementById（'todo-date'）；
const toDoInput=document.getElementById（'todo-task'）；
const toDoResp=document.getElementById（'todo-responsible'）；
const toDoButton=document.getElementById（'todo-button'）；
const completeBtn=document.getElementById（'complete-btn'）；
const impBtn=document.getElementById（'imp-btn'）；
const trashBtn=document.getElementById（'trash-btn'）；
const tblResult=document.getElementById（'tbl-result'）；
const cntTable=document.getElementById（'content-table'）；
const cntcell=document.getElementsByTagName（'td'）；
//事件侦听器
addEventListener（'click'，addToDo）；
CompleteTn.addEventListener（“单击”，addComplete）；
impBtn.addEventListener（'click'，markImp）；
trashBtn.addEventListener（'click'，deletBtn）；
//功能
函数addToDo（事件）{
event.preventDefault（）；
设newRow=tblResult.insertRow（0）；
设cell1=newRow.insertCell（0）；
设cell2=newRow.insertCell（1）；
设cell3=newRow.insertCell（2）；
cell1.innerHTML=toDoDate.value；
cell2.innerHTML=toDoInput.value；
cell3.innerHTML=toDoResp.value；
选择行（）；
}
函数selectRow（）{
对于（i=0；i

---

按钮正在工作，功能addCompleted未完成。任何类型的帮助或建议都会有所帮助。

记住，在函数中声明变量时，其作用域在该函数中。您不能在该方法之外访问它。您的错误是试图从另一个无法访问此变量的函数访问“rowSelected”变量。将此变量设为全局变量，以便可以访问。请参考JS变量范围

我更正了你的代码。请查收

让行选择
var init=（）=>{
const toDoDate=document.getElementById（'todo-date'）；
const toDoInput=document.getElementById（'todo-task'）；
const toDoResp=document.getElementById（'todo-responsible'）；
const toDoButton=document.getElementById（'todo-button'）；
const completeBtn=document.getElementById（'complete-btn'）；
const impBtn=document.getElementById（'imp-btn'）；
const trashBtn=document.getElementById（'trash-btn'）；
const tblResult=document.getElementById（'tbl-result'）；
const cntTable=document.getElementById（'content-table'）；
const cntcell=document.getElementsByTagName（'td'）；
//事件侦听器
addEventListener（'click'，addToDo）；
CompleteTn.addEventListener（“单击”，addComplete）；
impBtn.addEventListener（'click'，markImp）；
trashBtn.addEventListener（'click'，deletBtn）；
//功能
函数addToDo（事件）{
event.preventDefault（）；
设newRow=tblResult.insertRow（0）；
设cell1=newRow.insertCell（0）；
设cell2=newRow.insertCell（1）；
设cell3=newRow.insertCell（2）；
cell1.innerHTML=toDoDate.value；
cell2.innerHTML=toDoInput.value；
cell3.innerHTML=toDoResp.value；
选择行（）；
}
函数selectRow（）{
对于（i=0；i<strike> 

    <form>
            <div>
                <label for="todo-date">Date</label>
                <input type="date" class="todo-date" id="todo-date">
            </div>
            <div>
                <label for="todo-task">Task</label>
                <input type="text" class="todo-input" id="todo-task">
            </div>
            <div>
                <label for="todo-responsible">Who is responsible</label>
                <input type="text" class="todo-responsible" id="todo-responsible">
            </div>
            <div>
                <button class="todo-button" id="todo-button">
                    <i class="fas fa-plus-square"></i>
            </button>
            </div>
    </form>
    <table class="content-table" id="content-table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Task</th>
                <th>Responsible</th>
            </tr>
        </thead>
        <tbody  id="tbl-result" class="tblResult">
            <tr class="tbr-click">
                <td>Date</td>
                <td>Task</td>
                <td>Responsible</td>
            </tr>
        </tbody>
    </table>
    <section>
        <div>
            <button class="complete-btn" id="complete-btn">
                <i class="fas fa-check"></i>
            </button>
        </div>
        <div>
            <button class="imp-btn" id="imp-btn">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <div>
            <button class="trash-btn" id="trash-btn">
                <i class="fas fa-exclamation"></i>
            </button>
        </div>
    </section>
 


    <script src="app.js"></script>

</body>
</html>
</strike>


'''
// Selectors

    const toDoDate = document.getElementById('todo-date');
    const toDoInput = document.getElementById('todo-task');
    const toDoResp = document.getElementById('todo-responsible');
    const toDoButton = document.getElementById('todo-button');
    const completeBtn = document.getElementById('complete-btn');
    const impBtn = document.getElementById('imp-btn');
    const trashBtn = document.getElementById('trash-btn');
    const tblResult = document.getElementById('tbl-result');
    const cntTable = document.getElementById('content-table');
    const cntCells = document.getElementsByTagName('td');

    // Event listeners
    toDoButton.addEventListener('click', addToDo);
    completeBtn.addEventListener('click', addComplete);
    impBtn.addEventListener('click', markImp);
    trashBtn.addEventListener('click', deletBtn);


// Functions


function addToDo(event) {
    event.preventDefault();

    let newRow = tblResult.insertRow(0);
    let cell1 = newRow.insertCell(0);
    let cell2 = newRow.insertCell(1);
    let cell3 = newRow.insertCell(2);

    cell1.innerHTML = toDoDate.value;
    cell2.innerHTML = toDoInput.value;
    cell3.innerHTML = toDoResp.value;
    
    selectRow();
}

function selectRow () {
    for (i=0; i < cntCells.length; i++) {
        cntCells[i].onclick = function () {
            let indexSel = this.parentNode.rowIndex;
            let rowsNotSelected = cntTable.getElementsByTagName('tr');
            for (let row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            let rowSelected = cntTable.getElementsByTagName('tr')[indexSel];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.classList.add('selected'); 
        }
    }
}


function addComplete () {
    if (rowSelected.classList.contains('selected')) {
        console.log('hey');
    } else {
        console.log('no');
    }
 }

 function markImp () {
    console.log('Mark');
 }

 function deletBtn () {
    console.log('DELETE');
 }
'''

let rowSelected;
function selectRow () {
for (i=0; i < cntCells.length; i++) {
        cntCells[i].onclick = function () {
        let indexSel = this.parentNode.rowIndex;
        let rowsNotSelected = cntTable.getElementsByTagName('tr');
        for (let row = 0; row < rowsNotSelected.length; row++) {
            rowsNotSelected[row].style.backgroundColor = "";
            rowsNotSelected[row].classList.remove('selected');
        }
       //do not re-declare rowSelected, just assign;
        rowSelected = cntTable.getElementsByTagName('tr')[indexSel];
        rowSelected.style.backgroundColor = "yellow";
        rowSelected.classList.add('selected');
    }
  }
}