Category: javascript

Category Added in a WPeMatico Campaign

How can I count and show Unicode Characters when insert onclick to textarea?

I insert Unicode-Smiley to HTML textarea. I have an second JS script to count characters typed by user to limit the length in the textarea, this is the JS code.

Now, when the Unicode smiley inserted with the first js code to the textarea, the second script dont show how many chars are inserted…the counter shows 0. I think the error is that the second js script need a line of code to watch when chars inserted via onclick, or the 2 scripts must merge to one?

function addEmoji(elem) {
  document.querySelector('textarea').value += elem.textContent;
}


$(document).ready(function() {
  $('textarea').on("input", function() {
    var maxLength = $(this).attr("maxLength");
    var currentLength = $(this).val().length;
    var color = currentLength < strcnt[0] ? '#ff0000' : '#00BB00';
    
    $('#minChars').css({
      'color': color
    });
    
    $('#Chars').text(currentLength);
    
    if (currentLength > strcnt[1]) {
      color = '#FF9900';
    }
    
    if (currentLength > strcnt[2]) {
      color = '#ff0000';
    }
    
    $('#Chars').css({
      'color': color
    });
  });
});
<span onclick="showEmoji(this)">&#129321;</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

How to structure material and mixture data in a registration system?

I have a question regarding the structuring of objects in a material registration system.
I’m building a system to register materials (with fields id, name, and specificWeight) and manage mixtures of these materials.

It tried to set each material follows this structure:

material1: { mat_id: "mat1", name: "string", specificWeight: number, percentage: 1 }
material2: { mat_id: "mat2", name: "string", specificWeight: number, percentage: 1 } 
// and so on...

Each mixture like this:

mixture1: { 
  mixt_id: "mix1", 
  name: "string", 
  composition: [
    { mat_id: "mat1", name: "string", specificWeight: number, percentage: 0.6 }, 
    { mat_id: "mat2", name: "string", specificWeight: number, percentage: 0.4 }
  ], 
  specificWeightWeighted: number 
}

My questions are:

  • Is this a correct and efficient way to structure materials and mixtures?
  • Is it appropriate to include specificWeightWeighted directly in the mixture object?

I appreciate any advice from more experienced developers. Thanks in advance!

How to change an operator that is a string into a mathematical operator in Java Script?

I am trying to build a calculator, I am kinda new to Java Script.The idea is that I take a string from an input field, slice the first number the operator and the second number.

I am stuck at converting the operator which is type string into a type such that it can perform mathematical operations.

The code below currently does not work. I saw advice to use conditional logic, but is there a simpler way or a method to convert the string operator into a ‘mathematical’ operator?

function math() {

    let equation = (document.getElementById("calc-input").value).replaceAll(" ", "");

    let operatorIndex = equation.search(/[+-*/]/);
    let operator = equation.charAt(operatorIndex);

    let n1 = Number(equation.slice(0, operatorIndex));
    let n2 = Number(equation.slice(operatorIndex + 1));

    document.getElementById("result").innerHTML = n1 operator n2
}

How to round all the imperfect corners of an element? [duplicate]

I am trying to create a box like this for my landing page slider and product box, with an empty space for the button inside the box and all corners rounded and radiused. Can anyone help me with how I can create this design with HTML and CSS?

enter image description here

I designed these designs in Figma, which has a feature called subtracting that allows you to design elements in a similar way. But I don’t know how to implement it with code.

How can I detect swipe events without blocking other elements?

I have a transparent div set to handle swipe gestures. It works great, but it’s blocking access to elements underneath. I can’t tap or focus on anything underneath the swipe area:

CSS:

#swipe-area{
    width: 60vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    opacity: 0;
    pointer-events: auto;
}

Element is just inside the body tag:

<body>
<div id="swipe-area"></div>
...
</body>

CSS Files in Devtool-Inspector are not clean

CSS Files in DevTools Inspector Contain JavaScript and Appear Duplicated

I’m encountering a strange issue in Chrome DevTools (Inspector) while debugging my project. The CSS files are not clean—many of them contain JavaScript code inside, and some CSS files appear to be duplicated with even more JavaScript injected into them.

What I Have Tried:

  • Checked the actual source files in my project directory → They contain only valid CSS.
  • Disabled all browser extensions → The issue persists.
  • Hard-reloaded the page (Ctrl+Shift+R) and cleared the cache → No change.
  • Examined the network tab in DevTools → The CSS files appear to be requested correctly, but in the Sources tab, they contain JavaScript code.
  • Looked for Webpack or Vite transformations that could be causing this issue, but I didn’t find anything suspicious.

My Project Setup:

  • Frontend: React.js (with Vite/Webpack as the bundler)
  • Backend: Java EE 10 (serving static assets)
  • Dev Environment: Chrome (latest), Windows/Linux

Questions:

  1. Why do my CSS files in the DevTools Inspector contain JavaScript?
  2. Why are the CSS files duplicated with even more JavaScript inside?
  3. Could this be caused by my build system (e.g., Webpack, Vite, or server-side transformations)?

Any help or suggestions on how to debug this would be greatly appreciated!

Devtool Inspector

import webpack from 'webpack';
import path from 'path';
import HtmlPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin'

export default {
    entry: './src/index.tsx',
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve('build'),
        clean: true,
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                type: "asset",
            },
            {
                test: /.(js|mjs|jsx|ts|tsx|css)$/,
                use: ['source-map-loader']
            }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    devServer: {
        hot: true,
        port: 3000,
        open: true,
        historyApiFallback: true,
        proxy: [
            {
                context: ['/service'],
                target: 'http://localhost:8080',
            },
        ],
    },
    plugins: [
        new HtmlPlugin({
            template: 'public/index.html',
            filename: 'index.html'
        }),
        new CopyWebpackPlugin({
            patterns: [
                {from: 'public/assets', to: 'assets'},
            ],
        }),
        new webpack.DefinePlugin({
            "process.env.PUBLIC_URL": JSON.stringify("/"),
        })
    ]
}

How to fix error “Composite.add is not a function” caused by code not yet run

I am making a project using MatterJS. However, I am having some difficulties. Whenever I run my code it throws the error TypeError: Composite.add(...) is not a function. I asked about the problem in this question, however it was closed as the code snippet I included did not throw the error when run. It turns out that the error only occurs when the code to render the scene is included. I hadn’t included the rendering code in the snippet because it was run after the line on which the error is thrown. How do I fix this, and why does it happen?
Here is my code:

window.addEventListener("DOMContentLoaded", () => {
  console.log('loaded')

  var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite,
    Body = Matter.Body,
    Events = Matter.Events;
  World = Matter.World;
  var engine = Engine.create({
    gravity: {
      x: 0,
      y: 1,
      scale: 0
    }
  });

  world = engine.world;

  var w = window.innerWidth;
  var h = window.innerHeight;
  var canvas = document.getElementById('canvasM');
  let ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  let circleA = Bodies.circle(100, 100, 10);
  //The line on which the error is thrown. The console says the error occurs on a different line, but this is the only time "Composite.add" is referenced
  Composite.add(world, [circleA])
  //if I uncomment this line, the code runs fine, but without a renderer
  //return
  (function render() {
    ctx.clearRect(0, 0, 1000, 1000)
    var bodies = Composite.allBodies(engine.world);

    window.requestAnimationFrame(render);

    ctx.beginPath();

    for (var i = 0; i < bodies.length; i += 1) {
      var vertices = bodies[i].vertices;

      ctx.moveTo(vertices[0].x, vertices[0].y);

      for (var j = 1; j < vertices.length; j += 1) {
        ctx.lineTo(vertices[j].x, vertices[j].y);
      }
      ctx.lineWidth = 3;
      ctx.fill = '#fff';
      ctx.strokeStyle = "#000"
      ctx.stroke();



    }




    Matter.Engine.update(engine, 1000 / 60);
  })();



})
<head>
  <script src='https://cdn.jsdelivr.net/gh/liabru/[email protected]/build/matter.js'></script>
</head>
<canvas id="canvasM" data-pixel-ratio="2" style="position:relative; z-index:0;"></canvas>

How to fix an esLint error even after i ran eslint –fix

im an intern on a dev project and when i pulled the main branch and merged to to my feature branch i kept getting linting errors

`~srcapptestPDF.tsx
   6:9   error  Unsafe assignment of an error typed value                               @typescript-eslint/no-unsafe-assignment
   6:22  error  Unsafe call of a(n) `error` type typed value                            @typescript-eslint/no-unsafe-call
   6:42  error  Unsafe member access .useMutation on an `error` typed value             @typescript-eslint/no-unsafe-member-access
  11:31  error  Unsafe argument of type `any` assigned to a parameter of type `string`  @typescript-eslint/no-unsafe-argument
  11:36  error  Unsafe member access .buffer on an `any` value                          @typescript-eslint/no-unsafe-member-access
  13:11  error  Unsafe assignment of an `any` value                                     @typescript-eslint/no-unsafe-assignment
  13:22  error  Unsafe member access .mimeType on an `any` value                        @typescript-eslint/no-unsafe-member-access
  21:7   error  Unsafe assignment of an `any` value                                     @typescript-eslint/no-unsafe-assignment
  21:28  error  Unsafe member access .fileName on an `any` value                        @typescript-eslint/no-unsafe-member-access
  32:5   error  Unsafe call of a(n) `error` type typed value                            @typescript-eslint/no-unsafe-call

✖ 10 problems (10 errors, 0 warnings`)

is there a way to fix it without changing the file as i wasn’t tasked t change this file
i tried running npm lint --fix and npm prettier --format but to no avail

Why is process.nextTick() used in this Task Queue implementation?

Why can’t I just use this.next()? Why do I have to process it in the next event loop?

export class TaskQueue {
  constructor (concurrency) {
    this.concurrency = concurrency
    this.running = 0
    this.queue = []
  }

  pushTask (task) {
    this.queue.push(task)
    process.nextTick(this.next.bind(this)) // this is to avoid Zalgo situation
    return this
  }

  next () {
    while (this.running < this.concurrency && this.queue.length) {
      const task = this.queue.shift()
      task(() => {
        this.running--
        process.nextTick(this.next.bind(this)) // why is this used?
      })
      this.running++
    }
  }
}

I removed the process.nextTick() and it still worked perfectly fine. So I don’t understand the point of it. Can any explain in what situations might my reasoning fail?

How to make Javascript work when using Swiper or Glide?

I am trying to make kind of a personal website, I would like to put there a slider with some projects I did. I have next to no experience with Javascript. HTML and CSS works fine, however when I try to move things around with JS, whole slider part just disappears. I tried Swiper js, and Glide js both. Same problem. I went over the HTML and CSS many times and the structure seems right.

Im putting the code here, but at this point it was changed so many times there might be a lot of errors. It is currently set to use Glide.js (dont look for Swiper adjustments). I figured the problem will be probably same in both cases, since it occured at the point of applying JS. Please, if someone can help me here, it would be great.

body {    
    height: 100vh;
    font-family: "Poiret One", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color:#ffede8;
    margin-left: 0;
    margin-right: 0;
    background-image: url(Hero4 01 Artboard 1.svg);
    background-repeat: no-repeat;
  }
  * {
      margin:0px;
  }
  header {
      position: relative;
      width: 100%;
      background-color: rgba(0,0,0,.8);
  }
  nav.navbar {
      height: 0px;
  }
  ul.links {
      padding: 0px;
  }
  .navbar {
      width: 100%;
      height: 70px;
      display:flex !important;
      justify-content: center !important;
      align-items: center !important;
      justify-content: space-around !important;
      padding-top: 0px;
      position: fixed;
      z-index: +1;
  }
  .logo .links .toggle_btn {
      padding-bottom: 50px;
  }
  li {
      list-style: none;
  }
  a {
      text-decoration: none;
      color: #ffede8 ;
      font-size: 1.5rem;
  }
  a:hover {
      color:#f1efde;
  }
  
  .logo {
      font-size: 1.5rem;
      font-weight: bold;
      display: flex;
      color:#ffede8;
  }
  .letter {
      color:#ffede8;
      letter-spacing: 3.5px;
      text-shadow: 2px 1px 3px rgba(194, 182, 188, 0.8);
  }
  .logo:hover {
      text-shadow: 3px 3px 8px #d6c3bb;
  }
  .navbar .links {
      display: flex;
      gap: 8rem;
  }
  .dropdown_menu {
      position: absolute;
      right: 2rem;
      top: 70px;
      width: 300px;
      height: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(15px);
      border-radius: 10px;
      overflow: hidden;
      display: block;
      transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      margin-top: 1px;
  }
  .dropdown_menu.open {
      height: 220px;
      padding-top: 10px;
      padding-bottom: 10;
  }
  .dropdown_menu li {
      padding: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .toggle_btn {
      color:#280f0a;
      font-size: 1.5rem;
      cursor:pointer;
      display: inline-block;
  }
  .navbar-brand {
      display: inline-block;
      justify-content: center;
      transition: scale 0.2 ease;
  } 
  .navbar-brand:hover {
   scale:1.2;
  }
  .navbar-brand:active {
      scale: 0.95;
  }
  .fakenav {
      position: fixed;
      height: 70px;
      width: 100%;
      margin: 0px;
      padding: 0px;
      background-color: rgba(0, 0, 0, 0.6);
      
  }
  
  #about,
  #projects,
  #hobbies,
  #contact {
      height: 700px;
  }
  .content {
      padding-top: 70px;
  }
  #about {
      margin-top: 550px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  
   } 
  
  .photo {
      width: 30em;
      border-radius: 100%;
      margin: 50px 100px;
      border-right: 10px groove #8c837c;
      border-top: 10px groove #c9c1b6;
      border-bottom: 10px groove #c9c1b6;
      border-left: 10px groove #8c837c;
  }
  .bio {
      width: 15em;
      height: 100%;
      font-size: 1.5em;
      margin: 0px 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.7em;
      color: #233220;
      
  }
  .hi {
      color: #8c837c;
      font-size: 1.2em;
  }

  .container {
    margin-top: 200px;
    padding: 0;
    box-sizing: border-box;
  }

  .glide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
 }
 .glide_slides .glide-slide {
    list-style: none;
  }
 .glide_slides .glide-slide .card-link {
    width:400px;
    height: 45vh;
    display: block;
    background-color: rgba(238, 228, 237, 0.4);
    padding: 18px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 10px rgba(64, 51, 51, 0.2);
    border: 2px solid transparent;
    transition: 0.2 ease;
}
.glide_slides .glide-slide .card-link:hover {
    box-shadow: 0 20px 20px rgba(64, 51, 51, 0.2);
}
.glide_slides .card-link .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.glide_slides .card-link .badge {
    color: rgb(236, 224, 223);
    margin: 16px 0 18px;
    padding: 8px 16px;
    font-size: 1rem;
    background: #674f4f;
    width: fit-content;
    border-radius: 50px;
}
.glide_slides .card-link .card-title {
    font-size:1em;
    color: #674f4f;
}

.glide_slides .card-link .card-button {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    color: #674f4f;
    margin: 10px 0 5px;
    border: 1px solid #674f4f;
    background: none;
    cursor: pointer;
    transform: rotate(-45deg);
    background-color: #f5e1e1;
    transition: 0.4 ease;
}
.glide_slides .card-link:hover .card-button {
    color: rgb(236, 224, 223);
    background: #674f4f;
}

  
  @media (min-width: 1441px) {
      .navbar {
      width: 100%; 
      }
      .dropdown_menu {
          display: none;
      }
      .toggle_btn {
          display: none;
      }
  }
  @media (min-width: 1280px) and (max-width: 1440px) {
      .navbar {
      width: 100%; 
      }
      .dropdown_menu {
          display: none;
      }
      .toggle_btn {
          display: none;
      }
  }
  @media (min-width: 1024px) and (max-width: 1279px) {
      .navbar {
      width: 100%; 
      }
      .dropdown_menu {
          display: none;
      }
      .toggle_btn {
          display: none;
      }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
      .navbar {
      width: 100%; }
      .navbar .links {
          display: none;
      }
  }
  @media (min-width: 481px) and (max-width: 767px) {
      .navbar {
      width: 100%; }
      .navbar .links {
          display: none;
      }
  }
  
  @media (max-width: 480px) {
      .navbar {
      width: 100%; 
      }
      .navbar .links {
          display: none;
      }
  }

For Swiper I tried: Version 8 and 11, tried to put initialization code inside a DOMContentLoaded, checked errors in browser, tried to make just a swiper as a blank- this worked. For Glide, I just stopped and came here once I saw JS again destroyed everything.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--arrow symbol-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=arrow_forward" />
    
    <title>Document</title>
    
    <link rel="stylesheet" href="actual_styles_without_mental_slider.css">
    <link rel="stylesheet" href="css/glide.core.min.css"

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--core css-->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
    <header>
    <nav class="navbar"></nav>
    <div class="navbar">
        <div class="logo" <a href="logo"></a>
            <div class="letter">(s)</div>logo</a></div>
            <ul class="links">
                <li><a href="#about">About Me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#hobbies">Hobbies</a></li>
                <li><a href="#contact">Contact Me</a></li>
            </ul>
            <div class="toggle_btn">
                <i class="fa fa-bars"></i>
            </div>
    </div>
    <div class="dropdown_menu">
        <li><a href="#about">About Me</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#hobbies">Hobbies</a></li>
        <li><a href="#contact">Contact Me</a></li>
    </div>
        </nav>
</header>
<body>
    <div class="fakenav"></div>
<div class="content">
<section id="about">
    <img class="photo"
         src="photo.jpg"
         alt="picture of Sara">
         <div class="bio">
         <h3> <div class="hi">Hello!</div>Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.</h3>
        </div>
</section>

<section id="projects">
    <div class="container">
    <div class="glide">
        <div class="glide_track" data-glide-el="track">
            <ul class="glide_slides">
                <li class="glide-slide">
                 <a href="link" class="card-link">
                    <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                    <p class="badge">badge</p>
                    <h1 class="card-title"> Description.</h1>
                    <button class="card-button material-symbols-outlined">arrow_forward</button>
                 </a>
                </li>

                <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>

                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>

                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                
            </ul>
        </div>
       <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
        </div>
    </div>
</div>
</section>

<section id="hobbies">
    <h1></h1>
</section>

<section id="contact">
    <h1>Contact Me</h1>
</section>
</div>
<script defer>
    const toggleBtn = document.querySelector('.toggle_btn')
    const toggleBtnIcon = document.querySelector('.toggle_btn i')
    const dropDownMenu = document.querySelector('.dropdown_menu')

    toggleBtn.onclick = function () {
        dropDownMenu.classList.toggle('open')
        const isOpen = dropDownMenu.classList.contains('open')

        toggleBtnIcon.classList = isOpen
        ? 'fa fa-close'
        : 'fa fa-bars'
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
<script>
    new Glide('.glide').mount()
</script>
</body>
</html>

Google app script web app url changing automatically on mobile

I have issue on Google chrome with a Web app developed on Google app script and published as Web app.
The Web app is being embedded to wix site as an iframe. It works well on desktop browsers. But ot doesn’t work on mobile specifically in Google chrome

Google chrome changes its its url structure and adding additional parameters in the url like if the url is

Https://scripts.google.com/macros/s/{script_id}/exec

But on mobile it changes to:
Https://scripts.google.com/macros/u/4/s/{script_id}/exec

Additional /u/4/ in the url.

Which makes the app script url as 404 not found.

Any solution to avoid from this url change?

Another Web app on same site exactly similarly is already working without url change.
So not sure how to avoid this situation.

I tried on mobilr safari it works.
Tired on Google chrome without a user logged in with Google and it worked.
Chrome mobile incognito mode already working.

But when we try with login with Google or Google account logged in it doesn’t work specifically when multiple Google accounts logged in to device or chrome.

How to Test renderCart function without executing dependent paymentSummary.js in Jasmine?

I’m trying to write a unit test for the renderCart function in my orderSummary.js file using Jasmine. However, I’m encountering an issue where the paymentSummary.js module, which is imported in orderSummary.js, is being executed during the test. This causes errors because paymentSummary.js tries to update DOM elements that don’t exist in my test setup.

Here’s the relevant code:

orderSummary.js

import { cart, removeFromCart, calculateCartQuantity, saveToStorage } from '../../data/cart.js';
import { getProduct, products } from '../../data/products.js';
import { formatCurrency } from '../utils/format-currency.js';
import dayjs from 'https://unpkg.com/[email protected]/esm/index.js';
import { deliveryOptions } from '../../data/deliveryOptions.js';
import { updateOrderSummary } from './paymentSummary.js'; // Problematic import

export function renderCart() {
  // Generates HTML for the cart and updates the DOM
  let cartHTML = '';
  cart.forEach((cartItem, index) => {
    const matchingProduct = getProduct(cartItem.productID);
    // Generate cart item HTML
    cartHTML += `
      <div class="cart-item-container js-cart-item-container-${matchingProduct.id}">
        <!-- Cart item details -->
      </div>
    `;
  });
  document.querySelector('.js-order-summary').innerHTML = cartHTML;
}

paymentSummary.js

import { cart, calculateCartQuantity } from "../../data/cart.js";
import { deliveryOptions } from "../../data/deliveryOptions.js";
import { products, getProduct } from '../../data/products.js';
import { formatCurrency } from "../utils/format-currency.js";

export function updateOrderSummary() {
  // Calculates order summary and updates the DOM
  let itemPrice = 0;
  let shippingPrice = 0;
  cart.forEach((cartItem) => {
    const matchingProduct = getProduct(cartItem.productID);
    itemPrice += cartItem.quantity * matchingProduct.priceCents;
    // Calculate shipping price
  });
  displayOrderSummary(itemPrice, shippingPrice);
}

function displayOrderSummary(itemPrice, shippingPrice) {
  // Updates DOM elements with order summary details
  document.querySelector('.js-item-quantity').innerHTML = `Items: (${calculateCartQuantity()})`;
  document.querySelector('.js-payment-summary-money1').innerHTML = `$${formatCurrency(itemPrice)}`;
  // Update other DOM elements...
}

// Problem: This runs immediately when paymentSummary.js is imported
updateOrderSummary();

Test Code

import { renderCart } from "../scripts/checkout/orderSummary.js";

describe('Test suite: renderCart', () => {
  it('displays the cart', () => {
    // Mock the DOM element required by renderCart
    document.querySelector('.js-test-container').innerHTML = `
      <div class="js-order-summary"></div>
    `;

    // Mock localStorage data
    spyOn(localStorage, 'getItem').and.returnValue(
      JSON.stringify([
        {
          productID: '15b6fc6f-327a-4ec4-896f-486349e85a3d',
          quantity: 1,
          deliveryOptionID: '3',
        },
        {
          productID: '83d4ca15-0f35-48f5-b7a3-1ea210004f2e',
          quantity: 1,
          deliveryOptionID: '2',
        },
      ])
    );

    // Call the function under test
    renderCart();
  });
});

and i am getting following error :

paymentSummary.js:39 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at displayOrderSummary (paymentSummary.js:39:59)
    at updateOrderSummary (paymentSummary.js:28:5)
    at paymentSummary.js:31:1
  1. Mocking DOM Elements:

I added all the required DOM elements to my test setup:

document.body.innerHTML = `
  <div class="js-item-quantity"></div>
  <div class="js-payment-summary-money1"></div>
  <div class="js-payment-summary-money2"></div>
  <div class="js-payment-summary-money3"></div>
  <div class="js-payment-summary-money4"></div>
  <div class="js-payment-summary-money5"></div>
  <div class="js-order-summary"></div>
  `;
  1. Spying on updateOrderSummary:

I tried spying on updateOrderSummary to prevent it from running:
spyOn(paymentSummary, 'updateOrderSummary');
However, this doesn’t work because updateOrderSummary is executed immediately when paymentSummary.js is imported.

Using enter to navigate from one InputNumber to next one by tabindex in Blazor

I have an EditForm in Blazor Server with several InputNumber where each InputNumber is defined with a tabindex, id and @onkeydown event attached. What I’m trying to do is to be able to use enter instead of tab to switch cursor focus from one InputNumber to the next one, mostly using JavaScript.

I have a script that works just fine with <input> tags which I took from here and here

function invokeTabKey() {
    var currInput = document.activeElement;
    if (currInput.tagName.toLowerCase() == "input") {
        var inputs = Array.from(document.querySelectorAll("input[id^='txtinp_']"))
        var currInput = document.activeElement;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i] == currInput) {
                var next = inputs[i + 1];
                if (next && next.focus) {
                    next.focus();
                }
                break;
            }
        }
    }
}

And each InputNumber is defined as follows:

@{identifier = "txtinp_" + startIndex + CurrentWorkOrder.Rimps.FindIndex(a => a.Id == context.Item.Id) + TotalRimps * 4;}
<InputNumber TValue="double"
             Value="@context.Item.EndWidth"
             ValueChanged="@((e) => OnWidthChanged(e, "EndWidth", context.Item, true))"
             ValueExpression="() => context.Item.EndWidth"
             tabindex="@(startIndex + CurrentWorkOrder.Rimps.FindIndex(a => a.Id == context.Item.Id) + TotalRimps * 4)"
             id="@identifier"
             @onkeydown="@((a) => MoveFocus(a))"
             disabled="@(CurrentWorkOrder.Finished || Loading)"
             class="form-control"
             style="width:120px" />

They are defined like that because the InputNumbers are inside a table with several rows. The index is verified to work as using tab moves the cursor correctly.

All the elements I want to be navigable by pressing enter have an id that starts with txtinp_ and when debugging the script I can see that the script successfully finds another element with a higher tabindex, but next.focus() doesn’t do anything. I have read that one possible reason for that is that InputNumber prevents the script from working properly but I haven’t been able to fix it.

Any suggestions on what I can try to make this work?

Why doesn’t .then(Promise.all) work as expected in JavaScript?

According to documentation Promise.all is a static method. The this context should not be needed. Also, it takes exactly one argument. So, why doesn’t

.then( Promise.all )

work? And why does

.then( Promise.all.bind( Promise ) )

work?

Promise.resolve( [ Promise.resolve( 1 ), Promise.resolve( 2 ) ] ).then( Promise.all ).then( arr => console.log( arr ) )

Uncaught (in promise) TypeError: Receiver of Promise.all call is not a non-null object

Promise.resolve( [ Promise.resolve( 1 ), Promise.resolve( 2 ) ] ).then( Promise.all.bind( Promise ) ).then( arr => console.log( arr ) )

Array [ 1, 2 ]

why some function don’t get called in logical operators? [duplicate]

I saw the code below in MDN specs which is about operators precedence:

function A() { console.log('called A'); return false; }
function B() { console.log('called B'); return false; }
function C() { console.log('called C'); return true; }

console.log(C() || B() && A());

// Logs:
// called C
// true

so the question I have based on my knowledge I can’t understand only C() invokes and not other functions.

console.log(A() && C() || B());
// Logs:
// called A
// called B
// false

again in here I can’t understand why C() doesn’t get called.

can someone explain to me how these two line of code are working and what’s going on under the hood?