Category: javascript

I am just started to learn JS on Freecode and doing that task Use Recursion to Create a Range of Numbers).
The function should return an array of integers which begins with a number represented by the startNum parameter and ends with a number represented by the endNum parameter. The starting number will always be less than or equal to the ending number. Your function must use recursion by calling itself and not use loops of any kind. It should also work for cases where both startNum and endNum are the same.

My solution is on below

let myVal = [];
function rangeOfNumbers(startNum, endNum) {
  if (startNum <= endNum) {
    myVal.push(startNum);
    startNum++;
    rangeOfNumbers(startNum, endNum);
  }

  return myVal;
}

rangeOfNumbers(2, 5);

Normally it should work well but I do not know why it is not acceptable.

I’m trying to exit the process after the unit jest testing is finished,
at the same time, I’m setting a token value from the first test to authorize all the other tests
all tests passed except the login in one
and still, the jest process is still running on the terminal.
that’s the first test where I set the token after the test

 test("should respond with a 200 status code", async (done) => {
  response = await request(app)
    .post("/login")
    .send({
      email: "[email protected]",
      password: "testtest",
    })
    .expect(200);
  token = response.header.token;

  done();
});

The goal is to quit the process after the async process on jest

Goal

Avoid unnecessary event bindings.

Sample code

Comment box with a reply button for each individual comment

const btns = document.getElementsByClassName('reply-btn');

for (let i = 0; i < btns.length; i++) {    
  btns[i].addEventListener('click', showCommentContentAsPreview);
}


function showCommentContentAsPreview(e) {
  console.log('showCommentContentAsPreview()');
  
  // CHECK IF THIS BUTTON ALREADY BINDED !!!
  const previewDiv = document.getElementById('preview');
  const commentId = e.target.getAttribute('data-comment-id')
  const commentDiv = document.getElementById('comment-' + commentId);
  const commentText = commentDiv.querySelector('p').innerText
  const closeReplyBtn = previewDiv.querySelector('button');
  const previewContent  = previewDiv.querySelector('.preview-content');
  
  // set to preview
  previewContent.innerText = commentText;
  
  // show reply close button  
  closeReplyBtn.classList.remove('hidden');
  
  // bind EventListener to "reply close button"
  closeReplyBtn.addEventListener('click', closeReply)
  
  function closeReply() {
    console.log('bind to btn');
    previewContent.innerText = '';
    this.removeEventListener('click', closeReply);
    closeReplyBtn.classList.add('hidden');
  }
}

.hidden {
  display: none;
}

.comment {
  border-bottom: 1px solid #000;
  padding: 5px;
}


.preview {
  background-color: #ccc;
  padding: 20px;
  margin-top: 20px;
}

<div>
  <!-- comment list -->
  <div id="comment-1" class="comment">
    <p>Comment Content 1</p>
    <button class="reply-btn" data-comment-id="1">reply</button>
  </div>
  
  <div id="comment-2"  class="comment">
    <p>Comment Content 2</p>
    <button  class="reply-btn" data-comment-id="2">reply</button>
  </div>  
</div>

<!-- output -->
<div>
  <div id="preview" class="preview">
    <div class="preview-content"></div>
    <button class="hidden">Close Preview</button>
  </div>
</div>

Simulate problem

When you try the example, the following two scenarios occur:

1. Click reply once and then click “close preview”

2. Click on reply several times and then on “close preview”.

Question

How can I avoid multiple bindings to the same button? I am already thinking about singleton.

How can I format this date to a simple one? I am using date-fns as in my react project

2021-12-26T00:00:00.000000Z

I’m making an ecommrece project, in search bar I’m displaying checkboxes with categories from the API, all of those have value active == true by default. This is how I’m mapping them:

{categories.map((category) => {
       return (
              <>
             <input type="checkbox" onClick={() => handleCheckbox(category)} 
             defaultChecked={category.active} key={category.name} />
             <label style={{marginLeft:"5px"}} htmlFor={category.name}>{category.name}</label><br/>
             </> 
)
})}

Then I run this function to change category.active property from true to false, when the exact checkbox is clicked, then I want to update this object using useState

const handleCheckbox = (category) => {
    let tempCategory = category
    if (tempCategory.active == true) {
        tempCategory.active = false;
    } else {
        tempCategory.active = true;
    }
    setCategories({...categories, [tempCategory.id]: tempCategory})
    console.log(category.active)
}

Unfortunetly when I click on the checkbox I’m getting an error from React:

TypeError: categories.map is not a function

And it points to categories.map, I have no idea how to fix it. All I want is to update specific object in the categories array.

I’m learning socketIO and I set up and running a basic nodejs server . My problem is that when I try to connect to the server with my nextJS app nothing happens. No errors occur and the messages I want to be printed on connection do not appear .

My code :

server.js in backend folder

const express = require('express');
const app = express();
const server = require('http').Server(app);
const { v4: uuidV4 } = require('uuid');
const cors = require('cors');

const io = require('socket.io')(server, {
  cors: true,
  origins:["http://localhost:3000"]
});



app.use(cors());
app.options('*', cors());



io.on('connection', socket => {
  socket.on('test',()=>{
   console.log(' i am a test') //does not appear 
  })
  
})





   //I ALSO TRIED 
   //io.on('test',()=>{
       //console.log('I am a test');
     //})


server.listen(5000);

Then in my nextJS app in my frontend folder in index.js

import {useEffect} from 'react';
import io from 'socket.io-client';

const ENDPOINT = "http://localhost:5000";
const socket = io.connect(ENDPOINT);

  export default function Home() {

    useEffect(()=>{

     socket.emit('test');
    },[]);
    
   ...rest of code 
   
 }

So in my frontend app I emit the ‘test’ event to the server and the server did not console.log the response on connection

I would appreciate your help as I am new to socketIO

Hey guys I’m trying to multiply 2 numbers that are smaller than 1000 and bigger than 0 and i want alert messages to pop up if the numbers are bigger than a thousand or not a number. The problem is that the alert message shows up every time I click the button.. any tips?

function buttonAction5() {

  var z = document.getElementById("number1").value;
  var y = document.getElementById("number2").value;
  
  if (z< 1000 || y < 1000 && z > 0|| y > 0); {
    document.getElementById("result5").innerHTML = y * z;
    
  }
  if  (isNaN(y || z)){
    alert("Please write a number between 1-1000"); 
  }
  
  else (z || y > 1000 && z || y < 0);{
    alert("Please write a number between 1-1000");
   
  }

  } 

I’m trying to retrieve data from an Api.
When I log the response data, everything looks fine. When i load my component I get ‘undefined’ on each place where I should have data from the Api. When I press on my sidebar, every ‘undefined’ turns into the right data. I think that I encounter some problem with the asynchronous behaviour of my calls but I don’t realy know how to solve this problem.

For information : I’m using ReactJs

function Dashboard() {
  const [isLoading, setIsLoading] = useState(true);
  const [loadedDataFromApi, setLoadedDataFromApi] = useState([]);

  //some other vars
 
  useEffect(() => {
    setIsLoading(true);
    fetch(`https://soccer.sportmonks.com/api/v2.0/fixtures/between/${todayString}/${inTenDaysString}?api_token=oAF3XOevLeC24Zjuzvu56vfOfvyrmHSd11eHr4Ij6ifeJq563NzHeKFrLaJy`
    )
      .then((response => {
        return response.json();
      }))
      .then((response => {

        //FOREACH to loop over every {} in the []
        response.data.forEach((data) => {

          var localTeam = data.localteam_id;
          var visitorTeam = data.visitorteam_id;

          var docRef1 = db.collection("Teams").doc(`${localTeam}`)
          var docRef2 = db.collection("Teams").doc(`${visitorTeam}`)

          docRef1.get().then((doc) => {
            if (doc.exists) {
              data.localTeam = doc.data().name;
              data.logoLocalTeam = doc.data().logo;
            } else {
              // doc.data() will be undefined in this case
              console.log("No such Team found!");
            }
          }).catch((error) => {
            console.log("Error getting document:", error);
          });

          docRef2.get().then((doc) => {
            if (doc.exists) {
              data.visitorTeam = doc.data().name;
              data.logoVisitorTeam = doc.data().logo;
            } else {
              // doc.data() will be undefined in this case
              console.log("No such Team found!");
            }
          }).catch((error) => {
            console.log("Error getting document:", error);
          });
        })

        setLoadedDataFromApi(response.data);
        setIsLoading(false);

      }))

  }, [todayString, inTenDaysString])

  // if we are loading the data return loading .. 
  if (isLoading) {
    return (
      <section>
        <p>Loading ...</p>
      </section>)
  }

  return (
  // some code ) 

Is it possible to convert an living component instance back to template?

Currently I am working on a form-making website with element-ui and VueJS. I have finish the <preview /> component. It will present the editing result to the user, and now I need to export the whole result form as VueJS template.

Since the result form is simply made up of a whole bunch of element-ui‘s form input components, like <el-input>, <el-button>. it might be possible to convert them back to template. But soonly I realized it is not as simple as I throught. I tried doing this by treversing the virtual dom tree, but ended up discorvering that Vue.js doesn’t offer public vnode treversing API. there is an instance attribute named $vnode, but it is the the placeholder node for the component in parent’s render tree, according to the source code comment. Besides, it’s children property is undefined. that means I cannot access the children vnodes, thus become impossible to treverse the virtual DOM tree. Another way is use the private property _vnode, it is feasible way though, but the property is private and I’d rather not touch it, unless I have no other ways.

Another problem I realized later, is that the vdom tree doesn’t keep the informations about v-if. One the current true branch will remains in the virtual DOM tree, and I cannot withdraw other false/invisible tags from the vdom tree.

So it looks treversing the DOM tree cannot convert an instance back to template (or maybe I am wrong). Is it some other ways that can accomplish my goal?

I have some issue about “ERR_ACCESS_DENIED”, I deploy a website server, and there is a upload file function，but recently it doesn’t work, I checked the chrome console, in Network tab, it shows “(failed)net::ERR_ACCESS_DENIED”, I don’t known why because I do not change my code recently, and the request didn’t arrive my background program which is a java web process(debug breakpoint), even the nginx, so what’s ths meaning of “ERR_ACCESS_DENIED”, Does this have anything to do with the chrome version? please give me some help

I have a problem with making my function smarter. I achieve good results, but I think about the other solution.

I can take boolean or object as parameter. When the parameter is the object I’d like to keep it as now. When the parameter is a boolean value, I’d like to create an object, where keys are taken from another variable (less important) and values are this boolean.

My solution assumes

• adding an empty items object at the beginning
• reading what is a value type and setting items according to the conditions
• taking items and converting to an array
• saving the array in state

Is that OK?

Check my code

const onAddAll = value => {
        let items = {}

        if (typeof value === 'boolean') {
            terms.forEach(term => items[ term ] = value)
        }

        if (typeof value === 'object') {
            items = value
        }

        const checked = Object.keys(items).filter(k => items[ k ])
        setChecked(checked)
    }

Imo, I wouldn’t need the second condition and make it smarter, bot no idea how. Please help!

At one stage this textfield was working fine but now every time it is selected it just loses focus immediately, so I am unable to input any text.

      <InputField
        fullWidth
        placeholder="enter text"
        value={text}
        onChange={(e) => setText(e.value)}
        onFocus={undefined}
      />

This causes loss of focus:

const InputField = ({ onChange, onFocus, ...textFieldProps }) => {
  if (onFocus) {
    return (
      <TextField
        onChange={(event) => onChange(event.target.value)}
        onFocus={(event) => onFocus(event.currentTarget)}
        {...textFieldProps}
      />
    );
  } else {
    return (
      <TextField
        onChange={(event) => onChange(event.target.value)}
        {...textFieldProps}
      />
    );
  }
};

Without the conditional it works fine:

const InputField = ({ onChange, onFocus, ...textFieldProps }) => {
    return (
      <TextField
        onChange={(event) => onChange(event.target.value)}
        {...textFieldProps}
      />
    );
};

I have a webapp with multiple forms and inside these forms multiple custom made components: input, textarea, selectbox, datepicker, radiobutton, checkbox, … .

I found out that the submit function is fired when pressing the enter key inside a child component of a form tag. Something I don’t want. I want to be able to use the enter key for other things like conforming a selection in a dropdown.

Form example

<template>
    <form @submit.prevent="handleLogin">
        <fieldset :disabled="isSubmitting" class="space-y-6">
            <Input :label="$tc('email', 1)" type="email" id="email" v-model="user.email" :error="errors.email" />
            <Input :label="$tc('password', 1)" type="password" id="password" v-model="user.password" :error="errors.password" />
            <Select :label="$tc('role', 1)" id="role" :options="roles" displayProperty="display_name" valueProperty="id" v-model="user.role" :error="errors.role" />
            <SubmitButton :label="$tc('register', 1)" :submittingLabel="$tc('register_loader', 1)" :isSubmitting="isSubmitting" />
        </fieldset>
    </form>
</template>

SubmitButton.vue

<button type="submit">{{ isSubmitting ? submittingLabel : label }}</button>

Therefore I’m looking for a way to prevent the default behaviour. Adding a keydown function and checking if the enter key is being pressed inside all the custom components followed by an event.preventDefault() didn’t do the trick.

A working solution should be to change the type of the button from ‘submit’ to ‘button’ and use an @click but that doesn’t sound like semantic html.

Any other suggestions?

the error log

eclare namespace google.maps {
~~~~~~~
Conflicts are in this file.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:130:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchorPoint’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

130 anchorPoint?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4265:5
4265 anchorPoint?: google.maps.Point|null;
~~~~~~~~~~~
‘anchorPoint’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:135:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘animation’ must be of type ‘Animation | null | undefined’, but here has type ‘Animation | undefined’.

135 animation?: Animation;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4269:5
4269 animation?: google.maps.Animation|null;
~~~~~~~~~
‘animation’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:141:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘clickable’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

141 clickable?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4274:5
4274 clickable?: boolean|null;
~~~~~~~~~
‘clickable’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:147:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘crossOnDrag’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

147 crossOnDrag?: boolean;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4284:5
4284 crossOnDrag?: boolean|null;
~~~~~~~~~~~
‘crossOnDrag’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:154:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘cursor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

154 cursor?: string;
~~~~~~

node_modules/@types/google.maps/index.d.ts:4288:5
4288 cursor?: string|null;
~~~~~~
‘cursor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:160:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘draggable’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

160 draggable?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4293:5
4293 draggable?: boolean|null;
~~~~~~~~~
‘draggable’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:167:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘icon’ must be of type ‘string | Icon | Symbol | null | undefined’, but here has type ‘string | Icon | Symbol | undefined’.

167 icon?: string | Icon | google.maps.Symbol;
~~~~

node_modules/@types/google.maps/index.d.ts:4298:5
4298 icon?: string|null|google.maps.Icon|google.maps.Symbol;
~~~~
‘icon’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:173:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘label’ must be of type ‘string | MarkerLabel | null | undefined’, but here has type ‘string | MarkerLabel | undefined’.

173 label?: string | MarkerLabel;
~~~~~

node_modules/@types/google.maps/index.d.ts:4308:5
4308 label?: string|null|google.maps.MarkerLabel;
~~~~~
‘label’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:178:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘map’ must be of type ‘Map | StreetViewPanorama | null | undefined’, but here has type ‘Map | StreetViewPanorama | undefined’.

178 map?: Map | StreetViewPanorama;
~~~

node_modules/@types/google.maps/index.d.ts:4314:5
4314 map?: google.maps.Map|null|google.maps.StreetViewPanorama;
~~~
‘map’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:184:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘opacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

184 opacity?: number;
~~~~~~~

node_modules/@types/google.maps/index.d.ts:4318:5
4318 opacity?: number|null;
~~~~~~~
‘opacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:192:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘optimized’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

192 optimized?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4326:5
4326 optimized?: boolean|null;
~~~~~~~~~
‘optimized’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:198:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘position’ must be of type ‘LatLng | LatLngLiteral | null | undefined’, but here has type ‘LatLng | LatLngLiteral | undefined’.

198 position?: LatLng | LatLngLiteral;
~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4333:5
4333 position?: google.maps.LatLng|null|google.maps.LatLngLiteral;
~~~~~~~~
‘position’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:203:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘shape’ must be of type ‘MarkerShape | null | undefined’, but here has type ‘MarkerShape | undefined’.

203 shape?: MarkerShape;
~~~~~

node_modules/@types/google.maps/index.d.ts:4337:5
4337 shape?: google.maps.MarkerShape|null;
~~~~~
‘shape’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:209:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘title’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

209 title?: string;
~~~~~

node_modules/@types/google.maps/index.d.ts:4344:5
4344 title?: string|null;
~~~~~
‘title’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:215:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘visible’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

215 visible?: boolean;
~~~~~~~

node_modules/@types/google.maps/index.d.ts:4348:5
4348 visible?: boolean|null;
~~~~~~~
‘visible’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:224:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘zIndex’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

224 zIndex?: number;
~~~~~~

node_modules/@types/google.maps/index.d.ts:4356:5
4356 zIndex?: number|null;
~~~~~~
‘zIndex’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:276:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchor’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

276 anchor?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:2388:5
2388 anchor?: google.maps.Point|null;
~~~~~~
‘anchor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:283:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘labelOrigin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

283 labelOrigin?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:2394:5
2394 labelOrigin?: google.maps.Point|null;
~~~~~~~~~~~
‘labelOrigin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:289:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘origin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

289 origin?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:2399:5
2399 origin?: google.maps.Point|null;
~~~~~~
‘origin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:295:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘scaledSize’ must be of type ‘Size | null | undefined’, but here has type ‘Size | undefined’.

295 scaledSize?: Size;
~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:2404:5
2404 scaledSize?: google.maps.Size|null;
~~~~~~~~~~
‘scaledSize’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:302:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘size’ must be of type ‘Size | null | undefined’, but here has type ‘Size | undefined’.

302 size?: Size;
~~~~

node_modules/@types/google.maps/index.d.ts:2410:5
2410 size?: google.maps.Size|null;
~~~~
‘size’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:438:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchor’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

438 anchor?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:5866:5
5866 anchor?: google.maps.Point|null;
~~~~~~
‘anchor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:446:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘fillColor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

446 fillColor?: string;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5873:5
5873 fillColor?: string|null;
~~~~~~~~~
‘fillColor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:452:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘fillOpacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

452 fillOpacity?: number;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5877:5
5877 fillOpacity?: number|null;
~~~~~~~~~~~
‘fillOpacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:461:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘labelOrigin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

461 labelOrigin?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5884:5
5884 labelOrigin?: google.maps.Point|null;
~~~~~~~~~~~
‘labelOrigin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:477:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘rotation’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

477 rotation?: number;
~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5898:5
5898 rotation?: number|null;
~~~~~~~~
‘rotation’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:486:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘scale’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

486 scale?: number;
~~~~~

node_modules/@types/google.maps/index.d.ts:5906:5
5906 scale?: number|null;
~~~~~
‘scale’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:493:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeColor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

493 strokeColor?: string;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5913:5
5913 strokeColor?: string|null;
~~~~~~~~~~~
‘strokeColor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:500:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeOpacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

500 strokeOpacity?: number;
~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5919:5
5919 strokeOpacity?: number|null;
~~~~~~~~~~~~~
‘strokeOpacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:505:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeWeight’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

505 strokeWeight?: number;
~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5924:5
5924 strokeWeight?: number|null;
~~~~~~~~~~~~
‘strokeWeight’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:6:11 – error TS2300: Duplicate identifier ‘MaxZoomService’.

6 class MaxZoomService {
~~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4415:9
4415 class MaxZoomService {
~~~~~~~~~~~~~~
‘MaxZoomService’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:52:10 – error TS2300: Duplicate identifier ‘MaxZoomResult’.

52 type MaxZoomResult = MaxZoomResultError | MaxZoomResultOk;
~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4397:13
4397 interface MaxZoomResult {
~~~~~~~~~~~~~
‘MaxZoomResult’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:65:9 – error TS2300: Duplicate identifier ‘ERROR’.

65 ERROR = ‘ERROR’,
~~~~~

**

package.json

**
},
“private”: true,
“dependencies”: {
“@angular/animations”: “~12.2.0”,
“@angular/cdk”: “^12.2.11”,
“@angular/common”: “~12.2.0”,
“@angular/compiler”: “~12.2.0”,
“@angular/core”: “~12.2.0”,
“@angular/forms”: “~12.2.0”,
“@angular/google-maps”: “^13.0.2”,
“@angular/localize”: “~12.2.0”,
“@angular/material”: “^12.2.11”,
“@angular/platform-browser”: “~12.2.0”,
“@angular/platform-browser-dynamic”: “~12.2.0”,
“@angular/router”: “~12.2.0”,
“@craco/craco”: “^6.3.0”,
“@ng-bootstrap/ng-bootstrap”: “^10.0.0”,
“@swimlane/ngx-datatable”: “^20.0.0”,
“@types/core-js”: “^0.9.39”,
“angular-paginator”: “^7.0.0”,
“bootstrap”: “^5.1.3”,
“ng-bootstrap-table”: “0.0.17”,
“ngx-bootstrap”: “^7.1.0”,
“rxjs”: “~6.6.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^12.2.11”,
“@angular/cli”: “~12.2.11”,
“@angular/compiler-cli”: “~12.2.0”,
“@fortawesome/fontawesome-free”: “^5.15.4”,
“@types/googlemaps”: “^3.39.12”,
“@types/jasmine”: “~3.8.0”,
“@types/node”: “^12.11.1”,
“jasmine-core”: “~3.8.0”,
“karma”: “~6.3.0”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage”: “~2.0.3”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “~1.7.0”,
“tailwindcss”: “^2.2.17”,
“typescript”: “~4.3.5”
}
tsConig
“baseUrl”: “./”,
“outDir”: “./dist/out-tsc”,
“forceConsistentCasingInFileNames”: true,
“strict”: true,
“noImplicitReturns”: true,
“noFallthroughCasesInSwitch”: true,
“sourceMap”: true,
“declaration”: false,
“downlevelIteration”: true,
“experimentalDecorators”: true,
“moduleResolution”: “node”,
“importHelpers”: true,
“target”: “es2017”,
“module”: “es2020”,
“lib”: [
“es2018”,
“dom”
]
},
“angularCompilerOptions”: {
“enableI18nLegacyMessageIdFormat”: false,
“strictInjectionParameters”: true,
“strictInputAccessModifiers”: true,
“strictTemplates”: true
}

<div  style="height: 200px; width: max-content;">

  <google-map></google-map>
</div>

enter image description here

I’d like to inquire.
I created a page with a product list.
If you press the “Inquiry” button at the top, the inquiry form comes down, and there is a product list check box in it.

In the list of products outside, click the “Add to Inquiry” button in the list to check the check box of the inquiry form.
At this time, I want to release the checkbox check by pressing the “Add to Inquiry” button again. It functions like “Toggle”.

https://thepagegallery49.cafe24.com/wp/publication/

The code I used is as follows.

List ‘Inquire Button’

                <div class="news-text-box">
                <span class="addbtn" id="<?php the_sub_field('pbtag'); ?>"><span class="addon active">Add in Inquire</span><span class="addoff">Added</span></span>             </div>

Javascript

    document.getElementById("<?php the_sub_field('pbtag'); ?>").addEventListener("click", () => {
    document.querySelector('input[value="<?php the_sub_field('pbtitle'); ?>"]').checked = true;
    document.querySelector('input[value="<?php the_sub_field('pbtitle'); ?>"]').parentElement.classList.toggle('active');
})

Checkbox

<ul id="wpforms-187-field_28">
<li class="choice-1 depth-1"><input type="checkbox" id="wpforms-187-field_28_1" name="wpforms[fields][28][]" value="Matters of Life and Death"><label class="wpforms-field-label-inline" for="wpforms-187-field_28_1">Matters of Life and Death</label></li>
<li class="choice-2 depth-1 active"><input type="checkbox" id="wpforms-187-field_28_2" name="wpforms[fields][28][]" value="Displacements"><label class="wpforms-field-label-inline" for="wpforms-187-field_28_2">Displacements</label></li>
...
</ul>