Dynamically insert a row in an HTML table with JavaScript

Question

I have three working bits of javascript that I'm trying to combine... unsuccessfully. I'm trying to make it so when you click a button, it knows that two fields have the same entry. If not, it will make another row in a table in my HTML with the information.

document.getElementById("goRow").addEventListener("click", check)

function check () {
  if (document.getElementById("firstName").value ==       document.getElementById("lastName").value){
    prompt('First name can not be last');
  }

  else {
    function newRow() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      cell1.innerHTML = document.getElementById("firstName").value;
      cell2.innerHTML = document.getElementById("lastName").value;
      cell3.innerHTML = document.getElementById("email").value;
      cell4.innerHTML = " ";
    }
  }

Like I said, all the different parts work on their own, but I can't get them all to play nice with each other.

Like mentioned in the above comment; remove the function newRow() { and the closing } from the else statement. — www139
– www139, Commented Nov 18, 2015 at 20:48
You're also missing a closing brace } to close your function check() — Dave
– Dave, Commented Nov 18, 2015 at 20:49

AtheistP3ace · Accepted Answer · 2015-11-18 20:49:22Z

5

Why are you trying to define a function as part of an ELSE condition? You should have that on its own, and call it from the ELSE:

function check() {
    if (document.getElementById("firstName").value == document.getElementById("lastName").value) {
        prompt('First name can not be last');
    } else {
        newRow();
    }
}

function newRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = document.getElementById("firstName").value;
    cell2.innerHTML = document.getElementById("lastName").value;
    cell3.innerHTML = document.getElementById("email").value;
    cell4.innerHTML = " ";
}

edited Nov 18, 2015 at 20:49

AtheistP3ace

9,74112 gold badges45 silver badges43 bronze badges

answered Nov 18, 2015 at 20:48

durbnpoisn

4,6792 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliezer Wohl Over a year ago

thank you for the answer. I was trying to define a function as part of a Else condition because it's only my 2nd week of Javascript. Code works now, I upvoted your answer but it won't appear until I have more reputation points.

user2417483 · Accepted Answer · 2015-11-18 20:50:42Z

window.onload() {
  document.getElementById("goRow").addEventListener("click", check)
}

function check () {
  if (document.getElementById("firstName").value == document.getElementById("lastName").value){
    prompt('First name can not be last');
  } else {
    newRow();
  }
}

function newRow() {
   var table = document.getElementById("myTable");
   var row = table.insertRow(1);
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   var cell4 = row.insertCell(3);
   cell1.innerHTML = document.getElementById("firstName").value;
   cell2.innerHTML = document.getElementById("lastName").value;
   cell3.innerHTML = document.getElementById("email").value;
   cell4.innerHTML = " ";
}

Collectives™ on Stack Overflow

Dynamically insert a row in an HTML table with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related