Clash Royale CLAN TAG#URR8PPP

Need help updating the index for selected row

I have been stuck on an issue where I am trying to use Javascript to add and remove a row from a table.

I got the add part working, the delete somewhat. The delete fails if you delete the first row or a row in the middle (live code can be seen here

I uploaded its code on PasteBin

<script type="text/javascript">


var itemNumber = 0
var currentRow = 0;
var selectedRow = 0;

function theIndex(theRow)
selectedRow = theRow;


document.getElementById("addItem").addEventListener("click", function()

if (document.getElementById('whatToDo').value != "")
currentRow++;

var table = document.getElementById('myList');
var row = table.insertRow(currentRow);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);

itemNumber++;
// alert(currentRow);
// cell1.innerHTML = itemNumber;
cell2.innerHTML = document.getElementById('whatToDo').value;
cell3.innerHTML = document.getElementById('whenToDo').value;
cell4.innerHTML = document.getElementById('whereToDo').value;
row.addEventListener('click', theIndex.bind(null, currentRow));

document.getElementById('whatToDo').value = "";
document.getElementById('whenToDo').value = "";
document.getElementById('whereToDo').value = "";

);


document.getElementById("removeItem").addEventListener("click", function()

// var theRow = document.getElementById('whatToMark').value;
var theRow = selectedRow;
alert("index: " +theRow + " elements: " + currentRow);

if (theRow > 0)

document.getElementById("myList").deleteRow(theRow);
document.getElementById('whatToMark').value = "";
currentRow--;
itemNumber--;

selectedRow = 0;
);

document.getElementById("markAsDone").addEventListener("click", function()

// var theRow = document.getElementById('whatToMark').value;
var theRow = selectedRow;

alert("index: " +theRow + " elements: " + currentRow);

var table = document.getElementById('myList');
if (theRow != 0)

table.rows[theRow].style.setProperty("text-decoration", "line-through");
document.getElementById('whatToMark').value = "";


selectedRow = 0;
);

</script>


I am learning Javascript and wanted to do more than the exercise that was being given by adding new features to it.

selectedRow

document.getElementById('whatToMark').value = "";

whatToMark

2 Answers
2

Your approach to mark the current selected row has some issues:

row.addEventListener('click', theIndex.bind(null, currentRow));


Instead of using a global variable I suggest to use a row attribute (or class). Hence, change that line to:

row.addEventListener('click', function(e)
document.querySelectorAll('tr[selected]').forEach(function(item)
item.removeAttr('selected');
)
row.setAttribute('selected', true);
);


Add the attribute selected for the current row and remove the same attribute for other rows.

In this way, when you need to get the current selected row you can simply:

var rSelected = document.querySelector('tr[selected]');
var theRow = (rSelected == null) ? 0 : rSelected.rowIndex;


var itemNumber = 0
var currentRow = 0;
var selectedRow = 0;

function theIndex(theRow)
selectedRow = theRow;

document.getElementById("addItem").addEventListener("click", function ()
if (document.getElementById('whatToDo').value != "")
currentRow++;
var table = document.getElementById('myList');
var row = table.insertRow(currentRow);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);

itemNumber++;
// alert(currentRow);
// cell1.innerHTML = itemNumber;
cell2.innerHTML = document.getElementById('whatToDo').value;
cell3.innerHTML = document.getElementById('whenToDo').value;
cell4.innerHTML = document.getElementById('whereToDo').value;
//row.addEventListener('click', theIndex.bind(null, currentRow));
row.addEventListener('click', function(e)
document.querySelectorAll('tr[selected]').forEach(function(item)
item.removeAttr('selected');
)
row.setAttribute('selected', true);
);

document.getElementById('whatToDo').value = "";
document.getElementById('whenToDo').value = "";
document.getElementById('whereToDo').value = "";

);


document.getElementById("removeItem").addEventListener("click", function ()
// var theRow = document.getElementById('whatToMark').value;
var rSelected = document.querySelector('tr[selected]');
var theRow = (rSelected == null) ? 0 : rSelected.rowIndex;
if (theRow > 0)
document.getElementById("myList").deleteRow(theRow);
//document.getElementById('whatToMark').value = "";
currentRow--;
itemNumber--;

selectedRow = 0;
);

document.getElementById("markAsDone").addEventListener("click", function ()
// var theRow = document.getElementById('whatToMark').value;
var theRow = selectedRow;
alert("index: " + theRow + " elements: " + currentRow);
var table = document.getElementById('myList');
if (theRow != 0)

table.rows[theRow].style.setProperty("text-decoration", "line-through");
document.getElementById('whatToMark').value = "";

selectedRow = 0;
);

<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<table class="table table-hover">
<tr>
<td colspan="3">
<h1>To Do List Example</h1>
</td>
</tr>
<tr>
<th><label>Item</label></th>
<th><label>Date</label></th>
<th><label>Location</label></th>
</tr>
<tr>
<td>
<input type="text" id="whatToDo" value="">
</td>
<td>
<input type="date" id="whenToDo" value="">
</td>
<td>
<input type="text" id="whereToDo" value="">
</td>
</tr>
<tr>
<td>
<button id="addItem" class="btn btn-default btn-primary active">
<i class="fas fa-plus"></i> Add This Item
</button>
</td>
<td>
<button id="markAsDone" class="btn btn-default ">
<i class="fas fa-check"></i> Mark As Done
</button>
</td>
<td>
<button id="removeItem" class="btn btn-default">
<i class="fas fa-trash-alt"></i> Remove Item
</button>
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<table class="table table-hover" id="myList">
<tr>
<th><label></label></th>
<th><label>Event</label></th>
<th><label>Date</label></th>
<th><label>Location</label></th>
</tr>
</table>
</div>
</div>
</div>

This line is throwing a null value error:

document.getElementById('whatToMark').value = "";


Neither in your JS, nor in your HTML, do you ever set an element to the ID of whatToMark.

whatToMark

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.