Category: javascript

Run the following code in a browser:

({ clone: structuredClone }).clone(1);

will got Uncaught TypeError: Illegal invocation, tested in Chrome/Edge.

However running the code in NodeJS is fine, tested in NodeJS v20.

Workaround:

({ clone: (v) => structuredClone(v) }).clone(1);

Or

({ clone: function(v) { return structuredClone(v)} }).clone(1);

Is this the expected behaviour?

I have the code for a horizontal timeline with javascript. This code works fine, but there is one problem in scrolling. Sometimes when I get to the last timeline item, the scrolling is not complete and the NEXT button disappears.
can you please tell me how to fix this? thanks!

problem screenshot:

code:

(function () {
    // VARIABLES
    const timeline = document.querySelector(".timeline ol"),
        elH = document.querySelectorAll(".timeline li > div"),
        arrows = document.querySelectorAll(".timeline .arrows .arrow"),
        arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
        arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
        firstItem = document.querySelector(".timeline li:first-child"),
        lastItem = document.querySelector(".timeline li:last-child"),
        xScrolling = 280,
        disabledClass = "disabled";

    // START
    window.addEventListener("load", init);

    function init() {
        setEqualHeights(elH);
        animateTl(xScrolling, arrows, timeline);
    }

    // SET EQUAL HEIGHTS
    function setEqualHeights(el) {
        let counter = 0;
        for (let i = 0; i < el.length; i++) {
            const singleHeight = el[i].offsetHeight;

            if (counter < singleHeight) {
                counter = singleHeight;
            }
        }

        for (let i = 0; i < el.length; i++) {
            el[i].style.height = `${counter}px`;
        }
    }

    // CHECK IF AN ELEMENT IS IN VIEWPORT
    // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
    function isElementInViewport(el) {
        const rect = el.getBoundingClientRect();
        return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
    }

    // SET STATE OF PREV/NEXT ARROWS
    function setBtnState(el, flag = true) {
        if (flag) {
            el.classList.add(disabledClass);
        } else {
            if (el.classList.contains(disabledClass)) {
                el.classList.remove(disabledClass);
            }
            el.disabled = false;
        }
    }

    // ANIMATE TIMELINE
    function animateTl(scrolling, el, tl) {
        let counter = 0;
        for (let i = 0; i < el.length; i++) {
            el[i].addEventListener("click", function () {
                if (!arrowPrev.disabled) {
                    arrowPrev.disabled = true;
                }
                if (!arrowNext.disabled) {
                    arrowNext.disabled = true;
                }
                const sign = this.classList.contains("arrow__prev") ? "" : "-";
                if (counter === 0) {
                    tl.style.transform = `translateX(-${scrolling}px)`;
                } else {
                    const tlStyle = getComputedStyle(tl);
                    // add more browser prefixes if needed here
                    const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
                    const values = parseInt(tlTransform.split(",")[4]) + parseInt(`${sign}${scrolling}`);
                    tl.style.transform = `translateX(${values}px)`;
                }

                setTimeout(() => {
                    isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
                    isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
                }, 1100);

                counter++;
            });
        }
    }
})();

.timeline {
    white-space: nowrap;
    overflow-x: hidden;
}

.timeline ol {
    font-size: 0;
    width: 100vw;
    padding: 250px 0;
    transition: all 1s;
}

.timeline ol li {
    position: relative;
    display: inline-block;
    list-style-type: none;
    width: 160px;
    height: 3px;
    background: #fff;
}

.timeline ol li:last-child {
    width: 280px;
}

.timeline ol li:not(:first-child) {
    margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 1px);
    bottom: 0;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #f45b69;
}

.timeline ol li div {
    position: absolute;
    left: calc(100% + 7px);
    width: 280px;
    padding: 15px;
    font-size: 1rem;
    white-space: normal;
    color: black;
    background: white;
}

.timeline ol li div::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline ol li:nth-child(odd) div {
    top: -16px;
    transform: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::before {
    top: 100%;
    border-width: 8px 8px 0 0;
    border-color: white transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
    top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
    top: -8px;
    border-width: 8px 0 0 8px;
    border-color: transparent transparent transparent white;
}

.timeline time {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.timeline .arrows {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.timeline .arrows .arrow__prev {
    margin-right: 20px;
}

.timeline .disabled {
    opacity: 0.5;
}

.timeline .arrows img {
    width: 45px;
    height: 45px;
}

<section class="timeline">
    <ol>
        <li>
            <div><time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</div>
        </li>
        <li>
            <div><time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.</div>
        </li>
        <li>
            <div><time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.</div>
        </li>
        <li>
            <div><time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.</div>
        </li>
        <li>
            <div><time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.</div>
        </li>
        <li>
            <div><time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.</div>
        </li>
        <li>
            <div><time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.</div>
        </li>
        <li>
            <div><time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.</div>
        </li>
        <li>
            <div><time>1977</time> Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.</div>
        </li>
        <li>
            <div><time>1985</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.</div>
        </li>
        <li>
            <div><time>2000</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.</div>
        </li>
        <li>
            <div><time>2005</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.</div>
        </li>
        <li></li>
    </ol>

    <div class="arrows">
        <button class="arrow arrow__prev disabled" disabled>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/arrow_prev.svg" alt="prev timeline arrow" />
        </button>
        <button class="arrow arrow__next">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/arrow_next.svg" alt="next timeline arrow" />
        </button>
    </div>
</section>

I’ve been trying to get a mosaic to appear at the top of my website that I’m building. I have about 50 pictures (I could get more if needed) I put inside of a mosaic that needs to have two key properties:

1. The mosaic is always full width
2. The mosaic is always using 70% height of the screen, 30% remaining are kept for the headline

Basically, regardless of the size of your browser, I always want the mosaic to take up 70% and be of a fixed height. See a diagram of what I’m referring to:

A few points important to mention:

• In the example diagram above, I fully understand why I’m getting that result, the mosaic container is fixed to full width so that’s why it either gets too big or shrinks to still fit all the width
• I don’t care if some images are shown or not shown, I’m just looking for that fixed height mosaic effect, if that means that on some screens some rows or columns of pictures will be missing, I don’t mind. I also don’t mind the size of the pictures, it still has to look like a mosaic, but I don’t have a pre-set width/height.

How could I make such a mosaic work? I’ve been trying different approaches. I tried for example organizing my mosaic into rows of pictures (I called the bottom rows “disposableContainer1” and “disposableContainer2”, and making those bottom rows disappear when the screen reaches a certain size:

document.addEventListener('DOMContentLoaded', function() {
    function adjustContainerVisibility() {
        var disposableContainer1 = document.getElementById('mosaic-row-4'); // Replace with actual ID
        var disposableContainer2 = document.getElementById('mosaic-row-3'); // Replace with actual ID

        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;

        var thresholdForContainer1, thresholdForContainer2;

        if (windowWidth > 900) {
            // Width greater than 900px
            thresholdForContainer1 = 760;
            thresholdForContainer2 = 740;
        } else if (windowWidth > 800) {
            // Width between 801px and 900px
            thresholdForContainer1 = 750;
            thresholdForContainer2 = 730;
        } else {
            // Width 800px or less
            thresholdForContainer1 = 730;
            thresholdForContainer2 = 650;
        }

        // Debugging logs
        console.log('Window Height:', windowHeight, 'Window Width:', windowWidth);
        console.log('Thresholds:', thresholdForContainer1, thresholdForContainer2);

        // Check and apply visibility for disposableContainer1
        if (windowHeight < thresholdForContainer1) {
            if (disposableContainer1) disposableContainer1.style.display = 'none';
        } else {
            if (disposableContainer1) disposableContainer1.style.display = ''; // Reset to default
        }

        // Check and apply visibility for disposableContainer2
        if (windowHeight < thresholdForContainer2) {
            if (disposableContainer2) disposableContainer2.style.display = 'none';
        } else {
            if (disposableContainer2) disposableContainer2.style.display = ''; // Reset to default
        }
    }

    // Run on page load
    adjustContainerVisibility();

    // Add event listener for window resizing
    window.addEventListener('resize', adjustContainerVisibility);
});

But this is doesn’t really do the trick, there are too many view combinations possible and I’m pretty sure there must be a smarter way to approach the problem.

My thoughts are:

• Can I maybe make a larger, wider mosaic, and have parts of the mosaic not always visible, meaning the side images would only appear if needed to fill the 70% of screen height, otherwise they are beyond the limit of the screen and you can’t see them? No idea if this makes sense
• Can I do something like a masonry or grid type of thing, and make it so that the images within the mosaic always use all the space available? I don’t really mind if the mosaic pictures are not all of the exact same height/width ratio.

Please let me know if you have some ideas, I’m sure there must be an efficient way to tackle this. As you can probably tell, I’m really new to web development…

I am making a tutorial on HTML and is trying to make such system. There will be a question where you will type in a textbox the correct answer. According to your answer, the computer will display different HTML pages coded in other programs. The problem is that I cannot use the JS error tag to throw pages nor to change the whole page and document.write can change the whole page ,but not to a image.

I tried with

try{
  if(x != "the correct answer")  throw "the link of the wrong page"
  if(x == "the correct answer")  throw "the link of the right page"
}

and instead of throwing a link or changing the HTML page , it just didn’t display anything.

I even knew that JS document.write() erases all HTML if called after the HTML page loads so I tried

<button type="button" onclick=document.write(<a href="the link of the wrong page"></a>)Submit</button>

but then I realized document.write() is uncontrollable (shows the same thing when called) and can’t throw links nor pages.

I have a stimulus controller that I can’t connect. I have followed a youtube video for Stripe Payments but the checkouts page isn’t rendering and the stripe controller is not logging anything. I’m getting all sorts of errors on the console:

1:1 An import map is added after module script load was triggered.
es-module-shims.min.source.js:1 

Uncaught Error: Unable to resolve specifier 'bootstrap' imported from http://localhost:3000/assets/application-67ea6b3da0ef8f02b986a773e4506976fff6e9dd8ee99ae1eca202e98914abb8.js
    at throwUnresolved (es-module-shims.min.source.js:1:1)
    at _resolve (es-module-shims.min.source.js:1:1)
    at es-module-shims.min.source.js:1:1
    at Array.map (<anonymous>)
    at es-module-shims.min.source.js:1:1
throwUnresolved @ es-module-shims.min.source.js:1
_resolve @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.catch (async)
processScript @ es-module-shims.min.source.js:1
processScriptsAndPreloads @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.then (async)
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
es-module-shims.min.source.js:1 

Uncaught Error: Unable to resolve specifier 'bootstrap' imported from http://localhost:3000/assets/application.debug-b4d869f0ecee3111a6ebcb703926c8338a7e295824fbbc578005e1b1856e8287.js
    at throwUnresolved (es-module-shims.min.source.js:1:1)
    at _resolve (es-module-shims.min.source.js:1:1)
    at es-module-shims.min.source.js:1:1
    at Array.map (<anonymous>)
    at es-module-shims.min.source.js:1:1
    at async loadAll (es-module-shims.min.source.js:1:1)
    at async topLevelLoad (es-module-shims.min.source.js:1:1)
throwUnresolved @ es-module-shims.min.source.js:1
_resolve @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.catch (async)
processScript @ es-module-shims.min.source.js:1
processScriptsAndPreloads @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.then (async)
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
1:1 

Uncaught TypeError: Failed to resolve module specifier "@hotwired/turbo-rails". Relative references must start with either "/", "./", or "../".
1:1 

Uncaught TypeError: Failed to resolve module specifier "application". Relative references must start with either "/", "./", or "../".

I cant get the stimulus controller to connect for some reason. Here are some relevant files.

importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

app/javascript/controllers/index.js

// Import and register all your controllers from the importmap under controllers/*

import { application } from "controllers/application"

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
// lazyLoadControllersFrom("controllers", application)

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

import "@hotwired/turbo-rails"
import "controllers"
import "bootstrap"
import "jquery"
import "popper.js"

head in application.html.erb

<head>
  <title>PYE Candles</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" %>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_include_tag 'application', 'data-turbo-track': 'reload', type: "module", defer: true %>
  <%# <%= javascript_include_tag 'stripe_controller.js', 'data-turbo-track': 'reload', defer: true %>
  <%= javascript_include_tag 'https://js.stripe.com/v3/', 'data-turbo-track': 'reload' %>
  <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Work+Sans:wght@600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,100&display=swap" rel="stylesheet">
  <%= javascript_importmap_tags %>
</head>

app/javascript/controllers/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()
application.register("stripe", StripeController)
application.debug = false
window.Stimulus   = application

export { application }

app/javascript/controllers/stripe_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { publicKey: String, clientSecret: String }
  stripe = Stripe(this.publicKeyValue, { betas: ["embedded_checkout_beta_1"] });

  async connect() {
    console.log("Stimulus controller connected");
    console.log("Connect method is called");
    console.log("Public Key:", this.publicKeyValue);
    console.log("Client Secret:", this.clientSecretValue);

    this.checkout = await this.stripe.initEmbeddedCheckout({
      clientSecret: this.clientSecretValue
    });

    console.log("Checkout Object:", this.checkout);

    this.checkout.mount(this.element);
  }

  disconnect() {
    this.checkout.destroy();
  }
}

I’m not sure what to try as I don’t understand the problem.

function wait() {
    let a = Date.now()
    while (Date.now() - a < 3000) {
        //loop
    }
    console.log('waiting ends...')
}
function start(){
    console.log('starts...')
    wait()
}
function end(){
    console.log('ends...')
}

start()
end()

How can I set wait() execute asynchronously that lead to a output of “starts…, ends…, waiting ends…” without apply setTimeout function to wait()?

I want to make a graph simulation with d3 where I can drag the nodes and move them around, but the length of the links must not be less than 300 or more than 600, how can I approach this?

Here is my simulation:

const simulation = d3
  .forceSimulation(nodes)
  .force("charge", d3.forceManyBody().strength(-300))
  .force(
    "link",
    d3
      .forceLink(links)
      .id((d) => d.id)
      .distance(300),
  )
  .force(
    "center",
    d3.forceCenter(
      container.node().clientWidth / 2 - 75,
      container.node().clientHeight / 2 - 75,
    ),
  );

For now I could only set the constat length of a link.

I tried to search in the d3 documentation, but didn’t find anything, if there is alerady such a problem with described solution, I would be glad to see it.

Thank you!

I’m attempting to upload photos by stored urls on poshmark (https://poshmark.com/create-listing) but can’t figure out how to. The input type=”file” making the file upload prompt come up. Is there anyway to send urls to this and click Open?

I found this: https://medium.com/@dev_agam/automate-file-upload-with-chrome-extension-7ee6989d58e9 but can’t seem to figure out how to use the code.

I’m self taught and want to learn so the lengthier the explanation the better! Appreciate the help!

I haven’t tried much of anything I’ve just been researching and it seems most people claim it’s impossible but found a recent answer linking the article above.

https://codepen.io/joe1992/pen/yLQRwrg

In my Three.js project, I want to apply a .png file to an object, but the alpha channel doesn’t allow the color of the underlying object to show through; it seems like everything is being removed.

I had tried many options, from the transparency of the image to blend combinations, could it be related to that?
When I use the following code, it comes close to what I want, but the white background is not transparent like the rest of the object:

blendEquation: THREE.AddEquation,
blendSrc: THREE.SrcAlphaFactor,
blendDst: THREE.OneMinusDstColorFactor,

Javascript: I am trying to sum the values in the following array using an arrow function but I am getting an error “Uncaught TypeError: Cannot read properties of undefined (reading ‘1’)” Not sure why

let cid = [
    ["PENNY", 1.01],
    ["NICKEL", 2.05],
    ["DIME", 3.1],
    ["QUARTER", 4.25],
    ["ONE", 90],
    ["FIVE", 55],
    ["TEN", 20],
    ["TWENTY", 60],
    ["ONE HUNDRED", 100]
];
const cidTotal = (cid) => {
    let sum = 0;
    for (let k=0; cid.length - 1; k++) {
        
        //if (cid[k][1] !== undefined) {
          sum = sum + cid[k][1];
        //}
    }
    return sum;
}
let cidTotalValue = cidTotal(cid);

I tried removing the parameter and directly running the function but no success yet.

Google Bard tells me that google chrome devtools can do a vector trace of a png image to an svg. Is that true? If so, I’m having trouble finding any references to it. I can’t find any of the features it claims to document. Am I missing something, or is this all a hallucination? I went to the rendering tab in chrome and found nothing about this.

Me: how to convert a png to svg without external tools

Bard: While direct conversion from PNG to SVG without external tools
isn’t feasible, here are two approaches that minimize reliance on
external software:

1. Browser-Based Conversion:

Image Trace Functionality: Many modern web browsers (e.g., Chrome,
Firefox, Edge) offer built-in image tracing tools within their
developer tools or extensions. Steps: Open the browser’s developer
tools (usually by pressing F12). Locate the image trace functionality
(e.g., “Trace Image” in Chrome’s Rendering tab). Load the PNG image
into the browser. Apply image tracing to generate an SVG
representation. Save the generated SVG code using the browser’s “Save
as” or “Export” options.

provided example:

// JavaScript
async function tracePNGtoSVG(pngUrl) {
  try {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    // Load PNG image onto canvas
    const img = new Image();
    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0);

      // Trace image using browser's built-in functionality
      const tracedSVG = await traceImage(canvas);

(wth is traceImage()??? not a native function afaik)

Me: In your previous response, you said the browser has built-in tracing functionality. Can you provide documentation of the brower’s built-in tracing functionality? I can’t find it

Bard

Here’s information about the built-in image tracing functionality in major browsers:

Chrome:

Location: Within Chrome DevTools (press F12), under the “Rendering”
tab. Functionality: Offers a “Trace Image” option that generates an
SVG representation of the selected image. Documentation: While not
extensively documented, guidance can be found in blog posts or
community forums.

Firefox:

Location: Accessible through the “Inspector” panel (right-click on an
image, choose “Inspect Element”). Functionality: Provides a “Path”
option in the Inspector panel, allowing you to create an SVG path
based on the image’s outline. Documentation: Brief mention in
Mozilla’s developer documentation.

Edge:

Location: Available in the “Elements” panel of Edge’s DevTools (press
F12). Functionality: Similar to Chrome’s “Trace Image” feature,
generating an SVG from a selected image. Documentation: Limited
documentation, but usage is similar to Chrome’s feature.

“Node, npm,express all are installed latest version, i am a beginner in coding”

const express = require(‘express’)
let myvar=35;

console.log(myvar);
‘/home/mukul/Documents/01.VS CODE/1.js’
/home/mukul/Documents/01.VS CODE/1.js: line 1: syntax error near unexpected token (' /home/mukul/Documents/01.VS CODE/1.js: line 1: const express = require(‘express’)’
mukul@mukul:~/Documents/01.VS CODE$

node js file error not able to run any js file

Consider I have a simple form like this:

<form method="post" action="index.php">
      <input id='textsearch' type="text" placeholder="Enter a character" name="search">
      <button onclick="addfields()">Add</button>
</form>

Here, as the user click the Add button, the onclick event is triggered and addfields() function gets activated. In that function, I have somehow managed to add one input field in this form and the form now looks like this:

<form method="post" action="index.php">
      <input id='textsearch' type="text" placeholder="Enter a character" name="search">
      <input id='textsearch_1' type="text" placeholder="Enter a character" name="search_1">
      <button onclick="addfields()">Add</button>
</form>

But, there has been a problem. If I use php to get access to these variables, I can use something like this:

<?php
$first_char=$_POST["search"];
$second_char=$_POST["search_1"];
?>

But where does it end? I have no prior idea how many fields the user creates and inputs data in those fields. Then, how can there be a solution to that?

NOTE: I know using onclick() function is much disapproved by many users. I am still stuck to this bad usage habit. Apologies for that. Thank you.

I have a large site, and most of the places have anchor links with icons. When I hit the icon, it will take us to its section within the same page. So, creating anchor links and replacing them with id values is a lot of manual work, so I want to use simple code and not any plugins.

I have illustrated it with a sample code below. I hope it’s self-explanation. If any details are needed, I am happy to provide them. JavaScript or PHP is totally fine.

<div class="" id="process-invoices">
  <a href="#{link-should-be-from-above-div-id}">My Icon, No text</a>
</div>
<div class="" id="plan-payments">
  <a href="#{link-should-be-from-above-div-id}">My Icon, No text</a>
</div>
<div class="" id="make-payments">
  <a href="#{link-should-be-from-above-div-id}">My Icon, No text</a>
</div>
<div class="" id="track-performance">
  <a href="#{link-should-be-from-above-div-id}">My Icon, No text</a>
</div>

I have tried other examples but not getting the results.

I am actually using Next.js, but it uses React and webpack under the hood. I would like to convert this wasm imagemagick demo to work in React/webpack/Next.js. How do I do that?

The pieces that I’ve seen so far is I would probably just need to fetch the wasm module so I can get the ArrayBuffer. But I don’t know how to get the path from the installed node_modules folder. Or alternative to that, perhaps I could use some webpack plugin to generate an output.wasm file locally in the public folder, and then fetch that with an XMLHttpRequest. Or finally, perhaps there just is a way to use a webpack loader to just do await import('@imagemagick/magick-wasm/dist/magick.wasm') to lazy load it! Something along those lines is what I think should be done, but I don’t know which path will lead to success.

Any ideas how to load a wasm module through a webpack system or in Next.js, so it works in the browser?