Жирный шрифт при нажатии

Я пытаюсь сделать текст жирным при щелчке, а при повторном щелчке он вернется в нормальное состояние. Функция addBord (e) - это то, что я получил до сих пор, но я не уверен, на правильном ли я пути и что мне делать дальше. Может ли кто-нибудь подсказать мне, что делать дальше?

<!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', '[email protected]');
        var aB2 = new addressBookItem ('Rose', 'Schultz', '[email protected]');
        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>

Что ж, код работает. Каков твой вопрос?

— 19.04.2018 14:06

Код выглядит неплохо, но вы не должны использовать document.write для добавления подобных элементов HTML. stackoverflow.com/questions/802854/…

— 19.04.2018 14:06

@ Энди, у него проблема с функцией addBord ()

— 19.04.2018 14:08

@GuillaumeHarari, OP не работает, потому что он работает.

— 19.04.2018 14:08

@Andy Что ты имеешь в виду, это работает. Когда я тестирую его, чтобы попробовать щелкнуть слово, чтобы оно выделилось жирным шрифтом, это не так. Так что это не работает так, как я предполагал

— 19.04.2018 14:13

Работает изолированно. Где-то что-то не так. Вы проверили консоль на наличие ошибок?

— 19.04.2018 14:16

Я только что протестировал всю вашу страницу, проблема не в функции, но ваш newRow выходит за рамки, ошибка JS - test.html:43 Uncaught ReferenceError: newRow is not defined at test.html:43, потому что вы пытаетесь получить к нему доступ после appendRow

— 19.04.2018 14:17

@xander, это была причина, по которой он не работал, спасибо за помощь

— 19.04.2018 14:25

Вы также должны отметить, что это работает только для вновь добавленных строк с вашей функцией appendRow, также target является только одним TD-элементом, а не всей строкой. :)

— 19.04.2018 14:26

javascript html

19.04.2018 14:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

118

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я получил ответ. На самом деле это довольно просто. Ваш слушатель событий находится вне функции добавления. Следуйте этому коду:

<!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', '[email protected]');
        var aB2 = new addressBookItem ('Rose', 'Schultz', '[email protected]');
        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>

Удачи!

19.04.2018 14:25