Code navigation in VSCode doesn’t work on external *.js files

I have some script tags in head of index.html

<head>
    <link rel="stylesheet" href="space.css">
    <script src="../highcharts/code/highcharts.src.js" defer ></script>
    <script src="../highcharts/code/highcharts-3d.src.js" defer ></script>
    <script src="../highcharts/code/modules/exporting.src.js" defer ></script>
    <script src="../highcharts/code/modules/export-data.src.js" defer ></script>
    <script src="../highcharts/code/modules/accessibility.src.js" defer ></script>
    <script src="./space.js" defer ></script>
</head>

in space.js, I’d like hover and code navigation to work, but it doesn’t (hover gives type ‘any’. I added a jsconfig.json which didn’t seem to help:

{
    "compilerOptions": {
        "target": "ES6"
    }
}

I tried:

/// <reference path="./code/highcharts.src.js" />

I tried annotating my code:

// Set up the chart
/**
 * @param chart Highcharts.Chart
 */
const chart = Highcharts.chart('container',{
    chart: {
        margin: 200,
        type: 'scatter3d',

. The JSDoc did tell echo back that chart was the type I declared it to be, but no more. Any help appreciated.

Arrow function doesn’t work in ‘change’ and ‘input’ addEventListener [duplicate]

I have a text input on form. Now, I wanna try to fetch the data from this input by using ‘change’ and ‘input’ event in JavaScript.

Now the HTML code is :

<form action="">
    <input type="text" id="input">
</form>

And the Javacript code is :

let input = document.getElementById('input');

input.addEventListener('change', () => {
   console.log(this.value);
})

input.addEventListener('input', () => {
   console.log(this.value);
})

I was expecting that, if an user makes some changes in the text input, the changed data will be showed in console. In that case, normal or anynomous function is working but arrow function doesn’t.

QWebEngineView app fails to load Google Maps API with js: Uncaught (in promise) Error: The Google Maps JavaScript API could not load

I have an app which displays Google Maps in a QWebEngineView. The app works fine on Windows but so far I have not been successful getting the app working on Ubuntu or MacOS. In order to narrow down the problem, I have modified the Qt Map Example to duplicate the error.
This test app was compiled on Qt version 6.4.1. The GCC++ compiler is version 11.04.

maps.pro:

TEMPLATE = app

QT += webenginewidgets widgets

HEADERS += 
    mainwindow.h

SOURCES += main.cpp 
    mainwindow.cpp

CONFIG+=use_gold_linker

target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/maps
INSTALLS += target

main.cpp

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QCoreApplication::setOrganizationName("QtExamples");
    QApplication app(argc, argv);

    MainWindow mainWindow;
    mainWindow.resize(1024, 768);
    mainWindow.show();

    return app.exec();
}

mainwindow.h

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QWebEngineView>

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = nullptr);

private:
    QWebEngineView *m_view;
};

#endif // MAINWINDOW_H

mainwindow.cpp

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

#include "mainwindow.h"

#include <QMessageBox>
#include <QDir>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , m_view(new QWebEngineView(this))
{
    setCentralWidget(m_view);

    QWebEnginePage *page = m_view->page();

    QFileInfo info(QDir::currentPath() + QDir::separator() + "test.htm");
    if(info.exists())
       page->load(QUrl::fromLocalFile(info.filePath()));
       //page->load(QUrl("https://googlemaps.com"));
}

apikey.js // contains a valid apikey

var apikey2  = "APIKEY"; // API key 3
console.log("api keys loaded");

test.htm //the html file loaded by mainwindow.cpp:

<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0" user-scalable="yes" />
  <style type="text/css">
    html { height: 100%; }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 100%; }
    .menu {
        width: 160px;
        box-shadow: 3px 3px 5px #888888;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        border-radius: 2px;
        background-color: #ffff;
        position: fixed;
        text-align: center;
        display: none;
    }

    .menu-item {
        height: 20px;
        background-color: white;
    }
</style>
<title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- playground-hide -->
    <script src="apikey.js"> </script>
    <script>
      const process = { env: {} };
      process.env.GOOGLE_MAPS_API_KEY =
        apikey2;
    </script>
    <!-- playground-hide-end -->

    <!--link rel="stylesheet" type="text/css" href="./style.css" /-->
    <script type="module" src="./test_index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: apikey2, v: "weekly"});</script>
  </body>
</html>

test_index.js // the javascript module

let map; //google.maps.Map;
async function initMap() {
  const { Map } = await google.maps.estimportLibrary("maps");
  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  console.log("initMap done");
}

initMap();
//export {};

Running the program results in a blank screen and these errors:

19:15:35: Debugging /home/allen/Projects/build-maps-Desktop_Qt_6_4_1_GCC_64bit-Debug/maps ...
qt.webenginecontext: 

GL Type: desktop
Surface Type: OpenGL
Surface Profile: CompatibilityProfile
Surface Version: 4.3
QSG RHI Backend: OpenGL
Using Supported QSG Backend: yes
Using Software Dynamic GL: no
Using Multithreaded OpenGL: yes

Init Parameters:
  *  application-name maps 
  *  browser-subprocess-path /home/allen/Qt/6.4.1/gcc_64/libexec/QtWebEngineProcess 
  *  create-default-gl-context  
  *  disable-features ConsolidatedMovementXY,InstalledApp,BackgroundFetch,WebOTP,WebPayments,WebUSB,PictureInPicture 
  *  disable-setuid-sandbox  
  *  disable-speech-api  
  *  enable-features NetworkServiceInProcess,TracingServiceInProcess 
  *  enable-threaded-compositing  
  *  in-process-gpu  
  *  use-gl desktop 

js: Uncaught (in promise) Error: The Google Maps JavaScript API could not load.
23:38:02: Debugging of /home/allen/Projects/build-maps-Desktop_Qt_6_4_1_GCC_64bit-Debug/maps has finished with exit code 0.

Set a different image for each page than the image on another page

I created a project in react and in my files there are several css files for example loginPage.css, tradingPage.css,
app.css…
If I put a background image for the body, it changes on all pages and I try to be more specific, but I can’t do it on the entire height of the page, for example I tried to create a div that would wrap the entire page and then set a background image for it, and still it didn’t work, the background image was just The div is not the entire length of the page,
Does anyone have an idea how to do this more specifically.
Thanks to all who answer :).

LoginPage.jsx file:

 <div className="login-form-container">
       
      <h2>{isSignIn ? 'Sign In' : 'Sign Up'}</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />

        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />

        <br /><button type="submit">{isSignIn ? 'Sign In' : 'Sign Up'}</button>
      </form>

      <p>
        {isSignIn ? "Don't have an account? " : 'Already have an account? '}
        <button type="button" onClick={() => setIsSignIn(!isSignIn)}>
          {isSignIn ? 'Sign Up' : 'Sign In'}
        </button>
      </p>
    </div>
  );
}

css file :

.login-form-container {
  background-image: url('https://a.c-dn.net/c/content/dam/igcom-websites/sv_SE/images/brochure-                    pages/hero-images/2023/08/18/Trade_Analytics_promotion_HP_Banner_1440px_x720px.png');
    width: 500px;
    height: 500px;
    margin-top: 200px;
    margin-left: 40px;
    padding: 20px;
   
  }

How to set a default parameter value if no argument is passed through using the switch statement condition?

I’m doing a lab exercise on VScode for an assignment and I’m unable to pass one of the Mocha test requirements. This test requires “takes in two arguments, a name and a language, and language defaults to JavaScript”. I’ve tried to default it to “Javascript” value assuming it wants a switch statement. This is the following requirements:

describe('introductionWithLanguageOptional(name, language)', function() {
  it('takes in two arguments, a name and a language, and language defaults to JavaScript', function() {
    expect(introductionWithLanguageOptional("Gracie")).toEqual("Hi, my name is Gracie and I am learning to program in JavaScript.");
  })
})

Quite frankly, I’ve confused myself.

This is what I’ve tried:

function introductionWithLanguageOptional(name, language= "Javascript"){
    switch (name, language) {
        case(name, language) :
            return `Hi, my name is ${name} and I am learning to program in ${language}.`
            break;
        default:
            return `Hi, my name is ${name} and I am learning to program in ${language}.`
    }
}

console.log(introductionWithLanguageOptional("Gracie"))

//It returns with: 
Hi, my name is Gracie and I am learning to program in undefined.

Optimizing Checkbox Behavior in Bootstrap: Removing Events Without Adding the :disabled class

How can I effectively utilize the :disabled pseudo-class for checkboxes that are not selected, while also overriding any events that might influence the checking and unchecking behavior? This is essential as I intend to assign the disabled class to unselected items, ensuring they are visually marked, and concurrently, prevent users from manually selecting these checkboxes unless they are pre-selected, possibly through a condition like isReadonly using Vue.js.

 <template #cell(checked)="row">
        <b-form-checkbox :checked="checked !== null" :disabled="checked === null" />
 </template>

My code keeps giving a weird output when running a minimax function, anyone know why?

I have been making a mancala bot using a minimax algorithim. It works for the first bit but it often just gives an output landing on a blank space. Anyone have any idea how to fix this so it plays well?

Here is my code:

function increment(board, ltif, player, re) {
    let a = 0;
    for(let i = 0; i < board[ltif]; i++) {
        if((player && (ltif+i+a+1)%14 == 13) || (!player && (ltif+i+a+1)%14 == 6)) {
            a += 1;
        }
        board[(ltif + i + a + 1)%14] += 1;
    }
    const bltif = board[ltif];
    board[ltif] = 0;
    let ans;
    board[(bltif + ltif + a)%14] == 1 || (bltif + ltif + a)%14 == 6 || (bltif + ltif + a)%14 == 13 ? ans = board : ans = increment(board, (bltif + ltif + a)%14, player);
    if(((bltif + ltif + a)%14 == 6 || (bltif + ltif + a)%14 == 13) && !re) {
        ans = 2;;
        }
    if(board[(bltif + ltif + a)%14] == 1 && !re) {
        ans = 3;
    }
    return ans;
}
function minimax(board, depth, player) {
    if(board[6] > 24) {
        return 15;
    }else if(board[13] > 24) {
        return -15;
    }else if(board[6] == 24 && board[13] == 24) {
        return 0;
    }else if(depth === 0) {
        return Math.floor((board[6]-board[13])/2);
    }
    let avail = board.map((element, index) => (element !== 0 && ((index < 6 && player)|| (index < 13 && index > 6 && !player)) ? index : -1)).filter(element => element !== -1);
    if(player) {
        let maxEval = [-Infinity];
        for(let i = 0; i < avail.length; i++) {
            let tboard = increment(board.slice(), avail[i], player, false);
            let Eval;
            if(tboard == 2) {
                Eval = 13;
                tboard = increment(board.slice(), avail[i], player, true);
            }else if(tboard == 3) {
                Eval = -13;
                tboard = increment(board.slice(), avail[i], player, true);
            }else{
                Eval = minimax(tboard, depth - 1, false);
            }
            maxEval = [Math.max(Eval, maxEval[0]),avail[i],tboard];
        }
        final = [maxEval[1], maxEval[2]];
        return maxEval[0];
    }else{
        let minEval = +Infinity;
        for(let i = 0; i < avail.length; i++) {
            let tboard = increment(board.slice(), avail[i], player, false);
            let Eval;
            if(tboard == 2) {
                Eval = 13;
                tboard = increment(board.slice(), avail[i], player, true);
            }else if(tboard == 3) {
                Eval = -13;
                tboard = increment(board.slice(), avail[i], player, true);
            }else{
                Eval = minimax(tboard, depth - 1, false);
            }
            minEval = Math.min(Eval, minEval);
        }
    return minEval;
    }
}
minimax([
    5, 0, 5, 5, 5, 0,
    3, 5, 5, 0, 5, 5,
    5, 0
  ], 9, true);
console.log(final);

It runs out of a text based editor so thats why the output is into console and it only checks one board then you have to input another. Also just to clarify it is the avalanche version of mancala. I do not have much experience using a minimax algorithm so if anyone has any insight into the problem that would be very helpful. One example of this is that when given the board state [5, 0, 5, 5, 5, 0, 3, 5, 5, 0, 5, 5, 5, 0] it tells me to move the one on the 4th spot of the array so 5 from the right which gives this output: [
5, 0, 5, 5, 0, 1,
4, 6, 6, 1, 5, 5,
5, 0
]. There are much better possible moves and I have no idea why the algorithm is selecting this. Also, the minimax algorithm I am using does not use alpha-beta pruning which is intended and not just a mistake in the code.

Modifying GitHub Repository for Personal Use – Need Help Resolving Issues

I found a GitHub repository that is useful to me, but it lacks a feature-work on netflix I require. I opened an issue to request the feature, but the author seems currently occupied with other projects and won’t be updating it for now. Attempting to modify the code myself, I encountered some issues such as Uncaught TypeError: Cannot read properties of null (reading 'currentTime') that I couldn’t resolve. Now, I’m seeking assistance on StackOverflow to overcome these challenges.

I tried to revise the if statement to :

if (window.location.href.includes("youtube.com/watch") || window.location.href.includes("netflix.com/watch"))

and added a function to distinguish between netflix and youtube so as to get their URL

    function getVideoPlatform()
    {
        const youtubePattern = /youtube.com/watch?v=/;
        const netflixPattern = /netflix.com/watch//;

        const url = window.location.href;

        if (youtubePattern.test(url))
        {
            return "youtube";
        } else if (netflixPattern.test(url))
        {
            return "netflix";
        } else
        {
            return "unknown";
        }
    }

then a function to generate netflix timestamp and a if statement to differentiate

    function timestampGen(url, time)
    {
        url = url.split('?')[0];
        time = time | 0;
        url = url + '?t=' + time;
        return url;
    }
        if (platform === "youtube")
        {
            current_time = document.querySelector(".video-stream").currentTime.toFixed() || 0;
        } else if (platform === "netflix")
        {
            current_time = timestampGen() || 0;
        } else
        {
            console.error("Unsupported platform");
            return; // Exit the function if the platform is unsupported
        }

        var timestamped_url;

        if (platform === "youtube")
        {
            timestamped_url = "https://youtu.be/" + videoId + "?t=" + current_time;
        } else if (platform === "netflix")
        {
            timestamped_url = "https://www.netflix.com/watch/" + videoId + "?t=" + current_time;
        }

I also changed JSON file to "matches": [ "*://*.youtube.com/watch*", "*://*.netflix.com/watch*" ], but it seems i just keep get the error Uncaught TypeError: Cannot read properties of null (reading 'currentTime')
I feel like this repo should be helpful for generating netflix timestamp but I don’t know how to integrate it.

How can I resolve the flex slider?

Can anyone help me figure out why am I getting this error?

Uncaught TypeError: jQuery(…).flexslider is not a function

    jQuery(document).ready(function() {
    jQuery('.slider').flexslider();

at HTMLDocument.<anonymous> (custom-mega-menu.js:4:11492)
at i (custom-mega-menu.js:2:33554)
at Object.fireWith [as resolveWith] (custom-mega-menu.js:2:34521)
at Function.ready (custom-mega-menu.js:2:36662)
at HTMLDocument.K (custom-mega-menu.js:2:37059)

the code I have:

I tried googling and youtube but I can’t find something specific to help figure it out.

How do I identify active users on my Nextjs app using Supabase auth?

I want to identify who is on my app so I can place green badges as indicators.

I logged into my app (which I have not deployed) through Google OAuth, so the session is stored. However, I left days ago and it is still there. So, I don’t know the best algorithm or query to implement to accomplish this. Hopefully, other developers have been able to overcome this issue.

getStaticProps is not working in production nextjs

getStaticProps

export async function getStaticProps() {
  const apiUrl =
    process.env.NODE_ENV !== "production"
      ? `https://myapp.vercel.app/api/empty`
      : "http://localhost:3000/api/empty";
  const response = await fetch(apiUrl);
  const res = await response.json();
  return {
    props: {
      data: res.message,
    },
  };
}

api/empty

export default function (req, res) {
  res.json({ message: "Hello world!" });
}

this keeps fail to build in vercel

error

Error occurred prerendering page "/empty". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11372:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getStaticProps (/vercel/path0/.next/server/pages/empty.js:105:22)
- info Generating static pages (13/13)
> Export encountered errors on following paths:
    /empty
Error: Command "npm run build" exited with 1

how to fix this in production , getStaticProps works well on localhost