Category: javascript

I’m currently having trouble in regards to pulling stuff from a JSON file into my HTML page. So to start, I currently have this code in a JSON file, which is all the items I have (so far) that I want to use for a project to create an online store.

export const data = 
[
    {
        id: 1,
        productName: "Chutes and Ladders",
        image: "../public/ChutesandLadders.jpg",
        price: 15.75,
        salePrice: 15.75,
    },
    {
        id: 2,
        productName: "Monopoly",
        image: "../public/Monopoly.jpg",
        price: 15.25,
        salePrice: 15.25,
    },
    {
        id: 3,
        productName: "Clue",
        image: "../public/Clue.jpg",
        price: 20.00,
        salePrice: 15.20,
    },
    {
        id: 4,
        productName: "The Game of Life",
        image: "../public/GameofLife.jpg",
        price: 16.00,
        salePrice: 10.00
    },
    {
        id: 5,
        productName: "TRESomme Shampoo",
        image: "../public/Tresomme.jpg",
        price: 45.00,
        salePrice: 30.00,
    },
    {
        id: 6,
        productName: "Michael Kors Purse",
        image: "../public/MichaelKorsPurse.jpg",
        price: 145.00,
        salePrice: 145.00,
    },
    {
        id: 7,
        productName: "Apple Watch Ultra",
        image: "../public/AppleWatch.jpg",
        price: 200.00,
        salePrice: 175.00,
    },
]

Then to show a sample of it, I have this information on my HTML page (index.html) where I want to change the data to the data I have from the JSON file.

<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>  
  <img class="card-img-top" width="450" height="200" src="Clue.jpg" alt="..." />         
     <div class="card-body p-4">
        <div class="text-center">
           <h5 class="fw-bolder">Clue</h5>
              <div class="d-flex justify-content-center small text-warning mb-2">
                 <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                    <div class="bi-star-fill"></div>
                 </div>
              <span class="text-muted text-decoration-line-through">$20.00</span>
              $15.20
           </div>
        </div>
        <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
           <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
        </div>
     </div>
  </div>

Is there a way to import JSON data into an HTML file, where I can actually do this?

Is it possible to load different 3rd party web pages and apply a js script to each one?

Suppose we want to first load yahoo.com, and then get the innerHTML of the body and do something with it, and then load google.com and again get the innerHTML of the body an do something with it?

I have a 3D model that has to be displayed in an html page. I have done that and I am able to move it around 360 degree as well. Now, I need to highlight specific parts. For eg: if the object is aircraft and if I click a button “Tail”, it should highlight me the tail. Please see the pic.

Can I achieve this using Three.js? Can you give me some ideas? Or, should I need to add some elements in the 3D model and refer it via code?

I am able to connect to Chrome running on port 3000 on Docker with Puppeteer, but even though I use the {headless: true} parameter, I cannot see the browser. This parameter works for the launch function but I cannot connect to the Docker Chrome with the launch function, and I am not sure if it actually works for the connect function, so how can i see the Chrome running on Docker with Puppeteer.

Docker code: run -d -p 3000:3000 --name browserless --shm-size 2gb -e "MAX_CONCURRENT_SESSIONS=10" -e DISPLAY=:99 --restart always browserless/chrome

Node.js

const puppeteer = require('puppeteer');
(async  () => {
    try {
        browser = await puppeteer.connect({
            headless: false,
            browserWSEndpoint: 'ws://localhost:3000',
        });
        const page = await browser.newPage();
        await page.goto('https://www.google.com/');
        await page.evaluate(() => {
        });
    } catch (err) {
        console.error(err);
    }
})();

enter image description hereMy webpack-dev-server keeping disconnecting and trying to reconnect, without actually connecting. Attached herein is a picture of my console in chrome

This is my webpack config.js[enter image description here][2]

````
const path = require("path");
const fs = require("fs");
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = fs.realpathSync(process.cwd());

module.exports = { 
entry:[
    "webpack-dev-server/client?http://192.0.0.0:8080",
    "webpack/hot/only-dev-server",
    path.resolve(appDirectory, "src/app.ts"), // path to the main .ts file
],
output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js", //Name for the javascript file that is created/compiled in memory
    clean: true,
    sourceMapFilename: "[name].js.map"
},
devtool: "eval-cheap-source-map",
resolve: {
    extensions: [".tsx", ".ts", ".js"],
},
devServer: {
    client: {
        webSocketTransport: 'ws',
        reconnect: true,
        overlay: true,
        progress: true,
    },
    allowedHosts: 'all',
    // host: "0.0.0.0",
    port: 8080, //port that we're using for local host (localhost: 8080)
    static: path.resolve(appDirectory, "public"), //tells webpack to serve from the public folder
    hot: true,
    liveReload: true,
    devMiddleware: {
        publicPath: "/",
    }
},
module: {
rules: [
    {
        test: /.tsx?$/,
        enforce: "pre",
        use: "ts-loader",
        exclude: /node_modules/,
    },
],
},
plugins: [
    // new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        inject: true,
        template: path.resolve(appDirectory, "public/index.html"),
    })
],
mode: "development"
}; ````

I am have try changing the entry point, host and deServer
Still the webpack-dev-server is not connecting, please what else can i do?

I am trying to create a simple chrome extension. If you visit an URL it is added to the list of URLs. You can give a simple number for this URL add a description or remove the URL from the list.

My manifest.json looks like the following:

{
    "manifest_version": 3,
    "name": "URL Annotator",
    "version": "1.0",
    "description": "Annotate URLs while browsing",
    "permissions": ["activeTab", "tabs", "storage"],
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
      }
    },
    "icons": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }
  

Here is my popup.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Annotator</title>
    <style>
        body {
            width: 300px;
            font-family: Arial, sans-serif;
            padding: 8px;
        }

        #urlInput {
            width: 100%;
            margin-bottom: 8px;
        }

        #annotatedUrls {
            margin-top: 8px;
        }

        textarea {
            display: block;
            width: 100%;
            margin-top: 8px;
            resize: vertical;
        }

        input[type="number"] {
            display: block;
            width: 100%;
            margin-top: 8px;
        }

        button {
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <h2>Annotated URLs:</h2>
    <div id="annotatedUrls"></div>
    <script src="popup.js"></script>
</body>

</html>

Finally, here is my popup.js:

async function getCurrentTab() {
  return new Promise((resolve) => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      resolve(tabs[0]);
    });
  });
}

document.addEventListener("DOMContentLoaded", async () => {
  const annotatedUrls = document.getElementById("annotatedUrls");

  chrome.storage.local.get("annotatedUrls", (data) => {
    if (data.annotatedUrls) {
      data.annotatedUrls.forEach((urlData) => {
        annotateUrl(urlData.url, urlData.description, urlData.number);
      });
    }
  });

  const currentTab = await getCurrentTab();
  const currentUrl = currentTab.url;
  chrome.storage.local.get("annotatedUrls", (data) => {
    let annotatedUrls = data.annotatedUrls || [];
    if (!annotatedUrls.some((urlData) => urlData.url === currentUrl)) {
      annotateUrl(currentUrl);
      saveAnnotatedUrl(currentUrl);
    }
  });

  function annotateUrl(url, description = "", number = "") {
    const urlItem = document.createElement("div");
    urlItem.className = "urlItem";

    const urlSpan = document.createElement("span");
    urlSpan.textContent = url;
    urlItem.appendChild(urlSpan);

    const annotationInput = document.createElement("textarea");
    annotationInput.value = description;
    annotationInput.placeholder = "Add a longer description";
    urlItem.appendChild(annotationInput);

    const numberInput = document.createElement("input");
    numberInput.type = "number";
    numberInput.value = number;
    numberInput.placeholder = "Add a positive or negative number";
    numberInput.addEventListener("input", () => {
      numberInput.style.color = numberInput.value >= 0 ? "green" : "red";
    });
    urlItem.appendChild(numberInput);

    const removeBtn = document.createElement("button");
    removeBtn.textContent = "Remove";
    removeBtn.addEventListener("click", () => {
      annotatedUrls.removeChild(urlItem);
      removeAnnotatedUrl(url);
    });
    urlItem.appendChild(removeBtn);

    annotatedUrls.appendChild(urlItem);
  }

  function saveAnnotatedUrl(url) {
    chrome.storage.local.get("annotatedUrls", (data) => {
      let annotatedUrls = data.annotatedUrls || [];
      annotatedUrls.push({ url: url, description: "", number: "" });
      chrome.storage.local.set({ annotatedUrls: annotatedUrls });
    });
  }

  function removeAnnotatedUrl(url) {
    chrome.storage.local.get("annotatedUrls", (data) => {
      let annotatedUrls = data.annotatedUrls || [];
      annotatedUrls = annotatedUrls.filter((urlData) => urlData.url !== url);
      chrome.storage.local.set({ annotatedUrls: annotatedUrls });
    });
  }
});

When loading an URL like stackoverflow.com my extension looks like the following:

Any suggestions what I am doing wrong?

I appreciate your reply!

Is it possible to call a function of an Android/IOS app from an HTML page running in a MAUI Webview (inside the same app) via Javascript?
If so, an example would be helpful.

I would like to detect in vanilla JS when any event listener is added / edited or removed from anything in the document DOM.

The use-case would be to identify of web extensions when they either attempt to:

a. manipulating the DOM, or

b. trying to add/edit or remove existing event listeners which are listening for DOM manipulation.

I have two files. Using one I created a drop down and text boxes that should be filled based on a selection of the drop down menu. I have been able to create the drop down menu along with the text boxes but they do not seem to be filling properly. My end goal is for the text boxes value to change based on the drop down menu selection. I am pretty new to php and js so if there are any obvious errors in my code feel free to address them. I really appreciate the help.

<?php 
include "connect.php";
$db = new mysqli('localhost', $dbuser, $dbpass, $dbname);
?>
<!doctype html>
<html>
<head>
    <title>How to Auto populate dropdown with jQuery AJAX</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){

    $("#coll_array").change(function(){
        var colid = $(this).val();

        $.ajax({
            url: 'new.php',
            type: 'post',
            data: {col:colid},
            dataType: 'json',
            success:function(response){

                var len = response.length;

                $("#coll_array").empty();
                for( var i = 0; i<len; i++){
                    var snn = response[i]['School Name'];
                    var gpa = response[i]['Avg GPA'];
                    var sat = response[i]['Avg SAT'];
                    var c15= response[i]['c15'];
                    var earnings= response[i]['earnings'];
                    var wdraw= response[i]["wdrawal"]
                    
                    $("#snn")=snn;
                    $("#gpa")=gpa;
                    $("#sat")=sat;
                    $("#c15")=c15;
                    $("#earnings")=earnings;
                    $("#wdrawal")=wdrawal;
                    $("#coll_array")=coll_array;

                }
            }
        });
    });

});
    </script>
</head>
<body>



<?php

include ("connect.php");
$db = new mysqli('localhost', $dbuser, $dbpass, $dbname);

if (!$db) {
  exit('Connect Error (' . mysqli_connect_errno() . ') '
       . mysqli_connect_error());
} 

?>

    <div class="label">Select Name:</div>
    
    <select name="Schoolnames">
    <option value = ""></option>
    <?php
    $queryusers = "SELECT `School Name` FROM `Colleges` ";
    $db = mysqli_query($db,$queryusers);
    while ( $d=mysqli_fetch_assoc($db)) {
        echo "<option value='{".$d['School Name']."}'>".$d['School Name']."</option>";
}   echo json_encode($Schoolnames);
    ?>
</select>
<div class="clear"></div>

      <div class="container">
      <div class="column">
      <div class="table-responsive">
      <table class="table table-bordered">

         <th>Average GPA</th>
         <th>Average SAT</th>
         <th>6 Year Graduation Rate</th>
         <th>Median Earnings 6 Years After Graduation</th>
         <th>3 Year Withdrawal Rate</th>
    </thead>
    <tbody>
    <div class="container">
      <div class="textbox">
      <div class="table-responsive">
      <table class="table table-bordered">
      
      School Name: <input type="text" id="snn" value="">

         Avg GPA: <input type="text" id="gpa" value="">

Avg SAT: <input type="text" id="sat" value="">

6 Year Grad Rate: <input type="text" id="c15" value="">

Median Earnings 6 Years After Graduation: <input type="text" id="earnings" value="">

3 Year Withdrawal Rate: <input type="text" id="wdrawal" value="">


    </thead>
    <tbody>

<?php 

include "config.php";
$con = new mysqli('localhost', $dbuser, $dbpass, $dbname);
$departid = 0;

if(isset($_POST['col'])){
   $departid = mysqli_real_escape_string($con,$_POST['col']); // department id
}



if (!empty($departid)){
   $sql = "SELECT * FROM users WHERE 'School Name'=".$departid;

   $result = mysqli_query($con,$sql);

   while( $row = mysqli_fetch_array($result) ){
      $sat = $row['Avg SAT'];
      $gpa = $row['Avg GPA'];
      $snn = $row['School Name'];
      $c15 = $row['c15'];
      $earnings = $row['earnings'];
      $wdrawal = $row['wdrawal'];
      $coll_arr[] = array("School Name" => $snn, "Avg GPA" => $gpa, "Avg SAT" => $sat, "c15" => $c15, "earnings" => $earnings, "wdrawal" => $wdrawal);
      
   }
}
// encoding array to json format
echo json_encode($sat,$gpa,$snn,$c15,$earnings,$wdrawal);
echo json_encode($coll_array);

I am trying to make a timetable generator app for teachers. I am facing a few problems when making this app I do not know what algorithm or what tactics I should use to complete this app, so I request your suggestion, thank you.

I am not a professional in this field, I have never made a timetable app before any expert can guide me through this project will be very helpful.

Resources/languages I am using:

1. MongoDB (database)
2. ExpressJS (backend)
3. ReactJS (frontend)
4. NodeJS

App Problems:
I have to make this app in such a way that it should generate timetable for all 12 classes in a school at once and it should not overlap teachers. Creating a single class timetable is easy but keeping in mind this overlap issue is a headache.

1. When generating the timetable, I want that the app should generate time table for all the classes at once(ex-12 classes in a school) and making sure that teachers do not overlap each others lecture at same day at same time. Ex- Amit is teaching maths, the app generated timetable but he has 2 lectures on monday and same time i.e. 10am at 2 different classes.

2. There are different priority teachers like, main teaching staff, non teaching staff, and so on. So they have priorities to take class if a particular subject teacher is not available. Ex – Amit is absent so priority 2 teacher will be assigned i.e. non teaching staff.

3. How should I store the json data. I mean what should be the format of it in MongoDB schema model, Ex – The current Schema looks like this is there any improvement needed.

const TimetableSchema = new mongoose.Schema({
  subject: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Subject",
    required: true,
  },
  day: {
    type: String,
    required: true,
    enum: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  },
  period: { type: String, required: true },
  teacher: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Teacher",
    required: true,
  },
  class: { type: mongoose.Schema.Types.ObjectId, ref: "Class" },
});

4. Also teachers have there specific subjects to teach so no random teacher selection is allowed.

I am expecting a app which will generate timetable for 12 classes or n number of classes for teachers and without overlapping them.

This is a novice question.

//auth.js (pinia store)

import { defineStore } from 'pinia'
import supabase from '../supabase'
import {ref, watch} from 'vue'

export const useAuthStore = defineStore('user', () =>{
  const user = ref(null)
  const error = ref(null)

  const fetchUser = async () => {
     user.value = await supabase.auth.user();

  }
  const signUp = async (email, password, username) => {
    const { error } = await supabase.auth.signUp({
      email,
      password,
    },
    {
      data: { username: username}
    }
    )
    if (error) {
      error.value = error.message;
    }
  }
  const signIn = async (email, password) => {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })
    if (error) {
      error.value = error.message;
    } else {
      user.value = data;
    }
  }
  const signOut = async () => {
    await supabase.auth.signOut();
    user.value = null;
  }

As you can see I have added an username parameter to the signUp function. The problems are:

• I’m not sure the username is being uploaded to supabase because whenever i want to retrieve the user info I get a weird object.
• I just want to be able to add inputs to the “Sign up” form, saving this info in supabase, and being able to retrieve this info from the “user” store.

I have tried to make a “getUsername” function which would be ideal:

const getUsername = async () => {
    if (!user.value) {
      // Return null if the user is not logged in
      return null;
    }
    const { data, error } = await supabase
      .from("users")
      .select("username")
      .eq("email", user.value.email)
      .single();
    if (error) {
      // Return null if there was an error fetching the username
      return null;
    } else {
      // Return the username
      return data.username;
    }
  }

And trying to render the information in a component:

<template>
  <main>
      <h1 v-if="!authStore.user">Welcome to My App!</h1>
      <p v-if="!authStore.user">Please, sign in or sign up to continue.</p>
      <h1 v-if="authStore.user">Greetings! {{ username }}</h1>
  </main>
</template>
<script setup>
  import {useAuthStore} from '../stores/auth

  const authStore = useAuthStore();
  const username = authStore.fetchUser; // Here I am testing

</script>

This code has been frustrating, I’m trying to make a spinning cube and I keep getting errors. My code in camera.js and scene.js:

import * as THREE from "three";

export function createCamera(gameWindow) {
  const DEG2RAD = Math.PI / 180;

  const LEFT_MOUSE_BUTTON = 0;
  const MIDDLE_MOUSE_BUTTON = 1;
  const RIGHT_MOUSE_BUTTON = 2;

  const MIN_CAMERA_RADIUS = 2;
  const MAX_CAMERA_RADIUS = 10;
  const MIN_CAMERA_ELEVATION = 30;
  const MAX_CAMERA_ELEVATION = 90;

  const ROTATION_SENSITIVITY = 0.5;
  const ZOOM_SENSITIVITY = 0.02;
  const PAN_SENSITIVITY = -0.01;

  const Y_AXIS = new THREE.Vector3(0, 1, 0);

  const camera = new THREE.PerspectiveCamera(75, gameWindow.offsetWidth / gameWindow.offsetHeight, 0.1, 1000);
  let cameraOrigin = new THREE.Vector3();
  let cameraRadius = 4;
  let cameraAzimuth = 0;
  let cameraElevation = 0;
  let isLeftMouseDown = false;
  let isRightMouseDown = false;
  let isMiddleMouseDown = false;
  let prevMouseX = 0;
  let prevMouseY = 0;
  
  updateCameraPosition();

  function onMouseDown(event) {
    if (event.button === LEFT_MOUSE_BUTTON) {
      isLeftMouseDown = true;
    }

    if (event.button === MIDDLE_MOUSE_BUTTON) {
      isMiddleMouseDown = true;
    }

    if (event.button === RIGHT_MOUSE_BUTTON) {
      isRightMouseDown = true;
    }
  }

  function onMouseUp(event) {
    if (event.button === LEFT_MOUSE_BUTTON) {
      isLeftMouseDown = false;
    }

    if (event.button === MIDDLE_MOUSE_BUTTON) {
      isMiddleMouseDown = false;
    }

    if (event.button === RIGHT_MOUSE_BUTTON) {
      isRightMouseDown = false;
    }
  }

  function MouseDown(event) {
    camera.onMouseDown(event);
  }

  function MouseUp(event) {
    camera.onMouseUp(event);
  }

  function MouseMove(event) {
    camera.onMouseDown(event);
  }

  function onMouseMove(event) {

    const deltaX = (event.clientX - prevMouseX);
    const deltaY = (event.clientY - prevMouseY);

    //Rotation
    if (isLeftMouseDown) {
      cameraAzimuth += -(deltaX * ROTATION_SENSITIVITY);
      cameraElevation += (deltaY * ROTATION_SENSITIVITY);
      cameraElevation = Math.min(MAX_CAMERA_ELEVATION, Math.max(MIN_CAMERA_ELEVATION, cameraElevation));
      updateCameraPosition();
    }

    //Panning
    if (isMiddleMouseDown) {
      const forward = new THREE.Vector3(0, 0, 1).applyAxisAngle(Y_AXIS, cameraAzimuth * DEG2RAD);
      const left = new THREE.Vector3(1, 0, 0).applyAxisAngle(Y_AXIS, cameraAzimuth * DEG2RAD);

      cameraOrigin.add(forward.multiplyScalar(PAN_SENSITIVITY * deltaY));
      cameraOrigin.add(left.multiplyScalar(PAN_SENSITIVITY * deltaX));
      updateCameraPosition();
    }

    //Zooming
    if (isRightMouseDown) {
      cameraRadius += deltaY * ZOOM_SENSITIVITY;
      cameraRadius = Math.min(MAX_CAMERA_RADIUS, Math.max(MIN_CAMERA_RADIUS, cameraRadius));
      updateCameraPosition();
    }

    prevMouseX = event.clientX;
    prevMouseY = event.clientY;
  }

    function updateCameraPosition() {
    camera.position.x = cameraRadius * Math.sin(cameraAzimuth * DEG2RAD) * (Math.cos(cameraElevation * DEG2RAD));
    camera.position.y = cameraRadius * Math.sin(cameraElevation * DEG2RAD);
    camera.position.z = cameraRadius * Math.cos(cameraAzimuth * DEG2RAD) * (Math.cos(cameraElevation * DEG2RAD));

    camera.add(cameraOrigin);

    camera.lookAt(cameraOrigin);
    camera.updateMatrix();
  }

  return {
    camera,
    onMouseDown,
    onMouseUp,
    onMouseMove
  }
}

//scene.js

import * as THREE from "https://unpkg.com/three/build/three.module.js";
import { createCamera } from "./camera.js"

export function createScene() {
  const gameWindow = document.getElementById("render-target");
  const scene = new THREE.Scene();

  scene.background = new THREE.Color(0x777777);

  const camera = createCamera(gameWindow);
  
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(gameWindow.offsetWidth, gameWindow.offsetHeight);
  gameWindow.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  let meshes = [];

  function initialize(city) {
    
  }


  function draw() {
    renderer.render(scene, camera.camera);
  }

  function start() {
    renderer.setAnimationLoop(draw);
  }

  function stop() {
    renderer.setAnimationLoop(null);
  }

  return {
    start,
    stop,
  }
}

I tried to run it and expected a pannable, zoomable, and rotatable cube yet it gave me the error in the title. I instead got a cube stuck in place and an error, I don’t get why it’s giving me the error and where it’s giving me the error. I’m confused and am not that good with three.js.

I am writing a chrome extension which, among other things, keeps the user logged into a web application by sending the occasional background request. But overnight all users are logged out regardless of activity.

I want to be be able to log them back in again next time they access the site. The login form is here

The form is conjured up using a js lib called handlebars so I have injected a script to access it. What I want to do is simulate a click on the “SIGN IN” button if the user has saved credentials for the site.

Testing this myself (my browser has saved credentials for the site) I can see that my email and password are automatically filled in but in a sort unconfirmed ‘grayed-out’ state. The value of the input fields are blank when I query them from the injected script. However, when I query them from the console

document.getElementById('signInName').value

I get my email address returned and the values in the fields go black. The same thing happens if I click anywhere on the document.

But simulating a click from the injected javascript does not have this effect and clicking the SIGN IN button returns a blank username / password error.

How can I confirm the auto-fill entries and submit the form from the injected javascript?

Currently building a web application with React and TypeScript, the requested feature is to display a large list of data items fetched from a server. To optimize the performance and user experience, I’d like to implement an infinite scrolling mechanism that loads more items when the user reaches the end of the list.

The main requirements are:

1. Implementing infinite scrolling efficiently in a React functional component with TypeScript.
2. Proper handling of data fetching from the server and state updates as the user scrolls.

Here’s a simplified version of the current list component:

import React, { useState, useEffect } from 'react';

interface ListItemProps {
  id: number;
  title: string;
}

const ListItem: React.FC<ListItemProps> = ({ id, title }) => (
  <div className="list-item">
    {id}. {title}
  </div>
);

interface ListProps {
  fetchData: (start: number, limit: number) => Promise<ListItemProps[]>;
}

export const InfiniteScrollList: React.FC<ListProps> = ({ fetchData }) => {
  const [items, setItems] = useState<ListItemProps[]>([]);

  useEffect(() => {
    // Initial fetch on component mount
    fetchData(0, 20).then((data) => {
      setItems(data);
    });
  }, [fetchData]);

  return (
    <div className="list-container">
      {items.map((item) => (
        <ListItem key={item.id} id={item.id} title={item.title} />
      ))}
    </div>
  );
};

In this example, the fetchData function fetches a specified number of items from the server, starting from a given index. The initial fetch retrieves the first 20 items when the component mounts. The goal is to modify this component to support infinite scrolling and efficiently load more items as needed.

When my JavaScript file is first loaded, an AJAX request is sent to a database. The trip usually takes about 30ms. On return, the data is stored in a variable. At this point, the variable is either initialized with the data or its initial value is changed. I then need to use the retrieved data.

So it seems I should be able to do something like this:

function async waitForData() {
    return new Promise(resolve) => {
        resolve(AJAXvariable);  // AJAXvariable gets correct value on AJAX return
    }
}
waitForData();

or:

const DBdata = async function(){
    return await AJAXvariable !== ""; 
}

In both cases, what’s returned is the current value of AJAXvariable: undefined or “” or false. The await doesn’t happen.

How can I write a promise that checks the value of a variable and doesn’t resolve until that variable changes? Is this even possible?