Category: javascript

I am developing a simple 2d game where a user have to point a gun at different objects and shoot them. When a user moves his mouse, the crosshair’s position always stays the same, but the environment (all other objects) move, creating an effect of a crosshair moving. The problem is, when a cursor leaves the div (where all of the above happens), everything stops moving.

So, the question is: how can I make the cursor never leave the div (with a game) unless the game is paused?

Example of what I expect: link. In this game, when a user’s playing, their cursor is always inside a game screen, but when he’s in the menu or the game is paused, their cursor can leave a game screen.

I am trying to sign cookie and unsign it by cookie-signature.

but I attempt it along with Example, TypeError came up on my screen at unsign function.

TypeError: crypto.timingSafeEqual is not a function 

How Can I use unsign function correctly?

※ my enviornment
・cookie-signature: v1.2.0
・Node: v12.19.0
・react: 16.14.0
・Next.js: v10

I want to add multiple Leaflet map with different content on the same page but it gives me the error:

Map container is already initialized.

I’m initializing the map in a useEffect:

  useEffect(() => {
    if (!map) {
      const newMap = L.map("map", {
        zoomControl: true,
        minZoom: minZoom,
        maxZoom: maxZoom,
        maxBounds: latLngBounds,
        attributionControl: false,
      }).setView(latLngCenter, defaultZoom)

      L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png").addTo(
        newMap
      )
      setMap(newMap)
    }
  }, [map])

Then I’m returning a div with id=map.

I’m getting the error on line const newMap. I think we can’t have 2 maps on the same page with different contents?

I’m looking for a way to create a drag and drop experience in my own project football lineup part. I have reviewed so many plugins even paid plugins also. but it doesn’t full fill my requirements. I want to enable users to drag and drop in the following lineup part. Here is the example image for this functionality

Please review the image below..
Football lineup image

I want to add the features below.

1. User needs the functionality to drag a player from one position to another position.
2. When user drag and drop into another position both of them needs to be interchanged

Anyone please help me to achieve this functionality. It is okey if anyone found an appropriate plugin. ( It is okey if it is a paid plugin ). Thank you

let apples = ['Fuji','Gala','Braeburn'];
const basketDiv = document.getElementById('basket');


for (const apple of apples) {
  let radiobtn= document.createElement('input');
  radiobtn.setAttribute('type', 'radio');
  let radiolabel = document.createElement('label');
  radiolabel.innerHTML= apple;
  radiobtn.name= 'apples';
  radiobtn.id= apple;
  basketDiv.append(radiobtn);
  basketDiv.append(radiolabel);
  radiobtn.addEventListener('change',message);
}



function message(e) {
  let getselected = getSelectedValue = document.querySelector('input[name="apples"]:checked'); 
    if(getselected != null) { 
                document.getElementById("show").innerHTML= getselected.value + "  is selected"; 
            } 
            else { 
                document.getElementById("show").innerHTML = "*You have not selected  "; 
            } 
  }
  

i should get apple values but i couldn’t
It gives me ON , i don’t know what ON is
i need to know what is my mistake

import React, { Component } from “react”; import “./promo.scss”; class Promo extends Component { state = { users: [], }; onChangeLastName = (e) => { return e.target.value; }; onChangeNumb = (e) => { return e.target.value; }; onSubmit = (e) => { e.preventDefault(); this.setState({ users: [ { Lastname: this.onChangeLastName(), Phonenumb: this.onChangeNumb(), }, ], }); }; render() { console.log(this.state.users); return ( <div className=”promo border”> <div> <form onSubmit={this.onSubmit}> <div className=”form-group”> <label htmlFor=”lastname”>Last name</label> <input onChange={this.onChangeLastName} id=”lastname” name=”lastname” type=”text” /> </div> <div className=”form-group”> <label htmlFor=”phonenumb”>Phone number</label> <input onChange={this.onChangeNumb} id=”phonenumb” name=”phonenumb” type=”number” /> </div> <button>Send</button> </form> </div> </div> ); } } export { Promo }; /* There is an error*/ ////

I want to do formData in react. But I can't save input value to state.

I’m trying to make my discord bot be able to ban users.
All the articles and topics using this ‘(arg[0])’ part.
I dont understand whether I should replace the ‘(arg[0])’ part by some other variable, or should i run it like this?
because when I run it like this I get error: “ReferenceError: args is not defined”

client.on('messageCreate', async (msg) => {
 

    if (msg.content == '1') {
 
        let user = msg.mentions.members.first() || await msg.guild.members.fetch(arg[0]) //option 1
        let user = msg.guild.members.cache.get(`${args[0]}`) // option 2
 

    }

})

I was using this page as test to check if the code works, and when I hit enter the code does work by checking all checkboxes and making all labels bold but when I refresh the page and try the same thing again it doesn’t work anymore.

(function() {
    var aa = document.getElementsByTagName("input");
    var bb = document.getElementsByTagName("label");
    for (var i = 0; i < aa.length; i++){
        if (aa[i].type == 'checkbox')
            aa[i].checked = true;
            bb[i].textContent.bold();
    }
    
 })()

I tried using console.log(bb[i].textContent.bold() to check if the code detects the labels and it did the first time. The console says VM131:7 Uncaught TypeError: Cannot read properties of undefined (reading 'textContent'). I was expecting that the labels are also turned to bold after checking all the checkboxes

I am using Yup validation to get input. Everything works properly until I added creditCard. creditCard is not required unless ‘fee’ is true. When I run my code, the form will not submit because the program is waiting for creditCard to be filled in. The form only submits when I fill in creditCard. I added console.logs in the statements to see what was going on and I noticed that BOTH .then and .otherwise are always called even when ‘fee’ is false. When I remove creditCard from the YupObject, everything submits.

    const fee = feeService.checkDate("12/26/22");//should be false

    const validationSchema = Yup.object().shape({
        fees: Yup.boolean().default(fee),
        firstName: Yup.string()
            .required('First Name is required'),
        creditCard: Yup.number().test("test-number", "Credit Card number is invalid", value => valid.number(value).isValid)
            .when('fees', {
                is: (fees) => fees === true,
                then: Yup.number().required(console.log("Holding fee required due to weekend booking.")),
                otherwise: Yup.number().notRequired(console.log("not required"))
            })
    });

I tried everything I found online. I am expecting the form will allow the creditCard field to remain empty if ‘fees’ is false.

In my React/Redux project I tend to use constants in switch case within reducer, since the name of each action tends to be long and complex, I’m wondering if it’s a good practice?

const ACTION_LIST = {
  add: 'ACTION_TYPE/ADD_CUSTOMER',
  remove: 'ACTION_TYPE/REMOVE_CUSTOMER',
  update: 'ACTION_TYPE/UPDATE_CUSTOMER',
};

const reducer = produce((draft, action: IQuickBarActions) => {
  const {type, payload} = action

  switch (type) {
    case ACTION_LIST.add: { // here
      // process the state
      break;
    }
    case ACTION_LIST.remove: {
      // process the state
      break;
    }
    case ACTION_LIST.update: {
      // process the state
      break;
    }
    default:
      // do something
  }
};

I’m currently having issues getting video textures to work within the context of a mobile browser from the react three fiber library. it works with all PC browsers and their emulated mobile versions, however, opening it on mobile does not display anything. the code i used can be viewed below.

`

        <mesh name="Body_Wallpaper_0001" geometry={nodes.Body_Wallpaper_0001.geometry} scale={2.03} rotation={[0, 0, 0]}>
                        <meshStandardMaterial side={THREE.DoubleSide}  >
                            <videoTexture attach="map" args={} />
                            <videoTexture attach="emissiveMap" args={} />
                        </meshStandardMaterial>
                    </mesh>

`

`

    const  = useState(() => {
        const vid = document.createElement("video");
        vid.src = TikTok;
        vid.crossOrigin = "Anonymous";
        vid.loop = true;
        vid.muted = true;
        vid.play();
        vid.playsInline;
        vid.id = 'video';
        return vid;
    });

`

since it loads perfectly in all other browsers on pc i would have assumed it would play the video texture on mobile also.

I’m in the process of writing an article and I’m looking to see what experts and other practicioners in the industry have to say on this subject matter. I’m generally doing a research on a few popular languages and will be spawning up some articles in which many devs might find helpful; junior or senior, especially juniors.

Unforturnately there are no relevant data online dirrectly addressing the subject matter, except one response on Quora.

Trying to pull all the data from one google sheet and automatically populate one google doc, instead of four separate files after the data pull. Missing something here which I’m scratching my head about and can’t seem to find anything online.

This is my code so far:

function createNewGoogleDocs() {
  //This value should be the id of your document 
  const googleDocTemplate = DriveApp.getFileById('1kVXtatdcdlKRYzDADnIckSYcg8N3SIixn-6lEHsRMbk');
  
  //This value should be the id of the folder where you want your completed documents stored
  const destinationFolder = DriveApp.getFolderById('1ZmfdojPXdBkW93EECH9rd9Vt06Cqx7tI')

  //Here we store the sheet as a variable
  const sheet = SpreadsheetApp
    .getActiveSpreadsheet()
    .getSheetByName('Data')
  
  //Now we get all of the values as a 2D array. Merging sheet data into neccessary value type to work with.
  const rows = sheet.getDataRange().getValues();
  
  //Start processing each spreadsheet row (each array)
  rows.forEach(function(row, index){
    //Here we check if this row is the headers, if so we skip it
    if (index === 0) return;
    //Here we check if a document has already been generated by looking at 'Document Link', if so we skip it
    if (row[5]) return;
    //Using the row data in a template literal, we make a copy of our template document in our destinationFolder
    const copy = googleDocTemplate.makeCopy(`${row[1]}, ${row[0]} Article Details` , destinationFolder)
    //Once we have the copy, we then open it using the DocumentApp
    const doc = DocumentApp.openById(copy.getId())
    //All of the content lives in the body, so we get that for editing
    const body = doc.getBody();
    //In this line we do some friendly date formatting
    const friendlyDate = new Date(row[1]).toLocaleDateString();
    
    //In these lines, we replace our replacement tokens with values from our spreadsheet row
    body.replaceText('{{Headline}}', row[0]);
    body.replaceText('{{Timestamp}}', friendlyDate);
    body.replaceText('{{Article}}', row[2]);
    body.replaceText('{{CODR}}', row[3]);
    body.replaceText('{{URL}}', row[4]);
    
    //We make our changes permanent by saving and closing the document
    doc.saveAndClose();
    //Store the url of our new document in a variable
    const url = doc.getUrl();
    //Write that value back to the 'Document Link' column in the spreadsheet. 
    sheet.getRange(index + 1, 6).setValue(url)
    
  })
  
}

O! I created an account here because I need some help with something I’ve been having issues while finishing a proyect for one of my subjects in my Professional Institute. (English is not my first language, but I hope my issue is clear)
When I try to “Test Web Service” in the one I’m developing I get this message:

Error from “Test Web Service”

I found someone with a similar issue that I have but they use GlassFish, but Netbeans doesn’t let me install GlassFish (I was going to originally use it but I got this problem)

I’ve tried:

• Reinstalling everything
• Using Apache Netbeans and Tomcat’s latest versions respectively
• Reinstalling XAMPP with the other apps
• Reinstalling JKD 8 with the other apps
• Creating different users in tomcat-users.xml
• Installing Tomcat through .zip and Windows Installer
• Cleaning everything the programs leave behind before reinstalling

I’ve tried some solutions I found in Youtube and in this forum/other forums but I can’t find any answers, I would be really grateful if someone can help me, thanks!

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'C:Userstest001Downloadsbilling-webnodejs-workspace...'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)      
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

**i didnt realise when i was doing my project, it suddenly pops out yesterday. what can i do to solve this problem

(node:4956) Warning: Accessing non-existent property ‘response’ of module exports inside circular dependency
(Use node --trace-warnings ... to show where the warning was created)

i try to follow the instructions by typing node –trace-warnings … it shows another error**