Bold font when clicked

Question

I am trying to make the text turn bold when it is clicked and when it is clicked again it will return to normal. Function addBord(e) is what I got so far but I am not sure if I am on the right track or what I should do next. Can anyone give me an idea on what to do next?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Address Book</title>

  <script type="text/javascript">
    function addressBookItem (fname, lname, email) {
        this.fname= fname;
        this.lname = lname; 
        this.email = email;
    }

    addressBookItem.prototype.write = function() {
        // var adrbook = "<p class='ab' First Name: " + this.fname + "&ltbr /&gt";
        var adrbook = "<tr><td>"+ this.fname + "</td>";
        adrbook += "<td>" + this.lname + "</td>";
        adrbook += "<td>" + this.email + "</td></tr>";

        document.write(adrbook);
    }

  function appendRow() {
    var theTable = document.getElementById("addressBookTbl");
    // create a newRow
    var newRow = document.createElement("tr");
    var c1 = document.createElement("td");
    var c2 = document.createElement("td");
    var c3 = document.createElement("td");
    var v1 = document.createTextNode(prompt("Please enter first name"));
    var v2 = document.createTextNode(prompt("Please enter last name"));
    var v3 = document.createTextNode(prompt("Please enter email"));
    c1.appendChild(v1);
    c2.appendChild(v2);
    c3.appendChild(v3);
    // newRow <- c1;
    newRow.appendChild(c1);
    newRow.appendChild(c2);
    newRow.appendChild(c3);
    theTable.appendChild(newRow);
    newRow.style.color="green";
  }
  newRow.addEventListener('click', addBord, false);
  function addBord(e) { 
    var target = e.target || event.srcElement;
    if(target.style.fontWeight=="bold")
      target.style.fontWeight="normal";
    else
      target.style.fontWeight="bold";
  }
</script>
</head>
<body>
    <script type="text/javascript">
        var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
        var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
        document.write("<table id=\"addressBookTbl\" border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>EmailAddress</th></tr>");
        aB1.write();
        aB2.write();
        document.write("</table>");
    </script>
    <form>
      <br />
      <input type="button" value="append new row" onclick="appendRow()"/>
    </form>
</body>
</html>

The code looks good, but you should not use `document.write` to add HTML elements like that. https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — xander, Apr 19 '18 at 12:06
@Andy What do you mean it works. When I test it to try clicking a word so it goes bold it doesn't. So it isn't working as I intended it to — Sam, Apr 19 '18 at 12:13
[It works in isolation](https://jsfiddle.net/6h328q7p/1/). There's something wrong somewhere else. Did you check the console for errors? — Andy, Apr 19 '18 at 12:16
I just tested your whole page, the problem is not the function, but your `newRow` is out of scope, the JS error is `test.html:43 Uncaught ReferenceError: newRow is not defined at test.html:43` because you try to access it after `appendRow` — xander, Apr 19 '18 at 12:17
@xander that was the reason it wasn't working, thanks for the help — Sam, Apr 19 '18 at 12:25
You should also note that this only works for newly added rows with your `appendRow` function, also the `target` is only a single TD-element and not the whole row. :) — xander, Apr 19 '18 at 12:26

score 0 · Accepted Answer · answered Apr 19 '18 at 12:25

I got the answer. It is actually pretty simple. Your event listener is place outside the appendrow function. Follow this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Address Book</title>

  <script type="text/javascript">
    function addressBookItem (fname, lname, email) {
        this.fname= fname;
        this.lname = lname; 
        this.email = email;
    }

    addressBookItem.prototype.write = function() {
        // var adrbook = "<p class='ab' First Name: " + this.fname + "&ltbr /&gt";
        var adrbook = "<tr><td>"+ this.fname + "</td>";
        adrbook += "<td>" + this.lname + "</td>";
        adrbook += "<td>" + this.email + "</td></tr>";

        document.write(adrbook);
    }

  function appendRow() {
    var theTable = document.getElementById("addressBookTbl");
    // create a newRow
    var newRow = document.createElement("tr");
    var c1 = document.createElement("td");
    var c2 = document.createElement("td");
    var c3 = document.createElement("td");
    var v1 = document.createTextNode(prompt("Please enter first name"));
    var v2 = document.createTextNode(prompt("Please enter last name"));
    var v3 = document.createTextNode(prompt("Please enter email"));
    c1.appendChild(v1);
    c2.appendChild(v2);
    c3.appendChild(v3);
    // newRow <- c1;
    newRow.appendChild(c1);
    newRow.appendChild(c2);
    newRow.appendChild(c3);
    theTable.appendChild(newRow);
    newRow.style.color="green";
  newRow.addEventListener('click', addBord, false);//event listener inside the function
  }
  function addBord(e) { 
    var target = e.target || event.srcElement;
    if(target.style.fontWeight=="bold")
      target.style.fontWeight="normal";
    else
      target.style.fontWeight="bold";
  }
</script>
</head>
<body>
    <script type="text/javascript">
        var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
        var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
        document.write("<table id=\"addressBookTbl\" border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>EmailAddress</th></tr>");
        aB1.write();
        aB2.write();
        document.write("</table>");
    </script>
    <form>
      <br />
      <input type="button" value="append new row" onclick="appendRow()"/>
    </form>
</body>
</html>

Good Luck!

Bold font when clicked

1 Answers1