CODEWITHSUNDEEP
javascriptjsononclick
lezabiey
lezabiey

Reputation: 53

onclick is not working in the table row [javascript]

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>

Upvotes: 0

Views: 735

Answers (2)

S. Kağan Cin
S. Kağan Cin

Reputation: 116

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);
}

Upvotes: 2

nkkumawat
nkkumawat

Reputation: 693

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
}

Upvotes: 1

Related Questions