CODEWITHSUNDEEP
javascript
hazy
hazy

Reputation: 27

Uncaught TypeError: Cannot set property

I was in confused on what earth why its returning an error

Uncaught TypeError: Cannot set property 'outerHTML' of null
at delete_row (table_script.js:10)
at HTMLInputElement.onclick (table.html:1)`

Can someone help me determine how to fix the error.

My Code:

var temp_image;
var temp_title;
var temp_description;



function delete_row(no) {
  if (confirm("Are you sure you want to delete?")) {
    document.getElementById("row" + no + "").outerHTML = "";
  } else
    alert("Data is not deleted");
}


function add() {
  var new_image = document.getElementById("new_image").value;
  var new_title = document.getElementById("new_title").value;
  var new_description = document.getElementById("new_description").value;

  if (temp_image && temp_description && temp_title != null) {
    alert("hello world");
  } else if (new_image && new_title && new_description != "") {
    var table = document.getElementById("data_table");
    var table_len = (table.rows.length) - 1;
    var row = table.insertRow(table_len).outerHTML =
      "<tr class='myrow'><td id='row" + table_len + "'><img id='image_row" + table_len + "' src = " + new_image + "><td id='title_row" + table_len + "' class='titleData'>" + new_title +
      "</td><td class='descData' id='description_row" + table_len + "'>" + new_description + "</td><td><input type='button' value='Delete' class='delete' onclick='delete_row(this);'><input type='button' value='Edit' class='edit' onclick='edit_row(" + table_len + ",this)'></td></td></tr>";

    document.getElementById("new_image").value = "";
    document.getElementById("new_title").value = "";
    document.getElementById("new_description").value = "";
  }
}
<form id="myForm">
  <table id="data_table" align='center' cellspacing=2 cellpadding=5>
    <tr>
      <th>Image Link</th>
      <th>Title</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><input type="text" id="new_image"></td>
      <td><input type="text" id="new_title"></td>
      <td><input type="text" id="new_description"></td>
      <td><input type="button" class="add" value="SAVE" id="save_btn" onclick="add()"></td>
    </tr>
  </table>
</form>

I just wanted is to delete row when the delete button is clicked. It seems the outerHTML has an error since it will return null value. Thanks.

Upvotes: 0

Views: 1127

Answers (1)

Asons
Asons

Reputation: 87191

You get an error as you with your onclick='delete_row(this);' pass an object this, not a row number.

Instead you could try something like this, where to find the closest() tr and delete that, e.g.

function delete_row(el)
{
    if (confirm("Are you sure you want to delete?")) {
        el.closest('tr').remove();
    } else 
        alert("Data is not deleted");
}

If to keep your existing delete function, change your onlick to this

onclick='delete_row(" + table_len + ");'

I would still recommend the first suggestion, as using .outerHTML to delete an element is not that very readable.

Or you could do like this, with onclick='delete_row(" + table_len + ");'

function delete_row(no)
{
    if (confirm("Are you sure you want to delete?")) {
        document.getElementById("row" + no).parentNode.remove();
    } else 
        alert("Data is not deleted");
}

Updated, removed my second suggestion.

Thanks to Karan, using the existing solution might back fire, and the reason is you are using (table.rows.length) - 1 to get the id.

The issue it can create is you end up with 2 rows having the same id.

Upvotes: 2

Related Questions