Category: javascript

I recieve response from database:

records [
  Record {
    keys: [ 'nodes', 'rels' ],
    length: 2,
    _fields: [ [Array], [Array] ],
    _fieldLookup: { nodes: 0, rels: 1 }
  }
]

And i`m trying to get data from ‘_fields’ array in my typescript app:

result.records[0]._fields[0]

but got an error like: ‘Property ‘_fields’ is private and only accessible within class ‘Record<Entries, Key, FieldLookup>’.’
I have no access to class Record<> because i recieve this data from another backend. In js file i have no any errors and mapping data from this array with forEach() method or map(). Searching this problem desicion, i got advices to change access modifier from private to public, but i have no access to this class. How can i avoid such error in typescript?

Here is my code –

async getItemById(idParam: string): Promise<any>  {
    return await lastValueFrom<any>(this.http.get('http://localhost:3000/api/item?id=' + idParam).pipe(take(1)))
}

How should i implement ‘catch’ block in this or ‘handle response’ before forwarding it to subscriber?

So, when a message comes from socket io, when I say to play the audio, it is outputting the following message

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

This is my code:

useEffect(() => {
    const handleNewOrder = () => {
      audio.play()
    };

    socketMe?.on("all_orders", handleNewOrder);

    return () => socketMe?.off("all_orders", handleNewOrder);
  }, [socketMe]);

I fix the problem with hasUserInteracted below, but my code then only emits a sound when I click the button:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const  = useState(new Audio('your-audio-file.mp3')); // Preload audio
  const [hasUserInteracted, setHasUserInteracted] = useState(false);
  const [pendingEventData, setPendingEventData] = useState(null);

  useEffect(() => {
    const handleNewOrder = (data) => {
      if (hasUserInteracted) {
        audio.play(); // Play audio immediately if user interacted
      } else {
        setPendingEventData(data); // Store event data for later
      }
    };

    socketMe?.on("all_orders", handleNewOrder);

    return () => socketMe?.off("all_orders", handleNewOrder);
  }, [socketMe, hasUserInteracted, audio]);

  const handleUserInteraction = () => {
    setHasUserInteracted(true);
    if (pendingEventData) {
      audio.play(); // Play audio if pending event data exists
      setPendingEventData(null); // Clear pending data
    }
  };

  return (
    <div>
      <button onClick={handleUserInteraction}>Click to Enable Sounds</button>
    </div>
  );
}

**I need it to sound when a new message (i.e. order) arrives, not when a button is pressed. Can anyone help with this problem?
**

1. I am working on implementing a drag-and-drop feature in a Tiptap editor, similar to the WordPress block editor. My goal is to show a border underline beneath the node where a draggable component (a custom toolbar’s drag handle) is currently hovered, giving users a clear indication of where the node will be placed when they release the drag handle.

   I have successfully implemented the basic drag-and-drop functionality where I can move content around. However, I am struggling to add the visual feedback during the drag operation. Specifically, I want to dynamically apply a CSS class to underline the node that is directly beneath the cursor or drag handle.

   Here is the relevant part of my React component that handles the drag events:

   import React, { createContext, useContext, useState, useEffect } from 'react';
   
   import Draggable from 'react-draggable';
   
   import { Extension } from "@tiptap/core";
   import { Decoration, DecorationSet } from '@tiptap/pm/view';
   import { Plugin, PluginKey } from '@tiptap/pm/state';
   
   export const DragHandle = ({ editor }) => {
   
     const moveNode = (editor, fromPos, toPos) => {
       const { tr } = editor.view.state;
       const node = editor.view.state.doc.nodeAt(fromPos);
   
       if (node) {
         tr.delete(fromPos, fromPos + node.nodeSize); // Delete the node from its current position
         tr.insert(toPos, node); // Insert the node at the new position
         editor.view.dispatch(tr); // Dispatch the transaction to update the editor state
       }
     };
   
     const [currentDecoration, setCurrentDecoration] = useState(null);
   
     const updateDecoration = (pos) => {
     console.log("Updating decoration at pos:", pos);
     const { doc } = editor.state;
     const resolvedPos = doc.resolve(pos);
     console.log("Resolved position:", resolvedPos);
   
     const node = resolvedPos.nodeAfter;
     if (node) {
       const startPos = resolvedPos.before(); // Get the position before the node starts
       const endPos = startPos + node.nodeSize;
       console.log("Node start:", startPos, "Node end:", endPos);
   
       const decorations = DecorationSet.create(doc, [
         Decoration.node(startPos, endPos, { class: 'hovered' })
       ]);
   
       console.log("Decorations to apply:", decorations);
       editor.commands.updateHoverFocusDecorations(decorations);
       setCurrentDecoration(decorations);
     } else if (currentDecoration) {
       console.log("Clearing decorations because no node is found at the position");
       editor.commands.updateHoverFocusDecorations(DecorationSet.empty);
       setCurrentDecoration(null);
     }
   };
   
   
     const handleDragStart = (event, data) => {
       const pos = editor.view.posAtCoords({ left: data.x, top: data.y });
       if (pos) {
         updateDecoration(pos.pos);
       }
     };
   
     const handleDrag = (event, data) => {
       const pos = editor.view.posAtCoords({ left: data.x, top: data.y });
       if (pos) {
         console.log("Drag at position:", pos.pos);
         updateDecoration(pos.pos);
       }
     };
   
   
     const handleDragStop = () => {
       if (currentDecoration) {
         editor.commandons.updateHoverFocusDecorations(DecorationSet.empty);
         setCurrentDecoration(null);
       }
     };
   
     // const handleDragStop = (event, data) => {
   
     //   const { clientX, clientY } = event;
     //   const dropPosition = editor.view.posAtCoords({ left: clientX, top: clientY });
   
     //   console.log('HJHJ', dropPosition)
   
     //   if (dropPosition) {
     //     // moveNode(editor, please, dropPosition.pos) // Please is the position of the node that was dragged start
     //   }
   
     //   console.log('Drag stopped at:', data.x, data.y);
   
     //   if (!editor) return;
     //   editor.commands.updateHoverFocusDecorations(DecorationSet.empty);
   
     // };
   
     return (
       <Draggable
         onStart={handleDragStart}
         onDrag={handleDrag}
         onStop={handleDragStop}
       >
         <div className='blah' style={{ zIndex: 999 }}>
           <div className='drag-handle' />
         </div>
       </Draggable>
     )
   
   }
   
   export const DragHandleExtension = Extension.create({
     name: 'Hovered',
   
     addOptions() {
       return {
         className: 'hovered',  // The CSS class to apply
       };
     },
   
     addProseMirrorPlugins() {
       return [
         new Plugin({
           key: new PluginKey('Hovered'),
           state: {
             init: () => DecorationSet.empty,
             apply: (tr, oldState) => {
               const decorations = tr.getMeta('Hovered');
               if (decorations) {
                 return decorations;
               }
               return oldState.map(tr.mapping, tr.doc); // Map old decorations to the new document
             },
           },
           props: {
             decorations(state) {
               return this.getState(state);
             }
           }
         })
       ];
     },
   
     addCommands() {
       return {
         updateHoverFocusDecorations: (decorations) => ({ tr, dispatch }) => {
           dispatch(tr.setMeta('Hovered', decorations));
           return true;
         },
       };
     } 
   });
   

Problem:
While the drag operations are detected, the decorations are not being applied as expected. The underline does not appear beneath the hovered node.

Attempts:

• I confirmed the positions calculated are correct and that the updateDecoration function is being called with the correct parameters.
• I verified that the DecorationSet.create method is used properly to apply the decorations.
• I ensured that the CSS class for .hovered is correctly defined to show an border bottom underline.

Can anyone spot what might be going wrong, or suggest an alternative approach to achieve the desired visual feedback during the drag-and-drop operations in Tiptap?

I have been facing an issue with my online store code I am building with react and redux.
In localhost sometimes redux reducers not working and sometimes they work and send the API based on the code.
In vercel or in my own web hosting, the code of redux is not working and it’s returning of undefined reducers, i have no idea if it’s something caused by thunk or combineReducers but same code I was using in past and it worked perfect.

I want to share the code here.

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { save, load, clear } from "redux-localstorage-simple";
import { composeWithDevTools } from "redux-devtools-extension";
import { thunk } from "redux-thunk";
import rootReducer from "./redux/reducers/rootReducer";

const store = createStore(
  rootReducer,
  load(),
  composeWithDevTools(applyMiddleware(thunk, save()))
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

rootReducer.js

import productReducer from "./productReducer";
import brandReducer from "./brandReducer";
import categoryReducer from "./categoryReducer";
import { combineReducers } from "redux";
import { createMultilanguageReducer } from "redux-multilanguage";

const rootReducer = combineReducers({
  multilanguage: createMultilanguageReducer({ currentLanguageCode: "he" }),
  productData: productReducer,
  brandsData: brandReducer,
  categoryData: categoryReducer,
});

export default rootReducer;

productActions.js

import ProductService from "../services/productService";

export const GET_PRODUCTS_SUCCESS = "GET_PRODUCTS_SUCCESS";
export const GET_PRODUCTS_FAILED = "GET_PRODUCTS_FAILED";

export const getProducts = () => {
  return async (dispatch) => {
    await ProductService.getAllProducts()
      .then((res) => {
        dispatch({
          type: GET_PRODUCTS_SUCCESS,
          payload: res,
        });
      })
      .catch((err) => {
        dispatch({
          type: GET_PRODUCTS_FAILED,
          payload: err,
        });
      });
  };
};

productReducer.js

import {
  GET_PRODUCTS_SUCCESS,

} from "../actions/productActions";

const initState = {
  products: [],
  allProducts: [],
};

const productReducer = (state = initState, action) => {
  if (action.type === GET_PRODUCTS_SUCCESS) {
    return {
      ...state,
      allProducts: action.payload,
    };
  } 
  return state;
};

export default productReducer;

package.json

{
  "name": "onlinestore-front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@cloudinary/url-gen": "^1.12.0",
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@material-tailwind/react": "^2.1.9",
    "@pathofdev/react-tag-input": "^1.0.7",
    "@react-icons/all-files": "^4.1.0",
    "@reduxjs/toolkit": "^2.2.3",
    "@tailwindcss/forms": "^0.5.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@tinymce/tinymce-react": "^4.3.0",
    "@windmill/react-ui": "^0.6.0",
    "axios": "^1.5.1",
    "bootstrap": "^5.3.2",
    "cheerio": "^1.0.0-rc.12",
    "daisyui": "^4.4.10",
    "draft-convert": "^2.1.13",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "framer-motion": "^11.1.7",
    "hamburger-react": "^2.5.0",
    "html-react-parser": "^4.2.9",
    "html-to-jsx": "^0.0.4",
    "i18next": "^23.6.0",
    "i18next-browser-languagedetector": "^7.1.0",
    "i18next-http-backend": "^2.3.0",
    "interweave": "^13.1.0",
    "js-cookie": "^3.0.5",
    "lodash": "^4.17.21",
    "pure-react-carousel": "^1.30.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.47.0",
    "react-html-parser": "^2.0.2",
    "react-i18next": "^13.3.1",
    "react-icons": "^4.11.0",
    "react-image-file-resizer": "^0.4.8",
    "react-multi-carousel": "^2.8.5",
    "react-phone-number-input": "^3.3.7",
    "react-redux": "^9.1.1",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "5.3.0",
    "react-scripts": "5.0.1",
    "react-textra": "^0.2.0",
    "react-toastify": "^9.1.3",
    "react-use": "^17.5.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-localstorage-simple": "^2.5.1",
    "redux-multilanguage": "^0.1.2",
    "redux-thunk": "^3.1.0",
    "suneditor": "^2.45.1",
    "suneditor-react": "^3.6.1",
    "tailwindcss": "^3.3.3",
    "tw-elements-react": "^1.0.0-alpha2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.3.3"
  }
}

I tried downgrading packages such as thunk and exporting it as default but it did not work and the issue still exists

While working on pdf forms on formio portal. While exploring, I came across the data source component and found out an interesting feature – Trigger on form init.
A crucial usecase of this trigger is – When form.io pdf form loads in edit mode, form.io’s framework handles pre-population of submitted data. And the js written in the data-source component gets executed after data pre-populations is finished.

Now here is my scenario –

1. I m using a hidden field instead of data source for some reason.
2. For this hidden fields there is some associated js code that needs to be executed only when formio pdf form is opened in edit mode.
3. The complicated part is this js must be executed after formio has handled pre-population for submitted form’s data, when loading form in edit mode.
4. I figured out that this feature of formio data source components – Trigger on form init serves the purpose, but due to some restrictions I cannot use it.

So is there a clean way, I can implement this form.io’s Trigger on form init functionality using vanilla js ?

I have tried all the methods to scroll, nothing works for this one app that I am working on. Same scroll methods work on other sample application that I tried.

Also, the scroll only doesn’t work on the bottomsheet.

Can anyone tell me what could be the reason?

I have already tried,

1. await $(‘android=new UiScrollable(new UiSelector().scrollable(true)).scrollToEnd(5)’)
2. await driver.performActions([
   {
   type: ‘pointer’,
   id: ‘finger1’,
   parameters: { pointerType: ‘touch’ },
   actions: [
   { type: ‘pointerMove’, duration: 0, x: 333, y: 333 },
   { type: ‘pointerDown’, button: 0 },
   { type: ‘pause’, duration: 100 },
   { type: ‘pointerMove’, duration: 1000, origin: ‘pointer’, x: 2544, y: 2544 },
   { type: ‘pointerUp’, button: 0 },
   ],
   },
   ])
3. await this.dashboradScreen.touchAction([
   ‘press’,
   { action: ‘moveTo’, element: this.overviewTitle },
   ‘release’
   ]);

So I’m a new developer and I’ve encountered this problem while i do eslint –init it doesn’t show the option “To check syntax, find problems, and enforce code style”screenshot

I’ve disabled prettier just in case but didn’t work

When I use consolelog on my array there are 2 duplicates of it, ones empty and ones with the objects that get pushed, when I refresh the page (I use localStorage to save the array) the array has an exact copy. Here’s the code:

let projectArray = [];

const saveProjectArray = JSON.parse(localStorage.getItem("projectList"));
projectArray = saveProjectArray;

allTask.addEventListener('click', (e) => {
    saveProjectArray.forEach(element => {
        console.log(`Name: ${element.name}`);
    });
});

function Project(name, id){
    this.name = name;
    this.id = id;
}

function makeProject(projectName){

    const newProjectObj = new Project(projectName, getId);

    //Code
    
    projectArray.push(newProjectObj);

    localStorage.setItem('projectList', JSON.stringify(projectArray));
}

I’ve tried deleting the localstorage lines but still the issue persists.

In the pursuit to learn React in dept, I am trying to understand how does React creating a component element. “Under the hood” it is using the createElement() method, and all of the “children” like html elemnts and attributes, are treated as props.
I wanted to read more about it and for example How it differs from Javascript createElement(), but on their docs page I see that is a part of the Legacy API. React Legacy APIs

These APIs will be removed in a future major version of React.

Does that mean they don’t use this method anymore, or won’t use this method alongside other APIs in the list? Or does this mean it is not recommended to use createElement() method in our app as a method of choice?

I have read the React documentation and googled, but I haven’t found an answer regarding the method in the context of my question.

I have the following server side route code for stream

movies_list = ['./mov1.mp4', './mov2.mp4', './mov3.mp4',]

@app.route("/video", methods=["GET"])
def video():
    headers = request.headers
    if not "range" in headers:
        return current_app.response_class(status=400)

    video_path = os.path.abspath(os.path.join("media", movies_list[0]))
    size = os.stat(video_path)
    size = size.st_size

    chunk_size = (10 ** 6) * 3 #1000kb makes 1mb * 3 = 3mb (this is based on your choice)
    start = int(re.sub("D", "", headers["range"]))
    end = min(start + chunk_size, size - 1)

    content_lenght = end - start + 1

    def get_chunk(video_path, start, chunk_size):
        with open(video_path, "rb") as f:
            f.seek(start)
            chunk = f.read(chunk_size)
        return chunk

    headers = {
        "Content-Range": f"bytes {start}-{end}/{size}",
        "Accept-Ranges": "bytes",
        "Content-Length": content_lenght,
        "Content-Type": "video/mp4",
    }

    return current_app.response_class(get_chunk(video_path, start,chunk_size), 206, headers)

Also client side html page

<video width="720" controls>
  <source src="/video" type="video/mp4">
</video>

How can I send a request from the client side to the server so that it changes the source and starts playing?

I’m trying to render PDFs stored in Firebase Storage on my website hosted on Firebase Hosting. I’m using webpack to bundle my main files (not the module’s one) and NodeJS.

When i run the website with VS Code Live Server, all is working perfectly. But when i deploy on Firebase Hosting, the render div does not show anything. Even if the module tools icons appear in the div navbar, the module is not able to load and render the pdf file due to this error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

Here is the content of the file that caused the issue:

export { default as DOMLocalization } from "./dom_localization.js";
export { default as Localization } from "./localization.js";

To render a pdf, my main js file (which had access to Firebase) retrieve the download link of that pdf and save it in the browser local storage. Then, I modified a pdfjs module file (app_options.js) to retrieve the link from local storage and load it as the defaultUrl. Here is the modified part:

if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("MOZCENTRAL")) {
  defaultOptions.defaultUrl = {
    /** @type {string} */
    value:
      typeof PDFJSDev !== "undefined" && PDFJSDev.test("CHROME")
        ? ""
        : localStorage.getItem("copyPdfUrl"),
    kind: OptionKind.VIEWER,
  };

I’ve done some research but i found nothing. I just understand that it’s a server-side issue or a problem caused by the module syntax. So, i need your help pls!

How the fix that issue ? Is there another way to render a pdf on a web page easily and access to basic annotation tools (pen, circle, line…) ?

I am struggling to use Ajax so I tried to just use Javascript without it. I want to create a button switch on a banner so I can change the style of the page between 2 css files already created. I had already a form in another php file so I can chose the style and then submit it so it can change the style in all the plugin. I am thinking about getting the option with a post

This is my form :

/**
 * Class used to manage the display of the content of the settings
 */
class WoosterPartnerSettings
{
    /**
     * Hook to display the contents of the 'Settings' menu if the license is valid
     */
    public function __construct()
    {
        if (get_option('partner_license') && get_option('partner_license') != '') {
            add_action('tab_content_settings', array($this, 'wooster_partner_settings'));
            add_action('admin_init', array($this, 'display_style'));
            add_action('admin_enqueue_scripts', array($this, 'enqueue_style'));
        }
    }

    /**
     * Allows you to display the form to choose the style sheet to display
     *
     * @return void
     */
    public function wooster_partner_settings()
    {
?>
        <div class="wrap">
            <h1><?php echo __('Réglages Wooster', 'wooster-partner'); ?></h1>
            <hr class="line">

            <form method="post" action="options.php">
                <?php settings_fields('wooster-settings-group'); ?>
                <?php do_settings_sections('wooster-settings-group'); ?>

                <p class="parag"><?php echo __('Le plugin Compagnon propose deux styles d’affichage :', 'wooster-partner'); ?></p>

                <label for="style_wordpress">
                    <input type="radio" id="style_wordpress" name="wooster_style" value="compagnon-wp.css" <?php checked(get_option('wooster_style'), 'compagnon-wp.css'); ?>>
                    <?php echo __('Style WordPress', 'wooster-partner'); ?>
                </label>

                <label for="style_wooster">
                    <input type="radio" id="style_wooster" name="wooster_style" value="compagnon-wooster.css" <?php checked(get_option('wooster_style'), 'compagnon-wooster.css'); ?>>
                    <?php echo __('Style Wooster', 'wooster-partner'); ?>
                </label><br>

                <input type="submit" class="wooster-button" value="<?php echo __('Enregistrer les modifications', 'wooster-partner') ?>">
            </form>
        </div>
<?php
    }


    /**
     * Registers the setting for the Wooster plugin style
     *
     * @return void
     */
    public function display_style()
    {
        register_setting('wooster-settings-group', 'wooster_style');
    }

    /**
     * Enqueues the selected style for Wooster plugin settings page
     *
     * @return void
     */
    public function enqueue_style()
    {
        if (is_admin()) {
            if (isset($_GET['page']) && strpos($_GET['page'], 'wooster') === 0) {
                $selected_style = get_option('wooster_style', 'compagnon-wp.css'); // default style
                wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
            }
        }
    }
    }
new WoosterPartnerSettings();

and this is my banner I created so it can be in all the plugin :

if (!class_exists('WoosterBanner')) {
    class WoosterBanner
    {
        public function __construct()
        {
            if (isset($_GET['page']) && in_array($_GET['page'], ['wooster','wooster-followup','wooster-licences','wooster-compagnon','wooster-customers','wooster-partner','wooster-settings','wooster-setup']) && is_admin()) {
                add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
                add_action('in_admin_header', array($this, 'wooster_header_section'));
                 add_action('wp_ajax_switch_css', array($this, 'switch_css')); // request when the user is logged in
            }
        }

        public function wooster_header_section() {
            ?>
            <div id="top-bar-banner">
            <div class="wooster-banner">
            <div class="logo">
                <img src="<?php echo plugins_url('assets/img/logo.avif', __DIR__); ?>" alt="Logo">
            </div>
            <div class="actions">
                <form method="post" action="options.php" id="form">
            <?php settings_fields('wooster-settings-group'); ?>
            <button type="button" id="wooster-exchange-button" class="button">
                <i class="fas fa-exchange-alt"></i>
            </button>
        </form>
        <a href="#" class="button"><i class="fas fa-question-circle"></i></a>
    </div>
</div>
</div>
</div>
<?php
        }



        public function switch_css() {

            // Check the request
            $style = isset($_POST['style']) ? $_POST['style'] : '';
            // style is the id of the selected style in the html and the button
            if ($style === 'wooster-custom-style-css') {
                //set cookie to remember the selected style
                setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
                echo plugins_url('assets/css/compagnon-wooster.css', __FILE__);
            } elseif ($style === 'csspartner-css') {
                //set cookie to remember the selected style
                setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
                echo plugins_url('assets/css/compagnon-wp.css', __FILE__);
            }

            // Don't forget to exit at the end of the function
            exit;
        }

        public function enqueue_styles() {
            // Register necessary styles and scripts
            wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
            wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');

            wp_enqueue_script('jquery'); // Js library
            wp_enqueue_script('wooster-banner', plugins_url('assets/js/banner.js', __DIR__), array('jquery'), null, true);


        }
    }
    new WoosterBanner();

}

    var currentStyle = 'style_wordpress'; // Définissez le style par défaut ici

    document.getElementById("wooster-exchange-button").addEventListener("click", function() {
        var style1 = document.getElementById('style_wordpress');
        var style2 = document.getElementById('style_wooster');

        if (currentStyle === 'style_wordpress') {
            style1.disabled = true;
            style2.disabled = false;
            currentStyle = 'style_wooster';
        } else {
            style1.disabled = false;
            style2.disabled = true;
            currentStyle = 'style_wordpress';
        }
    });
});
 ``

I have a laravel project with create.blade.php file:

<input id="testButton" type="submit" value="test"/>

and a javascript api.js file:

$(document).ready(function() {
    $("testButton").click(function(){
        alert("button pressed"):
    });
});

How do i make a button from HTML execute the JS code?

So far i have tried replacing JS code with this:

$("testButton").click(function(){
    alert("button pressed");
});

or this:

$(document).on("click","testButton",function(){
    alert("button pressed");
});

but it did nothing.

Replacing <input> to <button> and changing type= from submit to button also did nothing.

can i decode websocket message in developer tools with vanilla js??

this is the code for example :

(function(send) {
    WebSocket.prototype.send = function(data) {
        if (data instanceof Uint8Array) {
            console.log("WebSocket sent Uint8Array:", data);
        }
        return send.apply(this, arguments);
    };
})(WebSocket.prototype.send);

this is the console log :

WebSocket sent Uint8Array: 
Uint8Array(18) [0, 65, 105, 0, 0, 0, 26, 1, 0, 0, 24, 1, 52, 1, 93, 165, 121, 62, buffer: ArrayBuffer(32), byteLength: 18, byteOffset: 0, length: 18, Symbol(Symbol.toStringTag): 'Uint8Array']
bootstrap-c245bc32c3.js:1 

WebSocket sent Uint8Array: 
Uint8Array(7) [0, 70, 58, 26, 0, 1, 0, buffer: ArrayBuffer(32), byteLength: 7, byteOffset: 0, length: 7, Symbol(Symbol.toStringTag): 'Uint8Array']

is it possible to decode the message websocket with vanilla javascript?