Category: javascript

I couldn’t figure this out or find anything on this on the web.
Basically how would you write code for this:
I have 3 buttons, and I need to click all of them before the function fires.
I know how to have each button do the same thing, but I want it so I have to click all 3 for it to do anything.

If you could give me any example code of this I can find a way to implement it into my project.

If you need me to elaborate let me know.
Thanks!

I’m struggling to update all “new” attributes too false. Below is an example object.

const msgdata = {
"1511207758": {
    "userid": "1000015977",
    "text": "hello",
    "new": false,
    "subjecttitle": null,
    "subjectcontent": null,
    "datetime": "2017-11-20T19:55:58.000Z"
},
"1511277428": {
    "userid": "1000000000",
    "text": "hey hi",
    "new": false,
    "subjecttitle": null,
    "subjectcontent": null,
    "datetime": "2017-11-21T15:17:08.000Z"
},
"1640341426": {
    "userid": "1000000000",
    "text": "hellow how are you?",
    "new": false,
    "subjecttitle": null,
    "subjectcontent": null,
    "datetime": "2021-12-24T10:23:45.706Z"
},
"1640342296": {
    "userid": "1000000000",
    "text": "asdfasdf",
    "new": true,
    "subjecttitle": null,
    "subjectcontent": null,
    "datetime": "2021-12-24T10:38:16.089Z"
},
"1640342382": {
    "userid": "1000000000",
    "text": "fxvfv",
    "new": true,
    "subjecttitle": null,
    "subjectcontent": null,
    "datetime": "2021-12-24T10:39:41.910Z"
}

}

when I try the following I mess up the object structure changes to an array but I need to maintain the object/key structure – just change the new value to false.

    let newMessages = {}
    if (payload.length > 0) {
        payload.map((item) => {
            if (messagesData && messagesData[item.userid]) {
                newMessages = Object.keys(messagesData[item.userid].messages).map((key) => ({ ...newMessages[item.userid].messages[key], new: false }))
            }
            return true
        })

        console.dir('newMessages')
        console.dir(newMessages)

the return object is a standard array – map does that… eg: 0,1,2 keys…

How can I maintain the object structure and just change the new attr.

thx

Lets say I have a server running in America and Europe, and I run new Date().getTime() on both machines at the same time, would they both return sameish timestamp?

or could 1 be drastically different?

What affects that return, is it the time configured on the machine executing it?

MongoError: Found unexpected fields after $each in $addToSet

      await Profile.updateOne(
        { ref },
        {
          $addToSet: {
            "contact": {
              $each: [ "addr" ],
              $position: 0,
            },
          },
        }
      );

When you want to create a div with a class already applied, you can just type div.foo and VSCode will change it to be <div class="foo"></div>, but what if you want to add a class or id to an already existing element?

E.g you already have a div <div></div>, but you want to add a class called bar to it, to make it <div class="bar"></div>

Is there any way you can do this with Emmet notation, VSCode, or some other extension?

const array = [4, 16, 8, 3, 22, 5]

function isPrime(array) {
  for(let i = 0; i < array.length; i++) {
    if (array[i] % 2 === 0) {
      return false
      } else {
        return true
      }
    }

}
console.log(isPrime(array))

I want find first prime number in array and return me end program

In react-router, we cannot push the same route in useHisotry() and cause a re-render. E.g., if component App is showing on route https://localhost:3000 and I click the button Click Me!, it won’t cause a re-render:

function App() {
   const history = useHistory();
   return (
      <button onClick={() => {history.push('/')}}> Click Me! </button>
   )
}

I want to achieve similar functionality, but I am unsure about the approach or what I am missing.

My current route looks like this: https://localhost:3000/user/1

I want to go to user/2 by clicking a button.

My code looks like the below:

<Route exact path="/user/:userId" component={User} />

function User() {
   const history = useHistory();
   return (
      <button onClick={() => {history.push('/user/2')}}> Click Me! </button>
   )
}

The above code changes the route but doesn’t re-render the component. How can I fix this issue?

Thanks

I’m using Reactjs to create a dashboard site that has about 15 different data grids that update every 500ms via websockets with a large amount of data virtualized per grid (7k records). Performance seems great on multiple lower / higher end machines (tested 5 different pc’s and 1 mac) and the app also performs well in firefox safari and Edge.

My concern is that when I open Chrome’s task manager it says CPU usage is anywhere from 50 to 120; however, if I look at the windows task manager, CPU usage for chrome is only at 4-5%. It would seem that the values in the chrome task manager don’t correlate to the Windows Task Manager.

On chromes dev site at https://developer.chrome.com/docs/extensions/reference/processes/ it says “The most recent measurement of the process’s CPU usage, expressed as the percentage of a single CPU core used in total, by all of the process’s threads. This gives a value from zero to CpuInfo.numOfProcessors*100, which can exceed 100% in multi-threaded processes. Only available when receiving the object as part of a callback from onUpdated or onUpdatedWithMemory.”

Do I need to worry if chrome says my reactjs app is 50-120 CPU? What is it exactly that the chrome task manager measures in regards to CPU usage and how are these values calculated, I don’t understand the above linked text? Is there a better way to measure true CPU usage of my reactjs app?

Thank you.

I am trying to create a useState hook matching to this object:

[
   {
      "id":"",
      "name":""
   }
]

This is how my code is looking like:

  const [ galleries, setGalleries ] = useState([
    {
      id: "",
      name: ""
    }
  ])

setGalleries({...galleries, id: gallery.id, name: gallery.name})

Please write code that prints out an array of numbers containing 1 through 100 ([1,2,…,100]) and says whether the number is divisible by 4 or 7. Please use .map or .filter if possible

let array = [];
for (let i = 1; i <= 100; i++) {
array.push(i);
}

I am working on a nextjs project and using next auth for my authentication , i keep getting this error once i click on here . on the click of a button , i want it to redirect me to the sign up page , where i click my google accont . then it redirects me back to the page

Authorization Error
Error 401: deleted_client
The OAuth client was deleted.

i dont know what to do to solve it , i just want to sign my users in . I am also using firebase in conjuction with nextjs

How can I grant access to my const to be used inside a function? In this case I want to access my const catName inside my function fetchListings. I’m getting this error:

Question Updated:

ReferenceError: catName is not defined

<script context="module">

const fetchListings = async () => {

        try {
            // get reference to listings collection
            const listingsRef = collection(db, 'listings');
            // create a query to get all listings
            const q = query(
                listingsRef,
                where('type', '==', catName),
                orderBy(timestamp, 'desc'),
                limit(10)
            );
            // execute query
            const querySnap = await getDocs(q);

            let lists = [];

            querySnap.forEach((doc) => {
                console.log(doc);
            });

        } catch (error) {
            console.log(error);
        }
    };
    fetchListings();
</script>

<script>
    import { page } from '$app/stores';
    // export the const catName to the function above
    export const catName = $page.params.catName;
</script>

Hi {catName}!

Suppose this example: https://gojs.net/latest/samples/records.html

I’m trying to represent the ports of the table rows by a circle, while still being able to drag the link from the whole row.
Something like this:

But I keep getting this result when I try to move the ports to the right (it gets clipped by the panel)

Any help would be appreciated,
Thank you!

I have coded an HTML form and need to ensure that a user inputs a password in the Password field and repeats the same password in the Confirm Password field. To ensure they are equal, I have used a javascript function to make it possible. Also, I have disabled the Register button, and need to ensure it is only enabled if and only if the values entered in the two password boxes are equal. Everything works fine, however, when the values entered are equal, the button remains disabled, and a warning that the passwords do not match still remains.

Below is the HTML code:

<div class="form-group mb-3">
                <label class="label" for="password">Password</label>
              <input id="password" type="password" class="form-control" placeholder="Password" name="passcode" required>
              <span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
            <div class="form-group mb-3">
                <label class="label" for="confirmPassword">Confirm Password</label>
              <input id="confirmPassword" type="password" class="form-control passcode" placeholder="Confirm Password" name="passCode" required onkeypress="checkConfirmation()">
              <span toggle="#confirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
            <span id="notEqualPassCode"></span>

Below is the javascript code for the checkConfirmation() function:

<script type="text/javascript">
function checkConfirmation(){
    var passcode = document.getElementById("password").value;
    var confirmPasscode = document.getElementById("confirmPassword").value;
    let btnSubmit = document.querySelector(".submit");
    btnSubmit.disabled = true;

    if (passcode != confirmPasscode){
        btnSubmit.disabled = true;
        document.getElementById("notEqualPassCode").innerHTML = '<i class="fa fa-fw fa-exclamation-triangle"></i>Passwords do not match!';
    } else {
        btnSubmit.disabled = false;
        document.getElementById("notEqualPasscode").innerHTML = '';
    }
}

Please someone tell me what could be wrong.

I have data rows in multiple sections. I keep track of the start and end rows of each section in my google spreadsheet and they change dynamically as rows are inserted or deleted. I used App Script to fetch the current section X#:Y# from the spreadsheet and then run a script to sort it. This used to work perfectly, however, I recently did something that bricked it – and I cannot tell why…

Here’s an excerpt of the code:

function onEdit(){

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  var editedCell = sheet.getActiveCell();
  var columnToSortBy = 5;
  var tableRange = [];
  tableRange[0] = sheet.getRange(2,32).getValue(); //A6:K17
  tableRange[1] = sheet.getRange(3,32).getValue(); //A59:K62
  var range0 = sheet.getRange(tableRange[0]);
  var range1 = sheet.getRange(tableRange[1]);

if(editedCell.getColumn() == columnToSortBy){   


    range0.sort( { column : columnToSortBy } )
    range1.sort( { column : columnToSortBy } )

}
}

undefined variable?!
*Note: I copied the script from another StackOverflow post. It has served me well for nearly 2 months.

I tried looking at the debugger and my variables all appear as undefined. I tried manually replacing tableRange[0] with (for example) “A2:K10” and the script works fine. But as soon as I try the old way it stops working… I’m thinking this is something to do with JS as I’m totally ignorant of the language. Could you please help me?