This dropdown button has no onclick event for expanding. Couldn’t figure out how to expand it via keyboard shortcut [duplicate]

How can I expand this dropdown via keyboard shortcut?

https://imgur.com/a/AFU1ad6 console v1

https://imgur.com/a/phk01OI console v2

https://imgur.com/a/OLFSYDo This button’s onclick is also null.

// ==UserScript==
// @name         TEST CLAUDE: share chat v2
// @match        https://claude.ai/*
// ==/UserScript==

(function() {
    'use strict'

    document.addEventListener('keydown', function(event) {
        let BTN = document.querySelector(".right-3\.5") // DROPDOWN ARROW
        if (BTN) {
            console.log("success: found button");
            BTN.click() // Can't do this. "Uncaught TypeError: BTN.click is not a function" because onclick is null
        } else {
            console.log("error: not found button");
        }
    })
})()

unable to open a doPostBack javascript link- Help please

I need to pay my electric bill and sometimes CFE (Mexican electric company) glitches out so I can’t view past or current pdfs. When I click the link it gives me this javascript address but won’t open. Not sure if it’s possible to get any help but figured I’d give it a shot!

javascript:__doPostBack(‘ctl00$MainContent$gvFacturasUsuario$ctl03$lnkDescargaPDF’,”)

I have attempted opening in various browsers and on different devices to no avail. I really don’t know what I’m doing to be honest.

How can I securely hide my API key in front-end JavaScript? [duplicate]

I’m working on a project using JavaScript for the front end, and I need to use an API key to access a third-party service. However, I understand that including the API key directly in the front-end code (e.g., in a JavaScript file) is insecure because it can be exposed to anyone who inspects the source code.
I’ve researched some solutions like using environment variables, but I can’t figure out how to implement this securely in the context of a front-end application.
Here are my questions:

  • What are the best practices for securing an API key in a front-end application?
  • Are there any examples of how to handle this?
  • Is there a way to hide the API key completely, or is that only possible on the server side?

Thanks in advance for your help!

Import JS function from another file doesnt work

im doing a little project for my own to my portfolio. Im a beginner programmer and i have a problem with import function js from another file. This function is necessary because i need this to use in another logic of my code. These two files are in the same folder named scripts. Scripts are added to index.html before the body closing tag with defer attibute.

ProductsDb.mjs:

import axios from "axios";

const productsDb = process.env.DB_BASE_URL;
let products;

export const fetchProducts = async () => {
  const productsDb = process.env.DB_BASE_URL;
  try {
    const res = await axios.get(productsDb);
    products = res.data;
    //console.log("value of products:", products);
    return products;
  } catch (err) {
    console.err("Error fetching products: ", err);
    throw err;
  }
};
const createProductCart = async () => {
  await fetchProducts();
  const shopList = document.querySelector(".shop-list");
  shopList.innerHTML = "";
  console.log(products);

  products.forEach((element) => {
    const shoppingCart = document.createElement("li");
    shoppingCart.classList.add("shop-list-item");

    let imgURL = `http://127.0.0.1:3000${element.image}`;
    shoppingCart.innerHTML = `
        <a href="#">
          <img class="item-image" height="320px" width="320px" src="${imgURL}" alt="${element.name}" />
          <div class="shop-list-info">
            <p>${element.category}</p>
            <h3>${element.name}</h3>
          </div>
        </a>
        <button class="openCartModal" data-id="${element.id}">Wybierz opcje</button>
      `;

    shopList.appendChild(shoppingCart);
  });
  return;
};

document.addEventListener("DOMContentLoaded", async () => {
  try {
    createProductCart();
  } catch (err) {
    console.error("Error", err);
  }
});

modal.mjs:

import { fetchProducts } from "./productsDb.mjs";

// Open quick shopping modal window
const shopList = document.querySelector(".shop-list");
shopList.addEventListener("click", function (ev) {
  const modal = document.querySelector("[modalOpen]");
  const modalClose = document.querySelector("[modalClose]");

  if (ev.target.closest(".openCartModal")) {
    openModal(modal, modalClose);
  }
});

function openModal(modal, modalClose) {
  modal.classList.toggle("isHidden");

  function close() {
    modal.classList.toggle("isHidden");
    document.removeEventListener("keydown", keyClose);
    modal.removeEventListener("click", clickOutClose);
    modalClose.removeEventListener("click", close);
  }

  function keyClose(ev) {
    if (ev.key === "Escape" && !modal.classList.contains("isHidden")) {
      close();
    }
  }

  function clickOutClose(ev) {
    if (ev.target === modal || ev.target.classList.contains("isHidden")) {
      close();
    }
  }
  document.addEventListener("keydown", keyClose);
  modal.addEventListener("click", clickOutClose);
  modalClose.addEventListener("click", close);
}

I need to use the fetchProducts function in modal logic to pass value from database to the opening modal. Im trying change my script type to module, also in package.json changing type to module but with no positive results.
When Im restarting my frontend only the name of error in console changing every each of time.

I receive that something like that: https://imgur.com/WteeLC2

Any ideas will be very helpful for me.

How to show an alert when the user switch pages

Hello guys i am working on a google chrome extension and i want to show an alert when the user change the current tab here is my code:

let ischecked=togg.checked

function change_ischecked() {
    ischecked = togg.checked;
    if (ischecked) {
        alert("Checked");
    } else {
      console.log("Unchecked!");
    }
  }

  togg.addEventListener("change", change_ischecked);```

How should I deal with hooks when arguments can be null

I currently have a react hook that will return me location search data from history, but I’m running into an issue where sometimes history is not available because it is being called in a modal

What would be the best way to conditional call hooks when it’s arguments (history.location.search or history.listen) can possibly be null?

the main warning I’m running into when trying to come up with a solution is

React Hook "useSyncExternalStore" is called conditionally. React Hooks must be called in the exact same order in every component render.

export default function useQueryParams() {
 const history = useHistory();
 const getSearch = useCallback(() => history.location.search, [history]);

 const search = useSyncExternalStore(history.listen, getSearch, getSearch);

 return queryParams(
   !search ? null : search,
 );
}


Thank you in advance!

Node.js: Syncing SQL database with WooCommerce via REST API fails to update product prices correctly

Problem:
My Node.js sync server logs show successful product updates in WooCommerce (HTTP 200 responses), but when checking the WooCommerce admin panel:

  • Some price/name changes aren’t actually saved

  • Some Poducts are created and then saved differently?

  • Products occasionally revert to previous states

  • No errors are logged despite the changes not persisting

Evidence from Logs:

2025-04-04T08:57:53.552Z [INFO]: Updated product O-GOSGP6XXZ05 (ID: 58597)
2025-04-04T08:57:54.018Z [DEBUG]: Updated product: Netzbuchsen Lötarbeiten (ID: 62082)
2025-04-04T08:57:54.871Z [INFO]: Updated product O-MOSMGXXXG4 (ID: 31218) 
2025-04-04T08:57:55.391Z [DEBUG]: Updated product: Austausch Display-LCD/LED-Einheit (ID: 30612)

But these changes don’t appear in WooCommerce’s admin UI

Current Sync Flow:

  • Fetch products from MySQL
  • Compare with WooCommerce products
  • Batch updates via WooCommerce REST API
  • Log successful updates

Heres the part of the codes that correspond to the syncing process:

Core Synchronization Logic (from syncService.js):

async function syncProducts() {
  try {
    // 1. Fetch products from both sources
    const sqlProducts = await fetchProducts(); // From SQL
    const wooProducts = await fetchWooCommerceProducts(); // From WooCommerce

    // 2. Compare products
    const { newProducts, updatedProducts } = compareProducts(sqlProducts, wooProducts);

    // 3. Process new products
    for (const product of newProducts) {
      await createWooCommerceProduct({
        name: `${product.device_name} - ${product.repair_type}`,
        sku: product.sku,
        regular_price: product.price.toString(),
        stock_quantity: 10
      });
    }

    // 4. Process updates
    for (const product of updatedProducts) {
      await updateWooCommerceProduct(product.wooId, {
        name: product.repair_type,
        regular_price: product.price.toString()
      });
    }

  } catch (err) {
    logger.error('Sync failed', {
      error: err.message,
      response: err.response?.data
    });
  }
}

WooCommerce API Client (from wooService.js):

const wooCommerce = axios.create({
  baseURL: `${process.env.WOOCOMMERCE_URL}/wp-json/wc/v3`,
  auth: {
    username: process.env.WOOCOMMERCE_CONSUMER_KEY,
    password: process.env.WOOCOMMERCE_CONSUMER_SECRET
  }
});

// Rate limited to 90 requests/minute
const limiter = new Bottleneck({
  minTime: 60000 / 90
});

async function updateWooCommerceProduct(productId, product) {
  const response = await limiter.schedule(() => 
    wooCommerce.put(`/products/${productId}`, product)
  );
  return response.data;
}

Tried looking at the SKU format to check if it fits out existing WooCommerce format. Seemed fine, also checked the logic of the comparision between SKUS…. nothing was wrong, it detected the updated devices as well as the new ones easily. I was expecting a simple way of comparing the products, then just the code just using a simple ‘PUT’ Request with the new data to the SKU….

How to sync jbrowse scale with external scale

I am trying to integrate jbrowse into an existing platform. The current platform provides me with values such as the bin size, bpperpixel and start and end position. Is there a way to adjust jbrowse scale to match this?

i am currently doing this.

   view?.setDisplayedRegions([
    {
      assemblyName: assembly.name,
      refName: props?.location?.chromosome.name,
      start: props.location.selectedInterval[0] ?? scaleView.start,
      end: props.location.selectedInterval[1] ?? scaleView.end,
    },
   ])
 

   view.setScaleFactor(0.7) //  <------ Not sure how to calculate the correct scale factor here
   view?.setNewView?.(bpPerPx, scaleView.start / scaleView.bpPerPixel);

Any help would be highly appreciated.

Issue printing PDF file: Loading preview takes forever in Chrome

I want to use the follwing script to print a PDF file directly in my web application:

const blob = new Blob([fullArray], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);

// printJS(url); // same issue https://printjs.crabbly.com/

var iframe = this._printiframe;
if (!this._printiframe) {
    iframe = this._printiframe = document.createElement('iframe');
    document.body.appendChild(iframe);

    iframe.style.display = 'none';
    iframe.onload = function () {
        setTimeout(function () {
            iframe.focus();
            iframe.contentWindow.print();
        }, 250);
    };
}

iframe.src = url;

The code works perfectly fine with Edge, but Chrome (latest version) appears to have an issue. When I run the code in Chrome, the print dialog opens as expected but the preview loads forever.

Now when I set a breakpoint after the object url gets created and open that url in a separate window and then continue the code, the preview gets loaded almost immediately. I assume this is a bug in Chrome and the object url needs to be “touched” somehow. Is there some workaround for this issue?

Animate.css on page scroll with Javascript

I have spent hours on this with no success. I’ve been googling and trying various javascript options but I can’t seem to get any to work?? – I’m probably being a total muppet.

I’m using animate.css and this works great, I’m able to apply to this to various CSS elements and everything works and animates fine.

The bit I can’t seem to get my head around is how to use javascript in combination with animate.css to delay the animation until it comes into view. At present all the animations fire off when the page loads.

Is there a definitive method to use javascript with animate.css? – All I need is something that triggers the CSS animation when it comes into view.

I’ve followed the various options on Stack Overflow without success. I hope someone can help.

Thanks in advance, kind regards

Brian

I am having trouble with adding multiple pop ups on my portfolio page I wonder if anyone can help I want them to have their own pop up

I think the code is conflicting with each other if anyone could help that would be great. I ideally would like to keep my hover effect so that when I click more details it pulls up the pop up which I will be adding a slide show onto it to display my work.

let popup = document.getElementById("popup");

function openPopup() {
  popup.classList.add("open-popup");
}

function closePopup() {
  popup.classList.remove("open-popup");
}

let popup2 = document.getElementById("popup2");

function openPopup() {
  popup2.classList.add("open-popup2");
}
function closePopup() {
  popup2.classList.remove("open-popup2");
}
.popup {
  width: 60%;
  background-color: #fff;
  border-radius: 15px;
  position: fixed;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  text-align: center;
  padding: 0 30px 60px;
  color: #333;
  visibility: hidden;
  z-index: 9002;
  box-shadow: 3px 3px 3px 3px #333;
  border: solid 3px #333;
  transition: transform 0.4s, top 0.4s;
}

.open-popup {
  visibility: visible;
  top: 50vh;
  transform: translate(-50%, -50%) scale(1);
}
.popup2 {
  width: 60%;
  background-color: #fff;
  border-radius: 15px;
  position: fixed;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  text-align: center;
  padding: 0 30px 60px;
  color: #333;
  visibility: hidden;
  z-index: 9002;
  box-shadow: 3px 3px 3px 3px #333;
  border: solid 3px #333;
  transition: transform 0.4s, top 0.4s;
}

.open-popup2 {
  visibility: visible;
  top: 50vh;
  transform: translate(-50%, -50%) scale(1);
}
<div class="section group">
      <div class="col span_4_of_12">
        <div class="item-1">
          <img
            src="item-1-2000x1333.jpg"
            alt="RYA guide to risk assessment text" />
          <div class="overlay"></div>
          <div class="overlay-content">
            <h4>RYA part 1</h4>
            <p>A technical problem</p>
            <button class="one" type="submit" onclick="openPopup()">
              More details
            </button>
          </div>
        </div>
      </div>
      <!-- pop up -->
      <div class="popup" id="popup">
        <h3>RYA part 1 - A technical issue</h3>
        <!-- image slider-->
        <!-- description -->
        <p>In this project I was tasked with fixing a project</p>
        <button class="one" type="button" onclick="closePopup()">back</button>
      </div>
      <div class="col span_4_of_12">
        <div class="item-1">
          <img src="RYA-UAT-2000X1333.jpg" alt="RYA new website" />
          <div class="overlay"></div>
          <div class="overlay-content">
            <h4>RYA part 2</h4>
            <p>An overhaul</p>
            <button class="one" type="submit" onclick="openPopup2()">
              More details
            </button>
          </div>
        </div>
      </div>
      <div class="popup2" id="popup2">
        <h3>RYA part 2 - A new website</h3>
        <!-- image slider-->
        <!-- description -->
        <p>In this project I was tasked with fixing a project</p>
        <button class="one" type="button" onclick="closePopup2()">back</button>
      </div>
      <div class="col span_4_of_12">
        <a href=""></a>
        <div class="item-1">
          <img src="RYA-UAT-2000X1333.jpg" alt="RYA new website" />
          <div class="overlay"></div>
          <div class="overlay-content">
            <h4>RYA part 2</h4>
            <p>An overhaul</p>
            <button class="one" type="submit">More details</button>
          </div>
        </div>
      </div>
      <div class="popup" id="popup">
        <h3>RYA part 2 - A new website</h3>
        <!-- image slider-->
        <!-- description -->
        <p>In this project I was tasked with fixing a project</p>
        <button class="one" type="button">back</button>
      </div>
    </div>

I tried redoing it from a tutorial instead of copying and pasting but I can’t seem to understand why it is conflicting.