CODEWITHSUNDEEP
htmlcsssqlitenode-sqlite3
T1m
T1m

Reputation: 1

Using sqlite3 js to replace html text

So I want to put out a WHERE query for this 'code' (row.code) and recieve the row.title from there.

With the row.title I want to use js to replace the 'title.placeholder' text with 'row.title'. For eg. Jeff becomes Tim as Tim is the title from row.code 003.

This will be to make a system to sort of have dynamic page content on my site.

Cheers for any help, Tim.

this is my 'grab-replace.js'

"`document.addEventListener("DOMContentLoaded", function() { const sqlite3 = require('sqlite3').verbose();

// Open a database connection
let db = new sqlite3.Database('./server/test.db');

// Define your SQL query with a WHERE clause
let sql = "SELECT * FROM articles WHERE code = '003'";

// Initialize a constant variable to store the title
const titlePlaceholder = document.querySelector(".title-placeholder");

// Execute the query
db.all(sql, [], (err, rows) => {
    if (err) {
        throw err;
    }
    // Process the retrieved rows
    rows.forEach((row) => {
        // Store the title
        const title = row.title;
        // Update HTML content with the stored title
        if (titlePlaceholder) {
            titlePlaceholder.textContent = title;
        }
    });
});

// Close the database connection when done
db.close();

});`

and this is the html where i reference the script;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/public/css/style.css">
    <link rel="stylesheet" href="/public/css/search.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body>

    <div id="headerContainer"></div>
    <div class="maintext">>
        <h1 class="title-placeholder">Default Page</h1>
        <h2 class="subtitle-placeholder">TEST</h2>
        <h3 class="authorname-placeholder">TEST</h3>
        <h3 class="date-placeholder">02/05/2003</h3>
    <p class="body-placeholder">This is default text</p>
    </div>

    <div id="footerContainer"></div>
    
    <script src="/public/js/layout.js"></script>
    <script src="grab-replace.js"></script>
</body>
</html>`

I have had the script.js to work before with replacing the current content of the html with another text eg Title --> 1 but now I have implemented this query it will not work.

I have tried chatgpt now but I firmly believe it has done way more damage then good here.

Upvotes: 0

Views: 31

Answers (0)

Related Questions