Category: javascript

I’m returning an object that has a key defined like this template[body]. Here is an example of the returned object:

object = {
 method: 'patch',
 authentication_token: 'a string',
 template[body]: 'another string',
 ...
}

How can I access the second value? I’m doing something like object.template[body] but I’m getting an error body is undefined

I am trying to post a thread using node.js
If I have any media attached to a tweet, I need to upload it and store the uploadedId which is in my case mediaId. I am getting the mediaId inside a forEach loop, if i want to use it inside the forEach the value is available. But, I want to store the id into an array and access it while calling another method which is outside the forEach loops.

Below is the code I tried,

var tweets = post['thread'] 
tweets.forEach((tweet,index)=>{
    if(tweet['media']!=undefined){
        var files = tweet['media']['media_ids'] //Initially I stored the filenames in media_ids Array, later I am updating it with MediaId
        tweets[index]['media']['media_ids'] = []
        files.forEach(async(file)=>{
            var file = './public/images/'+files[0]
            const mediaId = await tClient.v1.uploadMedia(file);
            tweets[index]['media']['media_ids'].push(mediaId)
            console.log(tweets[index][media]['media_ids]) //Output: ['123456789'] This is the output I need.
        })
     }
})
console.log(tweets[0]['media']['media_ids']) //Output: [] This is the output I am getting.

I hope my problem is clear to you, pleas help me!

hello everyone i am creating a text to read mini project with html css and javascript so i want to print
90/100/500/x words in 1/2/5/x minutes with javascript code

let paraEl = document.getElementById("para")
let arrayString = paraEl.textContent.split(" ")
let totoalWordsEl = document.getElementById("words-Number")
let minutes = 1;
let clearTime;
const showWords = ()=>{
let index  = 0;
let time = (+totoalWordsEl.value / minutes)  ;
time = time * 100; 
console.log(time)
clearTime = setInterval(()=>{
console.log("index = ",index,arrayString[index]);
index= index + 1;
if(+NumberOfwordsEl.value === index){
clearInterval(clearTime)
}
},time)
Expacted
1 minutes ---->>  90 words
2 minutes ---->> 100 words
x minutes ---->> y words

Not a question, just a bit of free code for my fellow coders, it looks at two strings and extracts the difference. (Originally programmed for a Discord bot which is why the string objects are weird)

    let oldMessage = { content: `` };
    let newMessage = { content: `` };

    let oldMessageArray = oldMessage.content.split(``);
    let newMessageArray = newMessage.content.split(``);

    let differencesArray = [];

    if (newMessageArray.length === oldMessageArray.length) {
        for (let i = 0; i < newMessageArray.length; i++) {
            if (oldMessageArray[i] !== newMessageArray[i]) {
                differencesArray.push({ newValue: newMessageArray[i], oldValue: oldMessageArray[i] ? oldMessageArray[i] : null, pos: i });
            }   
        }
    } else if (newMessageArray.length > oldMessageArray.length) {
        for (let i = 0; i < newMessageArray.length; i++) {
            if (oldMessageArray[i] !== newMessageArray[i + differencesArray.length]) {
                differencesArray.push({ newValue: newMessageArray[i + differencesArray.length], oldValue: oldMessageArray[i] ? oldMessageArray[i] : null, pos: i });
            }   
        }
    } else if (newMessageArray.length < oldMessageArray.length) {
        for (let i = 0; i < oldMessageArray.length; i++) {
            if (newMessageArray[i] !== oldMessageArray[i + differencesArray.length]) {
                differencesArray.push({ newValue: newMessageArray[i] ? newMessageArray[i] : null, oldValue: oldMessageArray[i + differencesArray.length], pos: i });
            }  
        }
    }

    let oldBacking = 0;
    let newBacking = 0;
    let oldFronting = 0;
    let newFronting = 0;

    for (let i = 1; i < 5; i++) {
        if (oldMessage.content.charAt(differencesArray[0].pos - i)) oldBacking = i;
        if (newMessage.content.charAt(differencesArray[0].pos - i)) newBacking = i;
        if (oldMessage.content.charAt(differencesArray[0].pos + i)) oldFronting = i;
        if (newMessage.content.charAt(differencesArray[0].pos + i)) newFronting = i;
    }

    let differences = `${oldBacking > 0 && oldMessage.content.charAt(differencesArray[0].pos - (oldBacking + 1)) ? `... ` : ``}${oldMessage.content.slice(differencesArray[0].pos - oldBacking, differencesArray[differencesArray.length - 1].pos + (oldFronting + 1))}${oldFronting > 0 && oldMessage.content.charAt(differencesArray[differencesArray.length - 1].pos + (oldFronting + 2)) ? ` ...` : ``} --> ${newBacking > 0 && newMessage.content.charAt(differencesArray[0].pos - (newBacking + 1)) ? `... ` : ``}${newMessage.content.slice(differencesArray[0].pos - newBacking, differencesArray[differencesArray.length - 1].pos + (newFronting + 1))}${newFronting > 0 && newMessage.content.charAt(differencesArray[differencesArray.length - 1].pos + (newFronting + 2)) ? ` ...` : ``}`;

I have to design a stadium section view that is later supposed to be able to have a hover effect that highlights different sections on the stadium map when a user hovers over one of the sections. I was wondering if anyone had any suggestions on how to create such a design and could help me. It should work similarly to the ticketing marketplace FanPass but a lot more simpler, where you can only choose sections of the stadium but not seats. Even if you know an article on something similar or know something that could help me get just get started is much appreciated since I can’t find anything on this.
Thanks in advance 🙂

I tried searching for the exact problem and also searched for how interactive photos work and couldn’t find anything that would work

I have an online restaurant menu under development. It has a horizontal navbar fixed at the top. The links on the navbar scroll horizontally and the content scrolls vertically. The links point to #sections on the same page. I managed to make the links get highlighted as their corresponding content section scrolls by. I also managed to make the menu items scroll themselves to the center of the screen as the user scrolls the main content. But here is the problem. This last feature causes the scroll to fail when the user clicks a menu link. It seems that this function interrupts the scrolling triggered by the click, so the page only scrolls like 10px and stops. If I remove this auto-centering feature of the menu items, the click works back again. I’ve tried to force the page scroll by attaching an onclick function to the menu links, but it still didn’t work. Below is the current code explained:

HTML:

<div id="menu" class="scroll">
    <a class="menu_item" href="#sec_1">Link 1</a>
    <a class="menu_item" href="#sec_2">Link 2</a>
    <a class="menu_item" href="#sec_3">Link 3</a>
</div>
<section id="sec_1">
    <div class="content">Some content</div>
</section> 
<section id="sec_2">
    <div class="content">Some content</div>
</section>
<section id="sec_3">
    <div class="content">Some content</div>
</section> 

CSS:

.scroll {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-behavior:smooth;
}

.scroll::-webkit-scrollbar { display: none; }


div#menu{
    position: fixed;
    top:0px;
    width: 100%;
    height:50px;
    z-index: 999;
    text-align: center;
}

a.menu_item{
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    height: 50px;
    background-color: #fff;
    color: #000;
}

a.menu_item.active{ background-color: #000; color: #fff; }

section{ display: block; }

JavaScript:

// Get all sections that have an ID defined
const sections = document.querySelectorAll("section[id]");

// Add an event listener listening for scroll
window.addEventListener("scroll", navHighlighter);

function navHighlighter() {
  
    // Get current scroll position
    let scrollY = window.pageYOffset;
      
    // Now we loop through sections to get height, top and ID values for each
    sections.forEach(current => {
        const sectionHeight = current.offsetHeight;
        const sectionTop = (current.getBoundingClientRect().top + window.pageYOffset) - 70;
        sectionId = current.getAttribute("id");
        
        /*
        - If our current scroll position enters the space where current section on screen is, add .active class to corresponding navigation link, else remove it
        - To know which link needs an active class, we use sectionId variable we are getting while looping through sections as an selector
        */
        if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
            theone = document.querySelector('a.menu_item[href="#' + sectionId + '"]');
            theone.classList.add('active');         
        } 
        else {
            document.querySelector('a.menu_item[href="#' + sectionId + '"]').classList.remove('active');
        }
    });
    navScroll(theone); //this is the line that breaks the scroll started by clicks.
}

//brings the menu link to the visible area when user scroll thru content
//also tried using scrollIntoView(), got same result
function navScroll(item){
    const menu = document.getElementById("menu");
    const menu_w = menu.offsetWidth;
    const item_w = item.offsetWidth;
    const item_x = item.offsetLeft;
    menu.scrollLeft = item_x - (menu_w / 2) + (item_w / 2);
}

//tried to use this as onclick function in menu links, but still won't work
function forceScroll(sectionID){
    const section = document.getElementById(sectionID);
    window.scrollTo(0,section.offsetTop);
}

So basically, if I do not use the navScroll() function, everything works fine. The .active class will be applied to menu itens accordingly as the content scrolls by, be it the user scrolling or by clicking a link in the menu, which makes the content scroll to corresponding section.
But when I add the navScroll function, to make the menu item scroll into view, things only work if the user scrolls the content directly. When clicking a link, the scroll is quickly interrupted and nothing happens.

I appreciate if you keep it Javascript only, but I’ll accept jQuery if it comes to be the only way to solve this.

I am trying to make some code where the PowerShell can scan the pc for all the running apps and stuff by using task list command then task killing all the things on the task list to make your pc run faster.

I was trying something but then I realized that it was for android so then I gave up because I took so long writing the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    
        <label id="aLabel">Side A:</label><br>
        <input type="text" id="aTextBox"><br>
        <label id="bLabel">Side B:</label><br>
        <input type="text" id="bTextBox"><br>
        <button type="button" id="submit">submit</button><br>    
        <label id="cLabel"></label><br> 
       
        <script src="index.js"></script>
  
</body>
</html>

let a; 
let b;

// Calculate the length of the hypotenuse using the Pythagorean theorem
document.getElementById("submit").onClick = function(){

    a = document.getElementById("aTextBox").value;
    a = Number(a)

    b = document.getElementById("bTextBox").value;
    b = Number(b);

    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    
    document.getElementById("cLabel").innerHTML = c;

    console.log("The hypotenuse of the triangle is: " + c);
}

I believe I acquired all the ids in the DOM correctly and also imported the js file correctly(it is named index.js and in the same folder, in fact it auto populates when typing)
I’m stumped, it should be a simple equation, but I don’t know what I’m doing wrong or what alternatives to use. I really appreciate any coding help the community can give.

Based on the answer here The objective is to adjust cursor position inside element whenever the element is dragged from/to anywhere. The below is a modified version in which I tried to eliminate having to save x and y offsets as variables for further reuse. Instead, I’m intending to replace the suggested method with $('.target').offset() top and left offset values.

 (function () {
    let x = 0;
    let y = 0;
    let target = document.querySelector('.target');
    let mouseDown = false;
    target.addEventListener(
        'mousedown',
        function (e) {
            mouseDown = true;
            target.style.position = 'relative';
            x = target.offsetLeft - e.clientX;
            y = target.offsetTop - e.clientY;
        }
    );
    document.addEventListener(
        'mouseup',
        function () {
            mouseDown = false;
        }
    );

    document.addEventListener(
        'mousemove',
        function (e) {
            event.preventDefault();
            const offset = $(target).offset();
            const offsetLeft = offset.left;
            const offsetTop = offset.top;
            if (mouseDown) {
                console.log(
                    e.clientX + x,
                    offsetLeft,
                    e.clientY + y,
                    offsetTop
                );
                target.style.left = e.clientX + x + 'px';
                target.style.top = e.clientY + y + 'px';
                // target.style.left = offsetLeft + 'px'; // comment out for issue
                // target.style.top = offsetTop + 'px';
            }
        }
    );
})();

 

.target {
    width: 100px;
    height: 100px;
    background-color: #0000FF;
}

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<div class="target"></div>

As shown in the snippet, the console is showing a comparison between suggested solution x, x, suggested solution y, and y respectively. The offsets are identical or close depending on how fast the square is dragged:

61 69 19 27
62 69 19 27
62 70 19 27
63 70 19 27
63 71 19 27
64 71 19 27
64 72 19 27
    ...

which implies it should work if used for assignment. However, when these 2 lines:

target.style.left = e.clientX + x + 'px';
target.style.top = e.clientY + y + 'px';

are replaced with the commented out ones:

// target.style.left = offsetLeft + 'px';
// target.style.top = offsetTop + 'px';

The offsets calculated using $('.target').offsets() keep infinitely increasing:

212 2408 424 2408
172 2416 423 2416
146 2424 418 2424
133 2432 409 2432
127 2440 401 2440
       ...

Is there something I’m missing here? Why the issue only happens when the offset values are used?

I want to dynamically load import scss in vuejs single file component, but it seems not supported.

<script>
export default {
  computed: {
    importMobileCss() {
      return this.ISMOBILE ? "/src/css/stylist-mobile.scss"  : "/src/css/stylist-desktop.scss";
    },
}
</script>
<style lang="scss" scoped>
@import "/src/css/stylist.scss";
@import v-bind(importMobileCss);
</style>

I had tried to import dynamically import using in script tag which is worked well but the result is not I want to achieved as it is scoped scss, therefore the required(scss) is not scoping in the html css.

<script>
export default {
  mounted() {
    if(this.ISMOBILE)
        require("/src/css/stylist-mobile.scss")
    else
        require("/src/css/stylist-desktop.scss")
}
</script>
<style lang="scss" scoped>
@import "/src/css/stylist.scss";
</style>

i have a problem with fabricjs, i have 2 object and group 2 object to move, but i can’t get position actual of object (rect and circle) in canvas. Please help me

I try like picture but position each object wrong

I’m trying to fix a 3rd party firefox addon. It’s a button that saves the current page as a shortcut file in your downloads directory. It’s worked for months, but just started failing a few weeks ago. The issue is with these lines, reproduced here:

let filename = "";

if (settings.savePath) {
    filename += settings.savePath + "/";
}

filename += `${title}.${extension}`;

let file = new File([contents], filename);
let objectUrl = URL.createObjectURL(file);

let downloadSettings = {
    url: objectUrl,
    filename: filename,
    incognito: tab.incognito
}

if (settings.saveAs !== null) {
    downloadSettings.saveAs = settings.saveAs;
}

browser.downloads.download(downloadSettings).then(null, (error) => console.log(error));

When the final line executes, downloadSettings.filename will have been set to something like "dog.url", and the file will be saved with that name.

It used to work, but now when that final line is executed it throws an error:

Error: filename must not contain illegal characters

In doing some debugging, it seems that I can save a file if it ends in _url but not .url, so it doesn’t like the ..

This doesn’t seem to match the MDN documentation for this function:

filename (Optional): A string representing a file path relative to the default downloads directory — this provides the location where you want the file to be saved, and what filename you want to use. Absolute paths, empty paths, path components that start and/or end with a dot (.), and paths containing back-references (../) will cause an error. If omitted, this value will default to the filename already given to the download file, and a location immediately inside the downloads directory.

I’ve looked for new relevant firefox bug tickets but haven’t found any.

indexHelpers.js

var db = require("../config/connection");
var collections = require("../config/collections");
var ObjectId = require("mongodb").ObjectId;

module.exports = {
  addPerson: (personDetails) => {
    return new Promise((resolve, reject) => {
     db.get().collection(collections.USER_DETAILS)
        .insertOne(personDetails)
        .then((details) => {
          resolve(details);
        });
    });
  },
};
 

In the indexhelpers.js the db.get() function return null… so when I try to call db.get().collection() it returns the error TypeError: Cannot read properties of null (reading ‘collection’)

So this is my connection .js.I couldn’t find out why i get this error

connection.js

const mongoClient = require("mongodb").MongoClient;
const state = {
  db: null,
};
module.exports.connect = function (done) {
  const url = "mongodb://localhost://27017";
  const dbname = "CMS";
  mongoClient.connect(url, { useUnifiedTopology: true }, (err, data) => {
    if (err) return done(err);
    state.db = data.db(dbname);
  });

  done();
};

module.exports.get = function () {
  return state.db;
};

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var db = require("./config/connection");

var indexRouter = require('./routes/index');
var hbs = require("express-handlebars");
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
//handlebars as the template engine
app.engine(
  "hbs",
  hbs.engine({
    extname: "hbs",
    defaultLayout: "layout",
    layoutsDir: __dirname + "/views/"
  })
);

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
db.connect((err) => {
  if (err) console.log("connection error" + err);
  else console.log("--------Database Connected--------");
});

app.use('/', indexRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

I tried console.log(db.get()) which returns null. actually db.get() must return some values but I am not getting0 it

I’m working on a project where I need to make a cinema website. Right now I’m working on the movie specific page. An example of how part of this looks can be found in the snippet below. The trouble I have is with the eventlistener highlighted with the ///////////// lines in the js file.

The movie tickets div has the following structure:

div.movie-tickets
├── span.tickets-title
├── div.tickets__day
│   ├── div.tickets__day-name
│   ├── div.tickets__showtime
│   │   ├── span (time)
│   │   ├── span (seats left)
│   │   └── span (tickets in cart)
│   └── ...
└── ...

when the user selects a ticket, I want to change seats left (-1) and tickets in cart (+1) text. So in the eventlistener, I’d like to edit the relevant div.tickets_showtime element.

My plan was to use e.target for this, but this digs one layer too deep. How do I access the div.tickets_showtime element in the eventlistener upon clicking. No matter where the user clicks on a movie-showing?

Thanks in advance!!

class Movie {
    constructor(title, image, description, duration, release, age, schedule, seats){
        this.title = title;
        this.image = image;
        this.description = description;
        this.duration = duration;
        this.release = release;
        this.age = age;
        this.schedule = schedule; //dictionary met alle tijden per dag.
        this.seats = seats;
    }
}

var JW4 = new Movie (
  "John Wick 4 ",
  "https://media.pathe.nl/nocropthumb/180x254/gfx_content//api/filmdepot/v1/movie/download/34482/34482_157906_ps_sd-high.jpg",
  "nDe prijs op John Wick z’n hoofd wordt steeds hoger en zijn gevecht tegen het internationale moordenaarsgilde The High Table ontwikkelt zich tot een wereldwijde strijd. Om zijn vrijheid terug te krijgen moet hij het opnemen tegen een nieuwe vijand met machtige allianties over de hele wereld en krachten die oude vrienden in vijanden veranderen.",
  "169 minuten",
  "Release: 23-03-2023",
  "/assets/img/icons/kijkwijzer/kijkwijzer-16-gray-32.png",
  "{"Vandaag":[["10:45-13:49",110],["13:45-16:49",125],["16:20-19:24",201],["17:50-20:54",35],["20:00-23:04",187],["22:00-01:04",189]],"Zondag":[["10:00-13:04",163],["14:45-17:49",13],["18:10-21:14",91],["20:45-23:49",135]],"Maandag":[["11:30-14:34",146],["12:10-15:14",97],["15:00-18:04",25],["18:00-21:04",196],["20:30-23:34",100]],"Dinsdag":[["11:30-14:34",120],["15:00-18:04",190],["18:00-21:04",81],["20:40-23:44",73]],"Woensdag":[["11:50-14:54",92],["17:50-20:54",167],["20:15-23:19",27]],"Donderdag":[["11:30-14:34",89],["15:00-18:04",30],["18:00-21:04",20],["20:40-23:44",39]],"Vrijdag":[["12:10-15:14",200],["15:40-18:44",148],["19:20-22:24",75],["21:20-00:24",123]],"Zaterdag":[["12:10-15:14",181],["16:30-19:34",12],["19:20-22:24",205],["21:30-00:34",156]]}",
  null
)

function loadMoviePage() {
    populate(JW4)
}

function populate(movie) {
    var content = document.querySelector(".content");
    addMovieInfo(content, movie);
}

function addMovieInfo(location, movie) {

    var tickets = document.createElement("div");
      tickets.classList.add("movie-tickets");

        var ticketstitle = document.createElement("span");
        ticketstitle.classList.add("tickets-title");
        ticketstitle.innerText = 'TICKETS';

        tickets.appendChild(ticketstitle);

        var schedule = JSON.parse(movie.schedule);

        for (const prop in schedule) {
            var day = prop.toString();
            var movies = schedule[prop];

            var daycontainer = document.createElement('div');
            daycontainer.classList.add('tickets__day')

                var dayname = document.createElement('div');
                dayname.classList.add('tickets__day-name');
                dayname.innerText = day;

                daycontainer.appendChild(dayname);

                for (const film of movies) {
                    var moviebutton = document.createElement('div');
                    moviebutton.classList.add('tickets__showtime');
                    
                    var movietime = document.createElement('span');
                    movietime.innerText = film[0];

                    var seats = document.createElement('span');
                    seats.innerText = film[1].toString() + ' left';

                    var incart = document.createElement('span');
                    incart.innerText = '0 in cart';

                    moviebutton.appendChild(incart);
                    moviebutton.insertBefore(seats, incart);
                    moviebutton.insertBefore(movietime, seats);

                    daycontainer.appendChild(moviebutton);
                }
            tickets.appendChild(daycontainer);
        }

        var addtocart = document.createElement("span");
        addtocart.classList.add("tickets-in-cart");
        addtocart.innerText = 'ADD TO CART';

        tickets.appendChild(addtocart);
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
    tickets.addEventListener('click', function(e) {
        console.log(e.target)
    })
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////

      location.appendChild(tickets);
}

window.addEventListener("load", loadMoviePage);

body {
    font-family: 'Teko', sans-serif;
    margin: 50px 20%;
    background-image: linear-gradient(0deg, rgba(0,0,0,1) 30%, rgba(253,126,126,0) 90%),
    url(https://images.unsplash.com/photo-1574267432553-4b4628081c31?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fG1vdmllJTIwdGhlYXRlcnxlbnwwfHwwfHw%3D&w=1000&q=80);
    background-color: black;
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    color:rgb(246, 199, 199);
}

.movie-tickets {
    background:rgb(61, 0, 0);
    margin: 20px 0;
    display: flex;
    flex-direction: column;
}

.tickets-title, .tickets__day-name, .tickets-in-cart {
    width: 100%;
    text-align: center;
    font-size: 1.7em;
}

.tickets-in-cart {
    background-color: rgb(90, 2, 2);
}

.tickets__showtime {
    font-size: 1.3em;
    display:flex;
    justify-content: space-around;
    padding: 0 20%;
    transition: all 100ms ease-in-out;
}

.tickets__showtime:hover {
    background-color: rgb(90, 2, 2);
    transform: scale(1.05);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Movie Page</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans&family=Teko:wght@300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="/css/general.css">
        <link rel="stylesheet" href="/css/movie.css">
    </head>
    <body class="moviebody">
        <article class="content">
        </article>

        <script src="/js/movie.js" type="module"></script> 
        <script src="/js/general.js" type="module"></script> 
    </body>
    
</html>

I’m trying to program a music bot in Python, but when I run it, I get an error:

evalmachine.<anonymous>:25
[])||(0,c[2])((0,c[45])((0,c[25])(c[21],c[55],(0,c[11])()),c[2],(0,c[86])(c[55],c[53]),c[13],c[77],c[27]),c[52],c[62],c[74]),1==c[43]&&((0,c[45])((0,c[2])((0,c[13])(c[65+Math.pow(3,2)%391],c[85]),c[78],c[35],c[68]),c[2],((0,c[76])(c[3],c[77]),c[40])(c[77]),c[40],c[87]),1)||(((((0,c[13])(c[87],c[65]),c[52])(c[46],c[Math.pow(5,3)%149+-51]),c[47])(c[63],c[1]),c[62])(c[50],c[18]),c[28])(c[56],c[50])};lma(ncode);
^

SyntaxError: Missing catch or finally after try
at new Script (node:vm:100:7)
at Object.exports.decipherFormats (c:\Users\Chris\node_modules\ytdl-core\lib\sig.js:116:51)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Promise.all (index 0)
at async exports.getInfo (C:\Users\Chris\node_modules\ytdl-core\lib\info.js:401:17) {stack: 'evalmachine.<anonymous>:25
[])||(0,c[2])((0,c…is\node_modules\ytdl-core\lib\info.js:401:17)', message: 'Missing catch or finally after try'}

what does “Missing catch or finally after try” means?

I tried reinstalling ytdl-core, but it doesn’t work
here is my code:

    
        try {
    
            // get YouTube video info
            const res = await ytdl.getInfo(musicURL);
            const info = res.videoDetails;
    
            // add video to list
            if (!this.queue[guildID]) {
                this.queue[guildID] = [];
            }
    
            this.queue[guildID].push({
                name: info.title,
                url: musicURL
            });
    
 ...