Connected Button between HTML and Typescript not working

Question

i am currently trying myself on an exercise in Typescript and HTML. I found an online example of a connected button, which generates a table when clicked.

However I am not able to replicate this exercise:

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="script.ts"></script>
</head>
<body>
    <input type="button" value="Generate a table" onclick="generateTable()" />
</body>
</html>

Typescript Code:

function generateTable() {
    // creates a <table> element and a <tbody> element
    const tbl = document.createElement("table");
    const tblBody = document.createElement("tbody");

    // creating all cells
    for (let i = 0; i < 2; i++) {
        // creates a table row
        const row = document.createElement("tr");

        for (let j = 0; j < 2; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            const cell = document.createElement("td");
            const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    document.body.appendChild(tbl);
    // sets the border attribute of tbl to '2'
    tbl.setAttribute("border", "2");}

I am sorry if this is a stupid question, I just started out and wanted to learn something relevant.

Please read the tag description before using it. This question has nothing to do with [web-deployment], so I've removed that tag. — Heretic Monkey
– Heretic Monkey, Commented Jan 3, 2023 at 20:55
You can't execute typescript in browser. You need to convert it to js first. Don't load .ts files in script tag. — cloned
– cloned, Commented Jan 3, 2023 at 21:11
Are you using vite or something that transpiles your TS code? — HappyDev
– HappyDev, Commented Jan 3, 2023 at 21:22

netanel · Accepted Answer · 2023-01-03 23:03:56Z

2

Make sure that you have compiled your TypeScript code to JavaScript. The HTML file is trying to execute the generateTable() function, which is written in TypeScript.

In order for the function to be executed in the browser, you need to first compile your TypeScript code to JavaScript. You can do this by running the following command in your terminal: tsc script.ts. This will generate a script.js file in the same directory as your script.ts file. You'll need to update the script tag in your HTML file to point to the script.js file instead of the script.ts file.

answered Jan 3, 2023 at 23:03

netanel

362 bronze badges

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

Collectives™ on Stack Overflow

Connected Button between HTML and Typescript not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related