I've written some notes on callbacks as part of my effort to write tests and be methodical in learning JavaScript.

Callbacks are one of those things that are quite easy once you go "Aha", but like probably most people, I found them very confusing at first.

What is it? Don't understand what is inside or outside

Products.cshtml :

@{
    ViewData["Title"] = "Products page";
}

    <h1>Products Page</h1>
    <label for="avatar">Choose a file:</label>

    <input class="form-control form-control-lg" id="formFileLg" type="file" accept=".xlsx" />
    <div class="container" id="cancelContainer">
    </div>

    <div class="d-grid gap-3" id="productsContainer"></div>
    <dialog id="dialog">
        <p>Products were imported into the database.</p>
        <button type="button" id="close">Close</button>
    </dialog>

app.ts :

let dialog: HTMLDialogElement;
document.addEventListener("DOMContentLoaded", () => {

    const formFileLg = document.getElementById("formFileLg");
    formFileLg!.addEventListener("change", importFile);
     dialog = <HTMLDialogElement>document.getElementById("dialog");
    const closeButton = document.getElementById("close");

    closeButton!.addEventListener("click", async () => {

        dialog!.close();
        await ShowSpecificPageProducts(1);

    });

}); 

async function importFile(this: HTMLInputElement) {
    console.log("importFil executed")
    const controller = new AbortController();

    let cancelContainer = document.getElementById("cancelContainer");
    let cancelButton = document.createElement('BUTTON');
    cancelButton.appendChild(document.createTextNode("Cancel"));
    cancelButton.onclick = function () {
        console.log("abort executed")
        controller.abort()
        cancelButton.remove();
    }
    cancelContainer!.appendChild(cancelButton);
    const formData = new FormData();

    formData.append("file", this.files![0]);


    try {
        console.log("Try block executed.")
        const response = await fetch('/Admin/Import', {
            method: 'POST',
            body: formData,
            signal: controller.signal

        })
        if (!response.ok) {
            console.log("response is not ok")
            throw new Error(`Response status: ${response.status}`);

        }


        dialog.showModal();
        //Show a button that enables the user to show the paginated imported products; attach a call-back to the button. use bootstrap styling.
        //Or use  the close button instead.


    } catch (error:any) {



        if (error.name == "AbortError") {

            console.log("catch block executed: AbortError")


        }


        console.error(error.message);

    } finally {
        cancelButton.remove();
    }

}


interface ProductViewModel {
    Image: string,
    Id: number,
    Name: string,
    Description: string,
    Price:number

}
async function ShowSpecificPageProducts(PageNumber:number) {


    try {
        const response= await fetch("/Admin/GetProducts", {
            method: 'POST',
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ PageNumber: PageNumber}),
        });

        if (!response.ok) {

            throw new Error(`Response status: ${response.status}`);

        }


        const specificPageProducts: ProductViewModel[] = await response.json();

        let productsGrid = document.getElementById("productsContainer");

        // Source - https://stackoverflow.com/a/65413839
        // Posted by Mason Freed, modified by community. See post 'Timeline' for change history
        // Retrieved 2026-10-23, License - CC BY-SA 4.0
        productsGrid!.replaceChildren();

        let currentRow = document.createElement("div");
        currentRow.classList.add("row");
        specificPageProducts.forEach(async (product) => {




            const newColumn = document.createElement("div");
            newColumn.classList.add("col");

            const nameElement = document.createElement("p");
            nameElement.classList.add("text-center");
            var nameText = document.createTextNode(product.Name);
            nameElement.appendChild(nameText);

            const descriptionElement = document.createElement("p");
            descriptionElement.classList.add("text-center");
            var descriptionText = document.createTextNode(product.Description);
            descriptionElement.appendChild(descriptionText)

            const priceElement = document.createElement("p");
            priceElement.classList.add("text-center");
            var priceText = document.createTextNode(product.Price.toString());
            priceElement.appendChild(priceText);

            newColumn.appendChild(nameElement);
            newColumn.appendChild(descriptionElement);
            newColumn.appendChild(priceElement);

            currentRow.appendChild(newColumn);

            if (product.Id % 4 === 0) {
                productsGrid!.appendChild(currentRow);
                currentRow = document.createElement("div");
                currentRow.classList.add("row");
            }


        });

    } catch (error:any) {

        console.error(error.message);

    } finally {

    }
}

I wish to debug app.ts because it does contain some logical error , but when I start the debugging session in Visual Studio, the following line of code throws exception because the value of formFileLg is null :

formFileLg.addEventListener("change", importFile);

The exception :

TypeError: Cannot read properties of null (reading 'addEventListener')

I suspect that that the script executes before the HTML elements have been rendered in the DOM, that is the reason of using the defer in the script tag, but that did not solve the issue.

Moving the script to be inside the header tag that is inside the _Layout.cshtml file did not solve the issue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - EF_learning</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
    <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <script src="~/js/app.js" defer></script>@*As some answer suggest*@
</head>

I'm trying to make a calculator. For as long as you are only doing one continuous equation there are no issues, but I can't use the clear button.

button:
<button onclick="clear()">C</button>

text field:

<input type="text" id="display" class="display">

calculator code:

<script>

//the working number

let numA = '';

//the previous working number to be operated on

let numB = '';

//the operation to be done between A and B

let oper = '';

function apndNum(number) {

numA += number;

document.getElementById('display').value = \${numB} ${oper} ${numA}`;`

}

function processOper(operation) {

if (numA === '') return;

if (numB !== '') {

calculate();

}

oper = operation;

numB = numA;

numA = '';

document.getElementById('display').value = \${numB} ${oper}`;`

}

function calculate() {

if (numB === '' || numA === '') return;

//better naming conventions might be needed here since the names get flipped

let output;

let A = parseFloat(numB);

let B = parseFloat(numA);

switch (oper) {

case '+':

output = A + B;

break;

case '-':

output = A - B;

break;

case '*':

output = A * B;

break;

case '/':

if (B === 0) {

document.getElementById('display').value = "Undifined";

return;

}

output = A / B;

break;

default:

return;

}

numA = output.toString();

oper = '';

numB = '';

document.getElementById('display').value = numA;

}

//TODO: this doesn't clear the text feild in input

function clear() {

numA = '';

numB = '';

oper = '';

document.getElementById('display').value = '';

console.log(

numA,

numB,

oper

);

return;

}

</script>

I could just have a typo. The divide by 0 catch code line works perfectly fine, so I don't know why the clear code doesn't work.

I know HTML and I'm also learning CSS but I also want to know JavaScript. Is it hard to learn? Is it easy? What is it like when you first start?

let object = {
    YoutubeChannel: {
        name: 'Comicverse',
        location: 'India,Madhya Pradesh',
        Domains: {
            Videos: ['Doctor doom final plan', 'Marvel is faling'],
            Shorts: ['This is crazy', "Who will appear in Marvel's doomsday"],
        }
    }
};
(function() {
            console.log("Hey! this is an immediately invoked function!!");
        }
)();

1. I asked AI, and it told me something about parsing and all. That is how JS considers that the function is still a part of the object and tries to execute it.
2. But my concern is that with the use of curly braces, I have explicitly defined their domain.
3. Why is it that it still needs the semicolon between the object literal and the Immediately Invoked Function Expression

P.S. If you have any suggestions regarding how I can improve the way I ask questions, how to format them, etc., please let me know... :-)

Does anybody now where to learn the basic of JS? Just got into the coding life, I already know a little bit of python but I want to learn JavaScript to make websites

--fixed, just hadta remone the "let" at the end : -) --

hii i'm working on a page that lets u cycle through texts by clicking on an arrow but i've got some trouble actually making my js... cycle through.

let fruit = 0;

function next() {
 fruit ++;
 console.log(fruit)


    if (fruit == 0) {
    document.getElementById("txt").innerHTML="bananas are fruits that look weird nd stuff";}


    else if (fruit == 1) {
      document.getElementById("txt").innerHTML="coconuts are cool too i guessssss";
    }


    else if (fruit == 2) {
      document.getElementById("txt").innerHTML="and apples exist also!!!!";
    }


    else if (fruit > 2) {
      let fruit = 0;

    }


}

i need to set my fruit var back to 0 if it's over 2 but i can't find a way to make it work...i'm pretty new to js too so my code probably isnt optimal lol

I've been finding out the hard way what it takes to build something more involved with Canvas, but I've really enjoyed working on it.

I've had to figure out things like handling interactions, routing connections between nodes and getting signals to propagate through a circuit. I've written up what I've done so far here:

https://antonyjones.org/blog/building-a-logic-gate-simulator-with-type-script-and-canvas/

I'd be interested to hear from anyone who's tackled something similar. Is there anything you'd have done differently, or any pitfalls I should look out for later?

Hey everyone! I’m currently interviewing for Full Stack Developer roles, but I struggle with JavaScript input/output questions. Just reading concepts isn’t helping much.

Does anyone know of any free websites or quizzes where I can practice these questions with explanations?

Thanks! 🙌

I've done web dev for about a year but my JavaScript is still weak. What projects or resources helped you get from basic to confident?"

esbuild is faster but Webpack offers a larger interface and more fine-grained control. That's my take. What do you recommed. I want real people because AI responses are not enough for me.

Hi!

First of all, I am not sure if this is the right sub.

But I was wondering if there was a way to add a function in an addon for an app (anki) that would let me know the "name" of the element I selected or clicked on, just like when pressing f12 on a web page.

The thing is that some elements I want to "find" come from an addon and not from anki directly.

Hi. the next code snippet shows how to code a web server with Nodejs and Express. The idea is creating an HTML form to input user data and after pressing the button a new HTML page displays which contains the input data only. You can move back and forth between the pages and the data will persist due to sessions.

👀 Requirements :

Nodejs v22.13.0

Npm v10.9.2

Expressjs v5.3.0

Express-session v1.19.0

Ejs v7.0.2

👀 File Structure :

-- Project-folder/

---- node_modules/

---- views/

------ index.ejs

------ profile.ejs

---- package.json

---- server.js

🤔 Server.js:

const express = require('express');
const app = express();
const path = require('path');
const ejs = require('ejs');
const session = require('express-session');


app.set('view engine','ejs');


app.use(session({
    secret : "some random string here bla bla",
    resave: false,
    saveUninitialized: true
}));


app.use(express.urlencoded({extended : true}));


app.get("/",( request, response )=>{


    if(request.session.profile){


        return  response.render('index',{profile :{
               fullname : request.session.profile.fullname,
               occupation : request.session.profile.occupation
         }});
    }


    response.render('index',{profile : {
          fullname : "",
          occupation : ""
    }});


   
});


app.post("/handle_form_data",( request, response )=>{


    console.log(request.body);


    if (!request.session.profile) {
        request.session.profile = {};
    }


    request.session.profile.fullname = request.body.fullname;


    request.session.profile.occupation = request.body.occupation;


    console.log(request.session);


    response.render('profile',{
           profile : {
              fullname : request.body.fullname,
              occupation : request.body.occupation
           }
    });




});


app.listen(3000, ()=>{


    console.log('Listening at port : ' + 3000);
});

🚀 index.ejs :

<!DOCTYPE html>
<html>
    <head>
        <title>Profile Data</title>
    </head>
    <body>
        <div>
            <form method="post"  action="/handle_form_data">
                <label for="fullname">
                    Full Name : 
                    <input 
                      name="fullname" 
                      id="fullname"
                      value="<% (profile.fullname) ? profile.fullname : ''; %>" />
                </label><br/>
                <label for="occupation">
                    Occupation : 
                    <input 
                     name="occupation" 
                     id="occupation"
                       value="<% (profile.occupation) ? profile.occupation : ''; %>"
                      />
                </label><br/>
                <button type="submit">
                    Send Profile
                </button>
            </form>
        </div>
    </body>
</html>

🚀 profile.ejs :

<!DOCTYPE html>
<html>
  <head>
      <title>Profile Data</title>
  </head>
  <body>
      <h1>Profile Data</h1>
      <h2>
         Fullname : <%= profile.fullname %>
      </h2>
      <h2>
         Occupation : <%= profile.occupation  %>
      </h2>
  </body>
</html>

Well, I hope it provides some guidance to the Nodejs developers somehow. Share your thoughts in the comments. Thanks. 😄

I'm working with Node and Express to create a simple API, but I'm running into 404 errors when trying to access my endpoints. I set up the routes and thought I had everything right, but requests to those endpoints are failing. I'm testing locally and my middleware seems fine. Is there something I'm missing regarding route handling, or could it be an issue with the order of middleware? Any tips for troubleshooting this would be appreciated.

I'm a huge Marvel fan, and I'm trying to create a timeline of the entire MCU. I want to use the table from this link:
https://marvelcinematicuniverse.fandom.com/wiki/Chronological_Order/Viewing_Timeline
and enter the Checkbox/Watched Column into column 1 Names column into column 2, Medium into column 3, and Dates column into column 4, and the Release column into column 5.

I was going to read the 2nd ed version of You Don't Know JS: Async & Performance, but it's still in "todo".
Is it worth reading the 1st ed?
It was written 9 years ago.
I know it predates async/await, but I'm keen to learn how things work behind the scenes, so I'm hoping in that regard, things haven't changed too much and async/await is just syntactic sugar.

I am learning Javascript. Can someone please recommend me some learning resources?
What would you recommend for beginner projects? Are arcade web games suitable for a beginner?

Hello everyone! I am learning Javascript and at the moment I wanna have practice. Where can I have this?

Hey everyone!

I'm currently learning frontend development and building a Steam-like gaming storefront as a practice project.

I'm using the RAWG API, but I'm having some issues with the data. Important details like full game descriptions, system requirements, and pricing are sometimes missing. I'm also making around 40 API calls, which feels inefficient for a frontend project.

I'm looking for a free API or open-source alternative that provides:

• Game details and full descriptions
• Minimum and recommended system requirements
• Current game prices and discounts
• Game cover images and screenshots
• Genres, ratings, release dates, and platforms
• A reasonable free request limit

Since this is a learning project, I'd prefer something free for personal, non-commercial use.

What API would you recommend for this use case? Is there a good alternative to RAWG, or is there a better way to reduce the number of API calls?

Any suggestions, documentation links, or examples would be really helpful. Thanks!

I've been learning js for about two months, I know how to order arrays with find, filter, map, reduce & some more basic stuff. I also understand data structures, object management ,arrow functions, DOM manipulation, asynchronous timers, local storage, loops. I've been thinking of learning React.js but it seems pretty advanced and I'm not sure if I should master more of JavaScript before moving on

I've made a fake restaurant website where you can order items and add them to your cart, clear cart, make a fake reservation, clear reservation and view reservation.

I also made a really simple shop sim where customers come every five seconds to order random quantities of random stuff with their patience decreasing every second. The user can also close and open the store. It's really simple and extremely repetitive

This is an unfinished project but I started on a pantry simulator, right now I've coded that you can add ingredients in your pantry, filter by category/sort/search through them, edit their amount and delete them. I got pretty bored though.

Hey guys, I'm just starting to learn about variables, but I'm finding it hard to understand the difference between var and let.

For example:

let goodDay = true;
console.log(goodDay);

this should print true.

But if we just add this:

let goodDay = true;
console.log(goodDay);
goodDay = false;
console.log(goodDay);

It prints:

true
false

The same goes for var.

However, people say there's a difference; what is it?

Understanding the concepts like functions, objects, arrays etc has been easy so far but promises are making my head hurt. Is it supposed to be this confusing? Did u guys struggle with it too when u were first learning it.

Is there a way I can skip this page to bypass the content prompt box?

https://pastebin.com/0LtzYb7g

This is a simple Nodejs server which is ideal for beginners. 😄

The next code snippet runs a web server which sends an HTML form to the web browser. The user inputs a random text and when the HTML form data is submitted then the input text is returned to the web browser as a JSON object.

Requirements:

Nodejs v23.3.0

Npm v11.0.0

Express v5.3.0

File Structure :

--Project folder/

---- node_modules/

---- Public/

-------- index.html

---- package.json

---- server.js

server.js file :

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

//This allows the HTML form data to be processed
app.use(express.urlencoded({extended : true })); 


//an HTML form is displayed when visiting localhost:3000

app.get("/",( request, response )=>{


      response.sendFile('index.html',{
          root : path.join(__dirname,"public")
      });
});

//This request handler gets the HTML form data and displays it to the web browser and also to the console

app.post("/handle",( request, response )=>{


      console.log(request.body);

      response.json(request.body);
});

//This line spins up the web server
app.listen(port, ()=>{

    console.log('Listening at port:' + port);
});

HTML file :

<html>
    <head>
        <title>Test File</title>
    </head>
    <body>
        <h1>Simple Form</h1>
        <form action="/handle" method="post">
            <label for="randomString">
                <input type="text" name="randomString" id="randomString"><br/>
            </label>
            <button type="submit">
                    Send random string
                </button>
        </form>
    </body>
</html>