onclick is not working in the table row [javascript]

Question

I am new in javascript
in this code i am printing json data into table but not whole data only a bookName. so my problem is that while i'm try to click on the book's name for instance, The Night Fire, Murder, The Death Higgler etc.. it's not working

so here i dont know this is the right way or wrong to write onclick because i'm new in javascript and may be that's why its not working while i'm click on the data of that column but i want it's clickable

Any help will be greatly appreciated

let bookDetails = [
    {
        bookId: "1",
        bookName: "The Night Fire",
        bookDescription: "description the night fire",
        bookAuthor: "Arnold Bennett ",
        bookPages: "10",
        category: "horror",
        price: "120",
        year: "2001"
    },
    {
        bookId: "2",
        bookName: "Murder",
        bookDescription: "description Murder",
        bookAuthor: "Arnold Bennett ",
        bookPages: "110",
        category: "Mystery",
        price: "130",
        year: "2019"
    },
    {
        bookId: "3",
        bookName: "The Death Higgler",
        bookDescription: "description the Higgler",
        bookAuthor: "Coppard",
        bookPages: "80",
        category: "horror",
        price: "140",
        year: "2020"
    },
    {
        bookId: "4",
        bookName: "The Open Boat",
        bookDescription: "description The Open Boat",
        bookAuthor: "Stephen",
        bookPages: "30",
        category: "Fantasy",
        price: "200",
        year: "2018"
    }]


function toShowTable(bookDetails) {
    messageTable(" ");
    let table = "<table border = 1 cellpadding = 10 ><th colspan=3 >Book Names</th>"
    for (key in bookDetails) {
        table += "<tr><td>" + bookDetails[key].bookName + "</td>";
        bookDetails[key].bookName.onclick = function () {
            console.log("hii");
        }
    } messageTable(table);
}
function messageTable(variable) {
    document.getElementById("messageTable").innerHTML = variable;
}

<!DOCTYPE html>
<html>

<head>
    <title>Book Store information C</title>
    <script src="add.js"></script>
    <style>
        th,
        td,
        p,
        input {
            font-family: Arial, Helvetica, sans-serif;
        }

        table,
        th,
        td {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 10px 10px;
            text-align: center;
        }

        th {
            font-weight: bold;
        }
    </style>
</head>
<body>
<input type="button" value="showTable" onclick="toShowTable(bookDetails)">
<p id="messageTable"></p>
</body>
</html>

bookDetails[key].bookName is not a HTML element, so you cannot have onclick event on this as you have written. What you can do is write onclick function seperately and pass it in td like this: table += '<tr><td onclick="functionToCall()"'> ....... — Harinder Singh
– Harinder Singh, Commented Dec 26, 2020 at 13:51

S. Kağan Cin · Accepted Answer · 2020-12-26 14:18:24Z

2

Can you try this? You won't need the messageTable function

function toShowTable(bookDetails) {
  const messageTable=document.getElementById("messageTable");
  messageTable.innerHTML = '';
    let table=document.createElement("table");
    bookDetails.forEach((item)=>{
      let row= table.insertRow(-1);
        let cell=row.insertCell(0);
        cell.innerHTML=item.bookName;
        cell.addEventListener('click',()=>{
          alert(item.bookName);
        })
    })
    messageTable.appendChild(table);
}

answered Dec 26, 2020 at 14:18

S. Kağan Cin

1167 bronze badges

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

Comments

nkkumawat · Accepted Answer · 2020-12-26 14:06:01Z

1

You can do this like



function toShowTable(bookDetails) {
    messageTable(" ");
    let table = "<table border = 1 cellpadding = 10 ><th colspan=3 >Book Names</th>"
    for (key in bookDetails) {
        table += "<tr onclick='yourFunction(somevalue)'><td>" + bookDetails[key].bookName + "</td>";
    }
    messageTable(table);
}

function yourFunction(value) {
    // do someting
}

answered Dec 26, 2020 at 14:06

nkkumawat

6931 gold badge6 silver badges9 bronze badges

Collectives™ on Stack Overflow

onclick is not working in the table row [javascript]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related