Category: javascript

I am working on an Android app and I am trying to get the login function to work, when a user logins a request should be sent to the backend for it to authenticate the information provided and send back a response, looking at the stack trace the code goes through most of the authentication for the account that it checks the user name, password, and account status but the code always crashes and I get this error and it shuts down the SBT that was running.

enter image description here

tack trace of error

enter image description here.

I have built an HTML form. My task now is to include a Javascript file and write a function to check whether the person is at least 16 years old. How can I do that?

    Name:
    

    <label for="birthdate">Birthdate:</label>
    <input type="date" id="birthdate" name="birthdate" required>

    <input type="submit" value="Submit">
</form>

I don’t know how to implement this

I am working on a hook that keeps track of the maximum depth a user scrolls down a page.
I would like to make use of this value inside the useEffect’s cleanup function so that I may log the value when the component is unmounted.

The hook appears to be working, but the implementation inside the Home component is not. It either logs continuously while scrolling if I populate the dependency array, or it logs a single 0 when the component unmounts.

I would like for it to log the single correct value when the component unmounts.

Thanks.

import { useEffect, useRef } from 'react';

export const useTrackScrollDepth = () => {
  const scrollDepthRef = useRef(0);

  const trackScrollDepth = () => {
    const scrolledValue = window.scrollY;

    scrollDepthRef.current = Math.max(scrolledValue, scrollDepthRef.current);
  };

  useEffect(() => {
    const handleScrollTracking = () => {
      trackScrollDepth();
    };

    document.addEventListener('scroll', handleScrollTracking);

    return () => {
      document.removeEventListener('scroll', handleScrollTracking);
    };
  }, []);

  return scrollDepthRef.current;
};

Then in my component, I make use of the hook as so:

import React, { useEffect } from 'react';

import { useTrackScrollDepth } from 'hooks/useTrackScrollDepth';

export function Home() {
  
  const maxScrollDepth = useTrackScrollDepth();

  useEffect(
    () => () => {
      console.log(`Max scroll depth: ${maxScrollDepth}`);
    },
    [],
  );

  return (
    <div>Home placeholder</div>
  );
}

I need compile custom vue js script and render it on page

Example:

let js = `"Hello, please choose your variant:<br /> <pool :id='144'>"`
const component = Vue.compile(js)

After (for example):

<div class="user-post">
<component :is="component" />
</div>

How i can implement this with vue?

I am trying to call 2 different .then() on the same Sequelize promise.
I do not need to chain the then(), I just want to call 2 different effects when the promise is resolved.

The first then() is called just after creating the promise, in the same function which is creating it.
The second one is called on the promise object after it has been returned to the main code.

Here is my main code :

const Status = require('../controllers/status.controller');

// The dataArray comes from somewhere else in the code and is OK
command = Status.save(dataArray);

console.log(command + ' display 1');

command.then(
     queryResult => {

         console.log(queryResult + ' display 2');

         if(typeof queryResult.command !== 'undefined') {
             console.log(queryResult.command.command);
         }
     });

And the called save() function in ‘../controllers/status.controller’ :

exports.save = (dataArray) => {
    
    var b = B.findOne({
        include: [{
            model: Command
        }],
        where: {
            bId: dataArray[0]
        }
    }).then(
        queryResult => { 

            console.log(queryResult + ' display async');

            status.create({
                bId: queryResult.id,
            });
            queryResult.update({
                lastStatus: dataArray[3],
            });
         }
    );

    console.log(b + ' display 0');
    return b;
}

In both case (display 0 and 1), I got the Sequelize promise.

Problem : in the second then() called from the main code, the query result is null, when it’s the right Sequelize instance in the first one.
I was expecting both to be the same result (“display 2” vs “display async”).

I added console logs in the code to display infos on the objects are different steps, here is the result :

[object Promise] display 0
[object Promise] display 1
[object SequelizeInstance:b] display async
undefined display 2

TypeError: Cannot read properties of undefined (reading 'command')

I thought it was possible to launch multiple asynchronous then() on the same promise object if we do not to chained them.
What am I missing in this code ?

I am new to CSS transitions, can someone show me how to transition between changes of the innerHTML value in javascript?

HTML:

<h1>Discover <span id="txt">Scams</span></h1>

JS:

var txt = document.querySelector("#txt")
var txts = ["Rugpulls", "Vulnerabilities", "Scams"]

var i = 2
setInterval(()=> {
    i==2? i=0 : i++
    txt.innerHTML = txts[i]
}, 3000)

CSS:

#txt {
    transition: content 1s;
}

Javascript changes the text every 3 seconds using setInterval(), and currently it just changes without any transition, I need it to fade in and out.

Thanks in advance.

I am a beginner and I need to do something very simple. I have various js arrays (businesses, motels, etc.) I have a constant arr whose value is a string which is the name of one of the arrays. I want to make a gallery out of the array whose name is the value of arr. How do I call the value of arr and use it as the name of the array I want to access?

I have done a lot of searches and cannot find a description of how to do this.

Left side you can the the wicks are pretty thin. On the right side which I’m building they are pretty thick(https://i.stack.imgur.com/c6QeI.jpg)

I would like to make candle stick wicks very thin but they look twice as thick.

// WICK
    // set line stroke and line width
    context.strokeStyle = 'red';
    context.lineWidth = 0;

    // draw a red line
    context.beginPath();
    context.moveTo(this.date + 3, 13);
    context.lineTo(this.date + 3, 50.);
    context.stroke();
    context.closePath()

That’s what I’ve written so for the wick. Do I need to setup my canvas differently or draw the wicks in a different way?

I want to know that is it possible that we define a SRC in Audio Object (html5) that user can not access to it directly and just working in player?

I thought about an “extra token” or “hashing” but not sure that Audio Object accept such things.
In fact I want to prevent download managers from opening popup window for desktop users

with the best

I’m using a test site to build a Cypress E2E test framework.

I’m unable to type inside of an iFrame text area.

Here’s the actual iFrame:
https://the-internet.herokuapp.com/iframe

I’m able to start a new document by clicking the file menu with the following line:

    static startNewDocument() {
        cy.get('[type="button"]').contains('File').click();
        return cy.get('[role="menuitem"]').contains('New document').click();
    };

But I’m not able to type inside of the iFrame with the following:

    static getTextArea() {
        return cy.get('iframe[id="mce_0_ifr"]');
    };
    
    iFrame.getTextArea().type('test jjhjhjhjhjhjhjh');

Here’s a screenshot from the debug console that shows no error. The test passes but it’s not actually inserting the text I’m typing.

I’m trying to make a function that clears the input value by the new text I type after a 2-second delay.

At first it worked, but now for some reason, it just replaces the value of the input by the first letter of the word I typed before the delay.

Sometimes it removes the containers below the input as well.

Here is the code if you want to try for yourself :

https://codepen.io/Hautzii/pen/gOEWqjV

input.addEventListener('input', (e) => {
  if (inputPause) { e.target.value = e.target.value.charAt(0); inputPause = false;}
  if (timeOut) clearTimeout(timeOut)
  timeOut = setTimeout(() => { inputPause = true }, 2000)
})

The code I am using is:

<script>
  function findOccurrences (string)
{
    var elements = document.getElementsByTagName ('*');
    var foundCount = 0;

    for (var i = 0, il = elements.length; i < il; i++) {
        if (!elements[i].textContent || !elements[i].textContent.match (string)) {
            continue;
        }

            foundCount++;
        }

   return + foundCount;
 }
</script>

In the page itself I am using:

    <strong><strong>text here (</strong></strong>
      <span id="anm_tot" class="wysiwyg-font-size-normal">&nbsp;</span>
      <strong>) </strong>
    <script>
        var countElement = document.getElementById ('anm_tot');
        countElement.textContent = findOccurrences ('¤');
    </script>

In the page itself, I have hidden that character for counting.

(Found as code suggested by another stackoverflow user)

That is the other ‘complication’ is that all has to work on a ZenDesk Knowledge Base page. As well, I used to be better at this but post a stroke and cancer, there are holes in my knowledge.

It does count but the count is incorrect – it should be the same count as a Command-F (sorry working on a mac) but it returns 12 and the command-F returns 5.

I need an exact count. This is not an optimal solution but the only one that I have been able to get to work even to this point. I have tried other options such as counting LI elements but I need the count to appear as part of the knowledge base page I am editing and I have not been able to get that count to appear on the page itself.

I’m looking for a couple of different ways to access the data below, using ES6 and/or lodash.

What I’m trying to do is to return the parent object, where device_id matches.

i.e, for each item in entities, if in any of the nested objects, the device_id field = abc, return the whole array item

const entities = [
    {
        "<unknown key>": {
            "entity_id": "something",
            "device_id": "abc"
        },
        "<unknown key>": {
            "entity_id": "else",
            "device_id": "abc"
        },
    },
    {
        "<unknown key>": {
            "entity_id": "hello",
            "device_id": "xyz"
        },
        "<unknown key>": {
            "entity_id": "world",
            "device_id": "xyz"
        }
    }
]

<div id="ball" style="
  z-index:5;
  position:absolute;
  left:0px;
  top:200px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:black"></div>

<script>

var velocity = 100;
var positionX = 0;
var ball = document.getElementById('ball');
let reverse = false



if (reverse = true){
  function moveBall(){
  positionX = positionX + velocity;
  ball.style.left = (positionX + 'px')}
}

if (reverse = false){
  function moveBall(){
  positionX = positionX - velocity;
  ball.style.left = (positionX + 'px')}
}



var Xmin = 0;
var Xmax = 300;

if (ball.style.left = Xmax){
  reverse = true
}
if (ball.style.left = Xmin){
  reverse = false
}
setInterval(moveBall, 100)

</script>

The ball should movefrom left to right, then reverse. With the edges between Xmin and Xmax.

This the instructions I have.

Define a global variable called reverse and set its value to false. This variable is a boolean (can either be true or false) and it will help you define which direction the ball should move in.
The reverse variable will change value every time the ball hits the edge of a defined area on the screen.
The area is defined by the variables Xmin and Xmax.
Inside the moveBall() function, add logic to set the ball position on the x-axis based on the value of reverse:
When reverse is false, the ball moves from left to right (ball position + velocity.)
When reverse is true, the ball moves from left to right (ball position – velocity.)
After that, inside the moveBall() function, add logic to compare the variable positionX, Xmin and Xmax.
if the ball position (positionX) is greater than Xmax or equals Xmin, then the value of reverse should be switched.

I completed the ball moving from left to right. However, I’m stuck trying to reverse it.

I am creating an SVG element dynamically using JS and I also set the viewBox attribute to this element. When I run the code in the browser’s developer tools for the first time, the viewBox attribute is saved as viewbox, which causes SVG elements to not be displayed on the page. When I edit the HTML code using developer tools and save it, only then the attribute of all SVG elements changes from viewbox to viewBox and the elements are displayed. Why does this happen in this case and how can you avoid it?

let svg = document.createElement("svg"),
g = document.createElement("g"),
path = document.createElement("path");
svg.style.display = "inline-block";
svg.style.stroke = "rgb(141, 145, 145)";
svg.style.strokeWidth = "2px";
svg.style.width = "20px";
svg.style.height = "20px";
svg.style.fill = "none";
svg.style.cursor = "pointer";
g.style.transform = "translate(7px, 7px)";
svg.setAttribute("viewBox", "0 0 24 24");
path.setAttribute("d","M 1 1 L 19 19 M 19 1 L 1 19");

<svg class="i9i2ocl9j89a0-m7nh2km56ijd0-7di80k634e5i0-a0lfjpa9j3490-gl66f0364dlf0-35f2847f9l1n0-iff54pl7kgbf0-194ip1lg3d70-3nb73fk63l5g" viewbox="0 0 24 24" style="display: inline-block; stroke: rgb(141, 145, 145); stroke-width: 2px; width: 20px; height: 20px; fill: none; cursor: pointer;"><g class="1njc5co3mh4k0-coa8b8dgak90-njkc501mel1e" style="transform: translate(7px, 7px);"><path d="M 1 1 L 19 19 M 19 1 L 1 19"></path></g></svg>