Category: javascript

My prof provided me with the following code:

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1
alert( counter() ); // 2

I know that counter() is being called. But I don’t see any function named as counter. Could someone shred some lights?

I want to display themes ( can be image or div ) and when user selects particular theme checkmark-inside-circle svg in overlay should be displayed on top but transparent so that theme below should be visible (dummy example). Considering theme as mat-radio-button , below is code

HTML

<div class="text-container" name="themeList">
   <mat-radio-group formControlName="theme" aria-label="Select a theme" class="theme-radio-group">
       <mat-radio-button
         *ngFor="let op of themeId; let i = index"
          name="themeList"
          class="theme-radio"
          [value]="i"
          (click)="selectThemeOnClick(i)">

          <div *ngIf="i == 0; else elseBlock">Theme {{i + 1}} (Default) </div>

          <ng-template #elseBlock>Theme {{i + 1}}</ng-template>
          <div #radio [attr.id]=i class="theme-radio-div themeDiv"></div>

        </mat-radio-button>
    </mat-radio-group>
</div>

In above code getting data from array and adding theme name ( default for 1st ) and adding themeDiv with it’s ID.
Tried to display checkmark for 1st theme but was not able to do that ( [checked]=”i === 0″ inside mat-radio-button , didn’t worked )

CSS

:host ::ng-deep .mat-radio-container {
  display: none;
}

.theme-container {
  .text-container {
    .theme-radio-group {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(3, 226px);
      align-content: space-around;
      justify-content: space-between;

  .themeDiv {
    content: url('example.jpg');
    width: 226px;
    height: 142px;
  }

  .theme-radio-check-mark {
    width:24px;
    height: 24px;
    content: url('check-mark-in-circle.svg');
    opacity: 0.5;
    position:relative;
    left:100px;
    top:60px;
  }
}
 }
}

Hiding radio buttons just showing themeDiv for selection, using grid as div has to be of fixed size ( want to use flexbox , but space-between property creates problem in last row ). Checkmark has to be in middle of div. opacity also didn’t worked .

TS

public selectThemeOnClick(value) {
    this.themeValueId = value;
    const themeRadioDivArray = Array.from(document.querySelectorAll(".theme-radio-div"));
    if (themeRadioDivArray) {
      themeRadioDivArray
      .filter(element => element.classList.contains("theme-radio-check-mark"))
      .forEach((element) => {
          element.classList.remove("theme-radio-check-mark");
      });
    }
    const themeRadioDiv = document.getElementById(this.themeValueId);
    if (themeRadioDiv) {
      themeRadioDiv.classList.add("theme-radio-check-mark");
    }
  }

If clicked on theme, removing class from all other elements and adding class to that clicked theme.

I could only think of replacing div with svg content using css.

Struggling to do following :

1. Checkmark should be displayed for default theme (considering 1st one for now)
2. Display checkmark on overlay for selected theme
3. Use flexbox

quick question on reactjs. So I’m new to react and I’m trying to make a tic-tac-toe application.

Currently, this is what I have:
App.js:

import logo from './logo.svg';
import './App.css';
import { Row } from './components/Row';
import {Board} from './components/Board'

function App() {
  // App renders Row
  return (
    <div>
      <Board />
    </div>
    
  );
}

export default App;

Board.js

import React from "react";
import { ReactDOM } from "react";
import { Row } from "./Row";

export function Board() {
    return (
        <div className="Board">
            <Row />
            <Row />
            <Row />
        </div>
    )
}

Row.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Square } from './Square';

export function Row() {

    return(
        <div className='Row'>
            <Square />
            <Square />
            <Square />
        </div>
    )
}

Square.js

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

export function Square(props){
    // Square is rendered by App
    const [currLetter, changeLetter] = useState(" ");

    function toggleLetter(str) {
        if(str === " ") {return "X";}
        else if(str === "X") {return "O";}
        else if(str === "O") {return "X";}
    }

    return(
        <div >
            <button onClick={() => changeLetter(toggleLetter)} className='Square'> {currLetter} </button>
        
        </div>
               
    );
}

and it works well, but I’m wondering why it doesn’t work when I write Square.js like this:

export function Square(props){
    // Square is rendered by App
    const [currLetter, changeLetter] = useState("X");

    function toggleLetter(str) {
        if(str === "X") {changeLetter("O");}
        else if(str === "O") {changeLetter("X");}
    }

    return(
        <div >
            <button onClick={toggleLetter} className='Square'> {currLetter} </button>
        
        </div>
               
    );
}

why can’t onClick just take in toggleLetter as is? it’s a function right?

second question
this is what my css looks like:

.Board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  
  /* width: 55%;
  height: 55%; */
  margin-top: 18%;
}


.Row {
  text-align: center;
  /* position: absolute; */
  /* left: 35%;
  right: 50%;
  top: 25%;
  
  width: 25%;
  height: 25%; */

  display: flex;
  flex-direction: row;
  justify-content: center;

  
}
.Square {
  /* position: absolute; */
  
  width: 70px;
  height: 70px;
  border-color: #99ccff;
  text-align: center;
  font-size: xx-large;
  font-family: 'Courier New', Courier, monospace;
}
/* .Row {

} */

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffcccc;
}
html {
  height: 100%;
}

What I wanted to do was make sure the board is centred in body, and therefore centred on the page. As it is, it is centred on the page but then the body is moved down. When I inspect the page, the top edge of the body is moved down to the same level of the top edge of board, as opposed to the body being where it was by default and the board being in its centre. How do I fix this?

what it looks like:

how-it’s-going

I’m trying to get the routing to work correctly but whenever I click on my navbar component it does not properly go to the component that’s supposed to be rendered by the Route.

There are no errors indicated by React. Just super stuck right now.

import React from 'react';
import Navbar from './components/Navbar';
import Home from './components/Home.js';
import BlankPage from './components/BlankPage';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <>
      <Router>

      <Navbar/>

      <Routes>
        <Route path="/" component={Home}/>
        <Route path="/blankpage" component={BlankPage}/>
      </Routes>

    </Router> 
    </>
  );
}

export default App;

There is a casino website

https://www.888casino.com/live-casino/?reason=0#filters=all-roulette

When I enter one of the tables, an IFRAME opens and inside the IFRAME there is a #document

The #document does not let me select the data inside the iframe and that is where the data I need is

let mesaRoulette = false; 
    const browser = await puppeteer.launch({
        headless: false,
        userDataDir: './userData',
        args: ['--start-maximized'],
        devtools: true,
    });
    const [ page ] = await browser.pages();
    await page.setDefaultNavigationTimeout(0); 

    await page.goto('https://es.888casino.com/live-casino/?reason=0#filters=all-roulette');
    await page.waitForTimeout(10000);
    const mesas = await page.$$('#orbit-container > div > main > div > div > div > div > div.item-wrapper-box');
    for (const mesa of mesas) {
        const tituloSelector = await mesa.$('#orbit-container > div > main > div > div > div > div > div.item-wrapper-box > div > span');
        if (tituloSelector){
            const titulo = await mesa.$eval('#orbit-container > div > main > div > div > div > div > div.item-wrapper-box > div > span', el => el.innerText);
            console.log(titulo);
            if (titulo === 'Roulette'){
                // const img = await mesa.$('#orbit-container > div > main > div > div > div > div > div.item-wrapper-box > div > img');
                await mesa.click('#orbit-container > div > main > div > div > div > div > div.item-wrapper-box');
                mesaRoulette = true;
                break;
            }
        };
    }

IMAGE #Document problem selector

I’ve an array abc containing date and time. I need to convert it into time slots of 1 day with limits determined by startDate and endDate with ‘x’ containing time slots and ‘y’ containing count of occurrence in those time slots. How can I get the count of occurrences in abc as per the interval and map it correctly it as per the date intervals?

const abc = ['2021-09-05T00:53:44.953Z', '2021-08-05T05:08:10.950Z', '2022-03-05T00:53:40.951Z'];
const startDate = '2021-07-05'; 
const endDate = '2021-11-05';
const res = [{x: '2021-07-05 - 2021-08-05' , y: '1' },{x: '2021-08-05 - 2021-09-05' , y: '2' }, {x: '2021-09-05 - 2021-10-05' , y: '1' },{x: '2021-10-05 - 2021-11-05' , y: '0' }];
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I am working on an assignment where I have to draw a four point star and create a for loop to generate between 1 and 100 stars depending on the user input. Here are the instructions:

The requirements of painting stars are as follows:

• a. for loop should be used in this function.
• b. The number of stars should match the user’s input. If the user’s input is not a number or not from 1 to 100, show an alert message to ask the user to input a valid number.
• c. The center of each star is randomly located on the canvas.
• d. The color of each dot is randomly generated.
• e. The distance between the far point and the center is randomly generated between 5 and 50. The distance between the near point and the center is ¼ of the distance between far point and the center.

But mine is not working. I am not sure where the values of part d and e should be entered. I not sure if the way I created it is right. Could someone please help me here?

const ctx = document.querySelector("canvas").getContext("2d"),
  b1 = document.getElementById("b1");

b1.addEventListener("input", paintStar);

function paintStar() {
  ctx.clearRect(
    0,
    0,
    800,
    400
  );

  for (let i = 1; i <= b1.value; i++) { /*this loop is not working correctly, not multiplying according to my b1.value*/
    x = Math.floor(Math.random() * 800) + 1;
    y = Math.floor(Math.random() * 400) + 1;
    d = Math.random() * 45 + 5; /*number between 5 and 50*/
    e = d / 4; /*1/4 of size*/

    /*I created my start using rotation and one more FOR loop*/
    ctx.beginPath();
    ctx.translate(x, y); /* Here I put my X and Y to change the positions of the starts on my canvas*/
    ctx.beginPath();
    ctx.rotate((-90 * Math.PI) / 180);
    ctx.moveTo(50, 0);
    
    for (let j = 1; j <= 4; j++) {
      ctx.rotate((45 * Math.PI) / 180);
      ctx.lineTo(20, 0); /*I tried to put D and E here in Lineto, but did not work out*/
      ctx.rotate((45 * Math.PI) / 180);
      ctx.lineTo(50, 0);
    }

    ctx.fillStyle =
      "rgb(" +
      Math.floor(Math.random() * 256) +
      "," +
      Math.floor(Math.random() * 256) +
      "," +
      Math.floor(Math.random() * 256) +
      ")";
    ctx.fill();
  }
}

<input id="b1" type="number" placeholder="b1"/>
<canvas width="800" height="400"></canvas>

Hi currently making a website for a client using the getaway theme. But when I resize my browser to a mobile phone and open the menu it opens and then closes really quickly. I have added in the following code into the theme repo:

jQuery(document).ready(function($) {
   $('.x-nav .menu-item a').off('click');
   $('.x-nav .menu-item a').click(function() {
      return true;

This unfortunately did not work.
the link to the website is leisurely.in any help is greatly appreciated.

note: I have a renderer, scene, camera but I didn’t include the code because I think it’s unnecessary but if you have to look at it I will edit the post

  import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
    import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';

      let loader = new THREE.GLTFLoader();
    loader.load('assets/trash/scene.gltf', function ( gltf ) {
      scene.add(gltf.scene);
    });

Twine Version: 2.3.16
Story Format: Sugarcube 2.36.1

So I’m trying to make a gallery that the player can scroll through. I’ve already set up the pictures and everything, but right now, I’m trying to make it so when the page is turned, the pictures on the first page disappear, and the second page appears. To that end, I made it so when the variable for the page number, gPN = 1, the second page of pictures has the class Hidden, which sets their opacity to 0. Alternatively, when gPN = 2, the Hidden class is removed, and added to the images from the first page. Here is the code.

if (!window.PC){
  window.PC = {};
}
PC.PageSwitch = function (dir) {
        var image1 = document.getElementsByClassName("galimg1")
        var image2 = document.getElementsByClassName("galimg2")
        if (dir === 1) {
                variables().gPN - 1
        }
        else if (dir === 2) {
                variables().gPN + 1
        }
        if (variables().gPN <= 0) {
                variables().gPN = 1
        }
        //Page Class Modifiers
        if (variables().gPN === 2) {
                image1.classList.add('Hidden');
                image2.classList.remove('Hidden');
        }
        else if (variables().gPN === 1) {
                image1.classList.remove('Hidden');
                image2.classList.add('Hidden');
        }
};

My issue is that when I press the next button, I get the following error.

Error: Cannot read properties of undefined (reading 'remove')

I checked to make sure everything was kosher, in case something had mismatching capitalization, but everything is matching. I don’t know how to fix this.

Chart.js is a popular library for making charts, and it can make all kinds of charts, but it can’t make a Gantt Chart/Timeline. I’m trying to hack chart.js 3, but the documentation isn’t great and I’m getting really frustrated. How do you make a Gantt Chart Timeline with chart.js 3?

I am trying to make an automatic carousel using the data from an API. I won’t know how many elements there are to display as that will depend on the search from the user. I have so far managed to create a page which flicks through the information every 5 seconds, but is there a way to create an effect which shows the old data sliding to one side while the new data slides from the other side?

Here’s my code:

document.querySelector('button').addEventListener('click', findDrink)

let counter = 0

function findDrink() {

  let drinkName = document.querySelector('input').value;

  fetch(`https://thecocktaildb.com/api/json/v1/1/search.php?s=${drinkName}`)
    .then(data => data.json())
    .then(item => {
      document.querySelector('h2').innerText = item.drinks[counter].strDrink;
      document.querySelector('img').src = item.drinks[counter].strDrinkThumb;
      document.querySelector('h3').innerText = item.drinks[counter].strInstructions;

      let length = item.drinks.length
      if (counter > length - 2) {
        counter = 0;
      } else {
        counter += 1
      }
    })
}
setInterval(findDrink, 5000)

I want to put a fake highlight on selected text in a textarea after the textarea loses focus. I have explored a few options. The cleanest so far is cloning the textarea to div and wrapping selection with span. But that still has some quirks and doesn’t handle some edge cases. I have also tested a couple of jQuery libraries like this, but not as clean as I want. Is there any other clean way?

I want to reload data to a combo box (I’m using a rad combo box) in a asp.net repeater control which is in An update panel using jquery or javascript. I’m getting the required data from a web method and converting it to an object array like [id:1, name:john]. The attribute for id is ‘DataValueField’ and text is ‘DataTextField’. Is there a way I can do this in jquery ?

I have been trying to integrate PayPal in my e-commerce project. It works fine in Paypal button but I have problems in making the transaction complete.

After clicking “Pay Now” in the sandbox, the money goes through but the transaction in my database was not completed.

Here’s my checkout.html file:

{% extends 'store/main.html' %}
{% load static %}
{% block content %}
     <div class="row">
        <div class="col-lg-6">
            <div class="box-element" id="form-wrapper">
                <form id="form">
                    <div id="user-info">
                        <div class="form-field">
                            <input required class="form-control" type="text" name="name" placeholder="Name..">
                        </div>
                        <div class="form-field">
                            <input required class="form-control" type="email" name="email" placeholder="Email..">
                        </div>
                    </div>
                    
                    <div id="shipping-info">
                        <hr>
                        <p>Shipping Information:</p>
                        <hr>
                        <div class="form-field">
                            <input class="form-control" type="text" name="address" placeholder="Address..">
                        </div>
                        <div class="form-field">
                            <input class="form-control" type="text" name="city" placeholder="City..">
                        </div>
                        <div class="form-field">
                            <input class="form-control" type="text" name="state" placeholder="State..">
                        </div>
                        <div class="form-field">
                            <input class="form-control" type="text" name="zip" placeholder="zip code..">
                        </div>
                    </div>

                    <hr>
                    <input id="form-button" class="btn btn-success btn-block" type="submit" value="Continue">
                </form>
            </div>

            <br>
            <div class="box-element hidden" id="payment-info">
                <small>Paypal Options</small>

                <div id="paypal-button-container"></div>
            </div>
            
        </div>

        <div class="col-lg-6">
            <div class="box-element">
                <a  class="btn btn-outline-dark" href="{% url 'cart' %}">&#x2190; Back to Cart</a>
                <hr>
                <h3>Order Summary</h3>
                <hr>
                {% for item in items %}
                    <div class="cart-row">
                        <div style="flex:2"><img class="row-image" src="{{item.product.imageURL}}"></div>
                        <div style="flex:2"><p>{{item.product.name}}</p></div>
                        <div style="flex:1"><p>₱{{item.product.price|floatformat:2}}</p></div>
                        <div style="flex:1"><p>x{{item.quantity}}</p></div>
                    </div>
                {% endfor %}
                <h5>Items:   {{order.get_cart_items}}</h5>
                <h5>Total:   ₱{{order.get_cart_total|floatformat:2}}</h5>
            </div>
        </div>
    </div>


<script src="https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD"></script>

<script>
    var total = '{{order.get_cart_total}}'
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        style:{
            //color: 'blue',
            shape: 'rect',
        },

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: parseFloat(total).toFixed(2)
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                submitFormData()
            });
        }


    }).render('#paypal-button-container');
</script>

<script type="text/javascript">
    var shipping = '{{order.shipping}}'
    var user = '{{request.user.is_authenticated}}'
    

    if(shipping == 'False'){
        document.getElementById('shipping-info').innerHTML = ''
    }

    if (user != "False"){
        document.getElementById('user-info').innerHTML = ''
    }

    if (shipping == 'False' && user != "False"){
        //Hide entire form if user is logged in and shipping is false
        document.getElementById('form-wrapper').classList.add('hidden');
        //Show payment if logged in user wants to buy an item that does not require shipping
        document.getElementById('payment-info').classList.remove('hidden');
    }

    var form = document.getElementById('form')
    
    form.addEventListener('submit', function(e){
        e.preventDefault()
        console.log('Form Submitted...')
        document.getElementById('form-button').classList.add("hidden");
        document.getElementById('payment-info').classList.remove("hidden");
    })

    /*document.getElementById('make-payment').addEventListener('click', function(e){
        submitFormData()
    })
    */

    function submitFormData(){
        console.log('Payment button clicked')

        var userFormData = {
            'name':null,
            'email':null,
            'total':total,
        }

        var shippingInfo = {
            'address':null,
            'city':null,
            'state':null,
            'zip':null,
        }

        if (shipping != 'False'){
            shippingInfo.address = form.address.value
            shippingInfo.city = form.city.value
            shippingInfo.state = form.state.value
            shippingInfo.zip = form.zip.value
        }

        if (user != 'True'){
            userFormData.name = form.name.value
            userFormData.email = form.email.value
        }

        var url = '/process_order/'
        fetch(url,{
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
            },
            body:JSON.stringify({'form':userFormData, 'shipping':shippingInfo})
        })

        .then((response) => response.json())
        .then((data) => {
            console.log('Success:', data);
            alert('Transaction Completed');

            cart ={}
            document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"

            window.location.href = "{% url 'store' %}"
        })
         
    }

</script>

{% endblock content %}

The error was in my console. This is the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at submitFormData (http://127.0.0.1:8000/checkout/:207:36)
    at http://127.0.0.1:8000/checkout/:140:5
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:15659)
    at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:14716)
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:16040)
    at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:14716)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:15526
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:15659)
    at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:14716)
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:16040)

Error: Cannot read properties of undefined (reading 'value')
    at Pr.error (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:71786)
    at Object.<anonymous> (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80160)
    at JSON.parse (<anonymous>)
    at Ir.o (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80019)
    at Ir (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80172)
    at Yr.u.on (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84738)
    at Yr (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84858)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:91179
    at Function.e.try (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:18264)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:90976

Error: Cannot read properties of undefined (reading 'value')
    at Pr.error (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:71786)
    at Array.<anonymous> (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80160)
    at JSON.parse (<anonymous>)
    at Ir.o (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80019)
    at Ir (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80172)
    at Yr.u.on (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84738)
    at Yr (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84858)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:91179
    at Function.e.try (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:18264)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:90976

It was saying that there’s an error in my submitFormData() or JavaScript. But I cannot find what is the problem.