Category: javascript

With the code below, I am trying to open a new window, look for certain span-elements, and click each of them. However, I cannot access the code of the new window through XPath.

• Inserting the code (copy & paste) of the clickElem function directly in the new tab works fine
• CORS shouldn’t be a problem since it’s the same domain
• I’ve been also following this answer.

JavaScript:

const w = window.open('https://example.com', 'Example', 'width=500, height=500');
w.clickElem = () => {
    const xpath = '//span[text()="Click here"]';
    const selectedNodeElements = w.document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
    let currentNode = selectedNodeElements.iterateNext();
    while (currentNode) {
        currentNode.click();
        currentNode = selectedNodeElements.iterateNext();
    }
}
setTimeout(w.clickElem, 8000);

When I try to access the text via currentNode.textContent I receive following error:

"Error in protected function: Cannot read properties of null (reading 'textContent')"

Grateful for every hint!

Javascript. POST request. It is not an API request (axios or fetch), but the old classical request.

I need a payload like ...&_selected_action=5&_selected_action=10.
So I think I cannot use a form submitting technique here.
With a single occurence ...&_selected_action=5 I am able to do it, everything works well.
For the repeated value I can create the string by hand or by URLSearchParams().toString() but I am not able to send it.

Any idea?

More details. I need create this request in Django+Vue application which partially replaces the old school Django Admin. The ListView is replaced using Vue and now I want to reuse the actions where Django Admin uses Post request formatted as above. So with single selected row in list I am able to do it, but with 2+ selected rows I cannot find a good way how to do it.

I have a script that I’m using to calculate the price of a selected field

When i run the function ‘calculateTotal()’ i get this error “Cannot access ‘usagePrice’ before initialization”.

Here is my code:

// Returns total for step 1
const usagePrice = () => {
    const field = document.querySelector('input[name="usage"]:checked');
    const subField = document.querySelector('input[name="varifocal-lenses"]:checked');

    let price = field.dataset.price;
       

    if (field.value == 'varifocal') {
        
        price = subField.dataset.price;
    }

    console.log('Usage price: ' + price);
    return price;
}

// Adds all totals together
const calculateTotal = () => {
    const usagePrice = usagePrice();
    const prescriptionPrice = prescriptionPrice();
    const lensPackagePrice = lensPackagePrice();
    const lensTypePrice = lensTypePrice();

    const total = usagePrice + prescriptionPrice + lensPackagePrice + lensTypePrice;

    return total;
}


console.log(calculateTotal());

Can anyone explain whats going wrong? Thank you in advance.

HOW CAN I SET DATA INTO THE STATE?

** And how can i solve createContext error? **

export const LastChanceContext = createContext() //in there return error: Expected 1 arguments, but got 0.

export const GET_LASTCHANCE = “GET_LASTCHANCE”

const LastChanceWrapper = ({children} : {children:any}) => {

const initialState = {
    lastChances: [],
    lastChance: {}
};
console.log('asd',initialState);

const [state, dispatch] = useReducer(lastChanceReducer, initialState);

useEffect(() => {
    const getLastChance = async () => {
        const result = await axiosFetch('http://65.21.148.176:2803/api/Home/Get');
        const action = {
            type:GET_LASTCHANCE,
            payload:result.data.data.lastChanceList
        };
        if(Object.keys(result).length !== 0) {
             dispatch(
                 {state,
                action}
             )

            console.log(result.data.data.lastChanceList);
        }

    };

    getLastChance();
}, [])


return (
    <LastChanceContext.Provider value={{
        lastChances: state.lastChances,
        lastChance: state.lastChance
    }}>
        {children}
    </LastChanceContext.Provider>
)

}

export default LastChanceWrapper

I have a small loop of code which is throwing Uncaught RangeError: Invalid Array Length

I was able to reproduce it with just this in the Google Chrome console

const COUNT = 100_000_000;
const xValues = new Array(COUNT);
const yValues = new Array(COUNT);
for (let i = 0; i < COUNT; i++) {
    xValues[i] = i;
    yValues[i] = Math.sin(i * 0.000001);
}
console.log(`count: ${yValues.length}`);

Here’s the output in developer console

As far as I know the maximum array size in Javascript is 2^32-1? There should be enough memory to allocate here and the index i is never negative or outside the bounds of the array as far as I can see.

Curiously enough, if I use this code, there is no crash

const COUNT = 100_000_000;
const xValues = new Array(COUNT);
const yValues = new Array(COUNT);
for (let i = 0; i < COUNT; i++) {
    xValues[i] = i;
    yValues[i] = i;
}
console.log(`count: ${yValues.length}`);

The value assigned to yValues[i] never goes outiside of the range -1, +1 so I can’t see this as a number out of range problem either.

Anyone shed any light on this?

Here is my code:

useEffect(() => {
    playerRef.current.seekTo(convertedflat[currentTimeIndex], 'seconds');
  });
  return (
    <>
      <main>
        <div className={style.main_container}>
          <NavBar />

          <div className={style.heronext}>
            <div className={style.hero_container}>
              <ReactPlayer
                ref={playerRef}
                playing
                controls={true}
                url={`videos/${episList[currentEpisodeIndex]}.mkv`}
                width="90%"
                height="55rem"
                />
               </div>

              <button
              className={style.next}
              onClick={() => {
                setCurrentTimeIndex((prevTimeIndex) => prevTimeIndex + 1) %
                  convertedflat.length;

                setcurrentEpisodeIndex((prevTimeIndex) => prevTimeIndex + 1) %
                  convertedflat.length;

                console.log(currentTimeIndex);
                console.log(currentEpisodeIndex);
              }}
            >
              Next
            </button>

basically when you click on the next button it moves to the next timestamp until the array finishes. but I want to it starts again when the array list is finished.Currently when the array navigation is finished it shows error.

I used % length but it doesnt work.
Here is the error message when the list is finished:

TypeError: Failed to set the ‘currentTime’ property on ‘HTMLMediaElement’: The provided double value is non-finite.

I am trying to observe and detect if the position of a div crosses the center of my viewport on the y-axis. If so a function should be fired.
I am not scrolling or dragging the element so I can’t use an event listener that listen to those events.
Does anyone know an approach that I could follow?
Please no jQuery solutions, I am using Vue3 so I would wan’t to use plain javascript.

how to display createdAt field date according to the local timezone. i have tried it’s only working for localhost when I upload it on the server it’s showing createdAt field data UTC format.

here is my code

dateFormatwithSec(date_time) {

    const testDateUtc = moment.utc(date_time);
    const localDate = moment(testDateUtc).local();
    return localDate.format('YYYY-MM-DD HH:mm:ss');
},

why it’s not providing the right output on the server.

Hi All I am not able to dowonload PDF file on Iphone edge browser below is my code snippet in angular.

    const fileName = file.name + '.' + file.data_type;
      const dataType = res.type;
      const binaryData = [];
      binaryData.push(res);
      const blob = new Blob(binaryData, { type: 'application/pdf'});
      // IE
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        // other browser
        const downloadLink = document.createElement('a');
        const url = window.URL.createObjectURL(blob);
        document.body.appendChild(downloadLink);
        downloadLink.href = url;
        downloadLink.target = '_blank';
        downloadLink.download = fileName;
        downloadLink.click();
       
      }

It is working on all other browser and devic.Not only working on Edge browser of Iphone

I’m trying to create an interface to be able to monitor the outputs of a relay board.
When the page is loaded, the status of the output is set by changing the image of the component. I want read the status of the outputs every 1 second and update the relative component.
If I open another tab where I go to change the status of the output automatically I have to change the status of the first tab as well.
I don’t know how to make react render only the component that has changed

import React, { useState, useEffect } from 'react'
import EventBus from "../common/EventBus";
import api from "../services/api";
import Device from "../components/Device"
const serverLink = "http://localhost:8080";

const Devices = () => {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);
    const [errorCode, setErrorCode] = useState("")
    const [state, setState] = useState()
    const [refreshInterval, setRefreshInterval] = useState(4000)
    async function setDevice(_id, outId, value) {
        try {
            const response = await api({ url: `${serverLink}/api/device/setdevice`, method: "POST", data: { _id: _id, outId: outId, value: value } })
            if (response.data.status === "error") {
                setError(true)
                setErrorCode(response.data.description)
                setLoading(false)
            }
        } catch (error) {
            const _content =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();
            setErrorCode(_content);
            if (error.response && error.response.status === 403) {
                EventBus.dispatch("logout");
            }
        }
    }
    async function getStatus() {
        try {
            const response = await api.get(`${serverLink}/api/device/getstatus`)
            if (response.data.status === "error") {
                setError(true)
                setErrorCode(response.data.description)
                setLoading(false)
            } else {
                setState(response.data.data)
                setLoading(false)
            }
        } catch (error) {
            const _content =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();
            setErrorCode(_content);
            if (error.response && error.response.status === 403) {
                EventBus.dispatch("logout");
            }
        }
    }

     useEffect(() => {
         getStatus()
         const interval = setInterval(getStatus, refreshInterval)
         return () => clearInterval(interval);
     }, []);
    return (
        <div className='conteiner-rw'>
            {loading ? "caricamento..." : error ? <p>{errorCode}</p> :(
                state.map((dev) => {
                    return dev.out.map((el, index) => {
                        return <Device key={index} {...el} _id={dev._id} setDevice={setDevice} />
                    })
                }))
            }
        </div>
    )
}

export default Devices

The device component

import React, { useState, useEffect } from 'react';
import image from "../assets/image/image"

const Device = ({ id, _id, name, type, value, setDevice }) => {
    const [state, setState] = useState(value)
    const changeState = () => {
        if (state == 1) {
            setState(0)
            setDevice(_id, id, 0)
        } else if (state == 0) {
            setState(1)
            setDevice(_id, id, 1)
        }

    }

    return (
        <div className='device conteiner-cl' onClick={() => changeState()}>
            <img src={state == 1 ? image.lamp_on : image.lamp_off} alt={name} className='icon' />
            {
                name
            }
        </div>

    )
}

export default Device

The api response

{
    "status": "ok",
    "data": [
        {
            "_id": "619e17af1479f1846c8afaee",
            "name": "dev1",
            "ip": "192.168.0.50",
            "descr": "denkovi",
            "channel": "",
            "type": "denkovi",
             "out": [
                {"id": 1,"name": "output1","value": "0"},
                {"id": 2,"name": "output2","value": "0"},
                {"id": 3,"name": "output3","value": "0"},
                {"id": 4,"name": "output4","value": "0"},
                {"id": 5,"name": "output5","value": "0"},
                {"id": 6,"name": "output6","value": "0"},
                {"id": 7,"name": "output7","value": "0"},
                {"id": 8,"name": "output8","value": "0"},
                {"id": 9,"name": "output9","value": "0"},
                {"id": 10,"name": "output10","value": "0"},
                {"id": 11,"name": "output11","value": "0"},
                {"id": 12,"name": "output12","value": "0"},
                {"id": 13,"name": "output13","value": "0"},
                {"id": 14,"name": "output14","value": "0"},
                {"id": 15,"name": "output15","value": "0"},
                {"id": 16,"name": "output16","value": "0"}
                        ]
        },
        {
            "_id": "619e17af1479f1846c8afaef",
            "name": "dev2",
            "ip": "192.168.0.50",
            "descr": "denkovi",
            "channel": "",
            "type": "denkovi",
            "out": [
                {"id": 1,"name": "output1","value": "0"},
                {"id": 2,"name": "output2","value": "0"},
                {"id": 3,"name": "output3","value": "0"},
                {"id": 4,"name": "output4","value": "0"},
                {"id": 5,"name": "output5","value": "0"},
                {"id": 6,"name": "output6","value": "0"},
                {"id": 7,"name": "output7","value": "0"},
                {"id": 8,"name": "output8","value": "0"},
                {"id": 9,"name": "output9","value": "0"},
                {"id": 10,"name": "output10","value": "0"},
                {"id": 11,"name": "output11","value": "0"},
                {"id": 12,"name": "output12","value": "0"},
                {"id": 13,"name": "output13","value": "0"},
                {"id": 14,"name": "output14","value": "0"},
                {"id": 15,"name": "output15","value": "0"},
                {"id": 16,"name": "output16","value": "0"}
            ]
        }
    ]
}

I use

JSON.parse($(‘#globalmodel’).val()); and get the following in quick watch

JsonDetail “{“ConnectionId”:”1234″,”Pin”:null,”Id”:”8765″,”Street”:null,”Sender”:”Bob”}”

How can i extract each field value , connectionid , Pin , Id Street and Sender ?

I have been struggling for several days with the following algorithm I need.

What I need to generate are the totality of combos taking into account the weight in their generation.

// Generate composition depending on weight.
// The weight is a value from 1 to 100, representing the importance in the generation.
// ex.: A layer with 1% should only display 1% of the total generated.

const layers = [
    [
    { id: 1, weight: 1 },   // Shows 1 time
    { id: 2, weight: 9 },   // Shows 9 times
    { id: 3, weight: 15 },  // Shows 15 times
    { id: 4, weight: 25 },  // Shows 25 times
    { id: 5, weight: 50 },  // Shows 50 times
  ],
  [
    { id: "a", weight: 50 },    // Shows 50 times
    { id: "b", weight: 25 },    // Shows 25 times
    { id: "c", weight: 15 },    // Shows 15 times
    { id: "d", weight: 9 },     // Shows 9 times
    { id: "e", weight: 1 },     // Shows 1 times
  ], 
    [
    { id: "_", weight: 15 },    // Shows 15 times
    { id: "-", weight: 25 },    // Shows 25 times
    { id: ".", weight: 50 },    // Shows 50 times
    { id: ",", weight: 9 },     // Shows 9 times
  ]
  // ... There could be more collections
]

const combTotal = layers[0].length * layers[1].length * layers[2].length // => 100


// Expect result:
 
[ 
  [5, "d", "."], 
  [2, "a", "_"],
  [4, "a", ","],
  // ...
]

Generating the whole composition without weights is simple, but the calculation to take into account the weight is costing me more than it should.

If someone could show me some reference to unlock me, it would be great.

Best regards

I am currently working with website made using AMP.I want to integrate with MS clarity on this page but not able to find any way.

I have created number of models(separate files) in my NodeJS Project. I am exporting all the files dynamically in single index.js file. Now when I require models folder and try to load the Model Intellisense is not be able to load that Model.

• Is there any solution to resolve this issue.
• Expected intellisene Path is const {ModelController} = require('../models')

/models/index.js

'use strict';

const testFolder = './app/models';
const fs = require('fs');
const commons = require('../common');

const ExportsModel = {};
fs.readdirSync(testFolder).forEach((file) => {
  const fileName = file.split('.')[0];
  ExportsModel[commons.capitalizeFirstLetter(fileName) + 'Conrtroller'] = require(`./${fileName}`);
});

// console.info('ExportsModel', ExportsModel);
module.exports = ExportsModel;

/models/station.js

const mongoose = require('../configs/db.configs');
const Schema = mongoose.Schema;

const ModelSchema = new Schema(
  {
    name: { type: String, required: true },
    stationId: { type: Schema.Types.ObjectId, ref: 'station', required: true },
    description: { type: String, required: true },
  },
  { timestamps: true }
);

module.exports = mongoose.model('charger', ModelSchema);

Thank you in advance

I’m doing a webpage with multiple div which placed vertically, and here’s my concept:

1. When the scrollbar reached the first div bottom, the outer scrollbar will be disabled and enable the second scrollbar
2. The user have to reach the inner scrollbar bottom in order to enable the outer scrollbar

I tried to found the name as wells as the sample from the Internet, but I can’t really found what I want. So I would like to request any volunteers to help me about my concept.