Issue with multiple “else if” statments in javascript

Im having issues trying to get the following code to work.

I have temporarily set the randomNumber const to 0.99 for testing.
When I click the “Rock” button, the console log displays the 0.99 value in the const randomNumber, but the if else statments only display “paper”.

It should be displaying “Scissors”.

Please could someone point out where im going wrong?
Thanks!

<!DOCTYPE html>
<html>
  <head>
    <title>Rock Paper Scissors</title>
    <style>
     
    </style>
  </head>

  <body>
    <P>Rock Paper Scissors</P>
    
    <button onclick="
      const randomNumber = 0.99    // Math.random();
      console.log (randomNumber);

      if (randomNumber >= 0 && randomNumber < 0.33 ) 
        { console.log ('rock'); } 

      else if (randomNumber => 0.33 && randomNumber < 0.66 ) 
        { console.log ('Paper'); }

      else if (randomNumber >= 0.66 && randomNumber < 1.0 )
        { console.log ('scissors') }"
    
    >Rock</button>

    <button >Paper</button>
    
    <button>Scissors</button>
    <script>
   
    </script>

  </body>

</html>

strong text

How do I import WASM in Worker JS in a Vue 3 project powered by Vite?

I am trying to request a WASM function within a JS Worker. I am stuck with it because nothing works in the way I have tried, but also I cannot see any error. Let me explain what I am doing.

First, I have a function add in my WASM library mywasm (for test, it is written in Rust and built with wasm-pack). As the result, I have the files:

package.json
mywasm.js
mywasm_bg.js
mywasm_bg.wasm
…some other files

I installed mywasm with npm i path/to/mywasm.

Second, I added these lines to my App.vue:

<script setup>
...

import TestWorker from './test.worker?worker'

onMounted(async () => {
  // // Working example of add-function from mywasm
  // const wasm = await import('mywasm')
  // const c = wasm.add(-5, 12)
  // console.log(c)  // 7

  // Worker test
  const worker = new TestWorker()
  worker.postMessage({a: -5, b: 12})
})
</script>

...

Third, here is my test.worker.js file:

onmessage = event => {
  const c = event.data.a + event.data.b
  console.log(c)
}

This works totally fine, the number 7 is written to the console from the worker.

After that I am trying to call add function within the worker so I wrote this code. It should work exactly the same way (prints 7 into the console) but using add function from mywasm to sum the numbers.

import wasm from './mywams_bg.wasm'

onmessage = event => {
  WebAssembly.instantiateStreaming(fetch(wasm))
    .then(results => {
      const c = results.instance.exports.add(event.data.a, event.data.b)
      console.log(c)
    })
}

After run, I do not see any error or the correct 7 in the console. Likely, some errors are not tracked in JS workers. How do I rewrite my test.worker.js to make it work correctly?

My vite.config.js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import wasm from "vite-plugin-wasm"

// https://vite.dev/config/
export default defineConfig({
  build: {
    target: 'esnext',
  },
  plugins: [
    vue(),
    vueDevTools(),
    wasm(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true
      }
    }
  },
})

The versions:

node: v18.20.4
npm: 10.7.0
vue: 3.5.13
vite-plugin-wasm: 3.4.1
vite: 5.4.11

The code of mywasm:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

The build command: RUSTFLAGS='--cfg getrandom_backend="wasm_js"' wasm-pack build --release --target bundler --out-dir mywasm-pkg

Why in JavaScript clearing or writing HTML is not working? [duplicate]

In this code:

$.ajax({
    url: "./Home/ClearFilter",
    method: "POST",
    data: { id: id },
    success: function (response) {
        if (response.success) {
            var orders = response.orders;
            /// the orders have values

            content = $('table.toggle-column-table tbody');
            content.empty();
            content.text('');
            document.getElementsByClassName("toggle-column-table").innerHTML = "";
            document.getElementsByClassName("toggle-column-table").innerText = "";
            /// on html I don't see any changes.

            for (let i = 0; i < orders.length; i++) {
                let item = orders[i];
                let row = '<tr>' +
                    '<td>' + item.id + '</td>' +
                    '<td>' + item.status + '</td></tr>';
                document.getElementsByClassName("toggle-column-table").innerHTML += row;
            }
        }
    },
    error: function (error) {
        console.log(error);
    }
});

I don’t know what I should do to clear and add html code, I even used this code:

var content = $('table.toggle-column-table tbody');
content.empty(); /// or content.html('');
for (let i = 0; i < orders.length; i++) {
  let item = orders[i];
  let tr = '<tr>' +
              '<td>' + item.id + '</td>' +
              '<td>' + item.status + '</td></tr>';
  let row = $(tr);
  content.append(row); /// or content.html(tr);
}

Again nothing happened. Do you have any idea why clearing and writing html doesn’t work?

Adding a PDF file to a zip file containing images with JSZIP and JQUERY

I create a zip file containing images (with their urls extracted server-side via classic asp code) and it works fine.
I was inspired by this excellent example [https://jsfiddle.net/jaitsujin/zrdgsjht/] and implemented it with a progress bar and a message that the ZIP file had been created.
This is the final code that works perfectly and I hope it can be useful for someone

        <html> 
        <body>
        <link href="css/jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" />
        <link href="css/jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />
        <link href="css/hint.css" rel="stylesheet" type="text/css" />
        <link href='css/nprogress.css' rel='stylesheet' />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
        <script src="js/nprogress.js"></script> <script type="text/javascript" src="js/jquery.pnotify.js"></script>
    <div class="image-container">
    <table width="200" border="0" cellpadding="1" cellspacing="1">
    <tr>
       <td align="left" valign="middle"><a data-hint="Scarica lo ZIP con le immagini in Alta Risoluzione" href='#'><img class="download" src="img/zip-icon.png" onclick="generateZIP()" /></a></td>
       <td align="left" valign="middle"><a data-hint="Scarica lo ZIP con le immagini in Full HD" href='#'><img class="download" src="img/zip-icon.png" onclick="generateZIP2()" /></a></td>
    </tr>
    </table>
    </div>
    <div class="hide" id="progressbar"></div>
<div class="pdf_link hide"><a href="public/<%Response.Write("" & str_filename & "")%>">Link</a></div>
<div class="gallery">
...
<img class="thumb" src="images/<%=(rs_collezione.Fields.Item("link").Value)%>/thumbs/<%=(rs_collezione.Fields.Item("nome").Value)%>" alt="images/<%=(rs_collezione.Fields.Item("link").Value)%>/fhd/<%=(rs_collezione.Fields.Item("nome").Value)%>" href="images/<%=(rs_collezione.Fields.Item("link").Value)%>/ar/<%=(rs_collezione.Fields.Item("img").Value)%>"><br>
...
</div>
<script>
var links = [];
var links2 = [];

$('.gallery').on('click', '.pdf_link', function () {
  links.push($(this).attr('href'));
  console.log(links);
  });

$('.gallery').on('click', '.thumb', function () {
  $(this).removeClass().addClass('thumbChecked');
  $(this).css("border", "2px solid #c32032");
  links.push($(this).attr('href'));
  links2.push($(this).attr('alt'));
  console.log(links);
  console.log(links2);
  if (links.length != 0) {
    $('.download').css("display", "block");
  }
});

$('.gallery').on('click', '.thumbChecked', function () {
  $(this).removeClass().addClass('thumb');
  $(this).css("border", "2px solid white");
  var itemtoRemove = $(this).attr('href');
  var itemtoRemove = $(this).attr('alt');
  links.splice($.inArray(itemtoRemove, links), 1);
  links2.splice($.inArray(itemtoRemove, links2), 1);
  console.log(links);
  console.log(links2);
  if (links.length == 0) {
    $('.download').css("display", "none");
    $("#result")
        .removeClass()
        .text("");
  }
});

function generateZIP() {
  NProgress.start();
  console.log('TEST');
  var zip = new JSZip();
  var count = 0;
  var zipFilename = "LB_Images_AR.zip";

  links.forEach(function (url, i) {
    var filename = links[i];
    filename = filename.replace("https://www.turismofvgfoto.it/images/","").replace("ar/","");
    // loading a file and add it in a zip file
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if (err) {
        throw err; // or handle the error
      }
      zip.file(filename, data, { binary: true });
      count++;
      if (count == links.length) {
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          saveAs(content, zipFilename);
          NProgress.done();
          pnotify_zip ();
        });
      }
    });
  });
}

function generateZIP2() {
  NProgress.start();
  console.log('TEST');
  var zip = new JSZip();
  var count = 0;
  var zipFilename = "LB_Images_FHD.zip";

  links2.forEach(function (url, i) {
    var filename = links2[i];
    filename = filename.replace("https://www.turismofvgfoto.it/images/","").replace("fhd/","");
    // loading a file and add it in a zip file
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if (err) {
        throw err; // or handle the error
      }
      zip.file(filename, data, { binary: true });
      count++;
      if (count == links2.length) {
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          saveAs(content, zipFilename);
          NProgress.done();
          pnotify_zip ();
        });
      }
    });
  });
}
  </script>
<script type="text/javascript">
/**
 * Reset the message.
 */
function resetMessage () {
    $("#result")
        .removeClass()
        .text("");
}
function pnotify_zip () {
$.pnotify.defaults.history = false;
$.pnotify({
title: 'CREAZIONE ZIP',
text: ("Immagini aggiunte con successo al file ZIP appena creato!"),
type: 'success'});
}
  </script>

</body>
</html>

Now I need to add a pdf file, already present in the code above inside body

<div class="pdf_link hide"><a class="pdf_link" href="public/<%Response.Write("" & str_filename & "")%>">Link</a></div>

to the zip ile containing the images. Any idea?
I tried this code

... 

**var pdf_file = console.log($('.pdf_link a').attr('href'));**

...
zip.file(filename, data, { binary: true });
      **var folder = zip.folder("liberatoria");
      folder.file(pdf_file);**
      count++;
      if (count == links2.length) {
        zip.generateAsync({ type: 'blob' }).then(function (content) {
          saveAs(content, zipFilename);
          NProgress.done();
          pnotify_zip ();
        });
      }
    });
  });
}

but it doesn’t work, it creates the new folder without any file inside…
Thanks in advance for any help!

document.getElementsByClassName does not work as expected

I am trying to add a group of HTML elements dynamically to the document, and reset and refresh name and id attributes each time when removing or adding the elements.

When I use document.getElementsByClassName it just selects the ones that already existed in the document and does not select new elements that are added or removed dynamically after page load.

Also I can’t change and rearrange id and name attributes of all elements. For example, element1 id=HonorTitle0, element2 id=HonorTitle1, element3 id=HonorTitle2` and so on.

// Add row Honor
var rowHonor = 0;
$(document).on("click", "#Honoradd-row", function() {
  var new_rowHonor = '<tr id="row0" class="row0Class">' +
    '<td>' +
    '<input type="text" class="HonorTiltle form-control my-colorpicker1 colorpicker-element" id="HonorTiltle' + rowHonor + '" name="HonorTiltle' + rowHonor + '">' +
    '</td>' +
    '<td>' +
    '<input type="text" class="HonorAnistitude form-control my-colorpicker1 colorpicker-element" id="HonorAnistitude' + rowHonor + '" name="HonorAnistitude' + rowHonor + '">' +
    '</td>' +
    '<td>' +
    '<button class="Honordelete-row btn btn-danger mdi mdi-delete-forever" type="button" value="-" style="padding:1px;font-size:1.3rem;">Delete</button>' +
    '</td>' +
    '</tr>';

  $('#Honortest-table').append(new_rowHonor);
  rowHonor++;
  document.getElementById('HonorRowValue').value = rowHonor;
  RefreshHonorList();
  return false;
});

// Remove row Honor
$(document).on("click", ".Honordelete-row", function() {
  if (rowHonor > 0) {
    $(this).closest('tr').remove();
    rowHonor--;
    document.getElementById('HonorRowValue').value = rowHonor;
    RefreshHonorList();
  }
  return false;
});

function RefreshHonorList() {
  var str1 = str2 = "";
  var list1, list2, index;
  row = 0;
  list1 = document.getElementsByClassName("HonorTitle");
  list2 = document.getElementsByClassName("HonorAnistitude");
  for (index = 0; index < list1.length; ++index) {
    alert(index);
    str1 = "HonorTitle" + index;
    str2 = "HonorAnistitude" + index;
    list1[index].setAttribute('name', str1);
    list1[index].setAttribute('id', str1);
    list2[index].setAttribute('name', str2);
    list2[index].setAttribute('id', str2);
    row++;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="Honortest-table" class="table table-condensed">
  <thead>
    <tr style="font-size:0.8rem;">
      <th>Title</th>
      <th>Anistitude</th>
    </tr>
  </thead>
  <tbody id="test-body">
    <tr id="row0" class="row0Class">
      <td>
        <input type="text" class="HonorTitle form-control my-colorpicker1 colorpicker-element" id="HonorTiltle@($"{counter}")" name="HonorTiltle1" value="Title 1">
      </td>
      <td>
        <input type="text" class="HonorAnistitude form-control my-colorpicker1 colorpicker-element" id="HonorAnistitude1" name="HonorAnistitude1" value="Colour 1">
      </td>
      <td>
        <button class="Honordelete-row btn btn-danger mdi mdi-delete-forever" type="button" value="-" style="padding:1px;font-size:1.3rem;">Delete</button>
      </td>
    </tr>
  </tbody>
</table>
<div class="row">
     <div class="col-1">
         <button id='Honoradd-row' class='btn btn-info mdi mdi-plus' type='button' value='+' style="padding:1px;font-size:1.3rem;" />
         <input id="HonorRowValue" name="HonorRowValue" type="hidden" value="0">
     </div>
 </div>

My Mesh visualiser code takes so long to load the mesh files to the borwser , is SSR a solution?

I’m working on a 3D mesh viewer using .obj and .mtl files, but I’m running into performance issues — the browser takes a long time to load and render the mesh files, and it’s using a lot of my local PC’s resources which is logical. I’m wondering if using a server ( Remote Desktop) + nodejs +Server-Side Rendering (SSR) or some form of server-side processing could be a solution. Ideally, I’d like the server to handle all the heavy lifting — parsing, simplifying, and converting the mesh files (maybe to .glb), and then send a lightweight version to the client for viewing. Has anyone implemented something like this? Is SSR or another architecture better suited for this kind of task?

i didn’t try anything for the moment i just read some articles about this subject

Chrome >= 134 css transform performance

Has there been some kind of recent upgrade to how Google Chrome handles scroll events and/or applying transform styles?

Since about Chrome v134 I have the issue that setting a transform/translateY style on scroll, the element on which I set the style flickers briefly. (Tested on Windows and Linux)

In the Chromium browser of the same version, however, this is not happening.

<div style="position: relative;" id="scroller" onscroll="onScroll()">
  <div id="stickyHeader">Sticky Header</div>
</div>

function onScroll() {
  stickyHeader.style.transform = `translateY(${scroller.scrollTop}px)`;
}

see complete code in this fiddle: https://jsfiddle.net/floAtEbcont/n1k6Lxuw/19/

let scroller;
let stickyHeader;

function onLoad() {
  scroller = document.getElementById('scroller');
  stickyHeader = document.getElementById('stickyHeader');

  for (const element of Object.keys(Array.from(Array(1000)))) {
    const elementNode = document.createElement('div');
    elementNode.append(element);
    scroller.append(elementNode);
  }
}

function onScroll() {
  stickyHeader.style.transform = `translateY(${scroller.scrollTop}px)`;
}

html,
body {
  height: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.scroller {
  margin: 5px 10px;
  flex: 1;
  border: 1px solid black;
  overflow-y: auto;
}

.sticky-header {
  background-color: darkcyan;
  position: relative;
  z-index: 999;
  width: 100%;
}

<!DOCTYPE html>
<html>

<body onload="onLoad()">
  <div class="wrapper">
    <div class="scroller" id="scroller" onscroll="onScroll()">
      <div class="sticky-header" id="stickyHeader">Sticky Header</div>
    </div>
  </div>
</body>

</html>

Is there some way to prevent the flickering?

Intl.DateTimeFormat: Why is timeZoneName: “shortOffset” is having a different value in different languages

We are currently exploring showing timestamps with time zone to our users and decided to go with the Intl.DateTimeFormat option timeZoneName: "shortOffset" but we now noticed that the value is different between the languages.

When I run this snippet in chrome printing the timezone in different languages:

["it-IT", "da-DK", "de-DE", "en-GB", "es-ES", "pl-PL", "fr-FR", "sv-SE", "nl-NL", "nb-NO", "el-GR", "fi-FI", "pt-PT", "cs-CZ", ].forEach((l) => {
  const tz = Intl.DateTimeFormat(l, {
      timeZone: "Asia/Kolkata",
      timeZoneName: "shortOffset",
    })
    .formatToParts(new Date())
    .find((p) => p.type === "timeZoneName").value;

  console.log(l, tz);
});

I get this result:

language	timezone
it-IT	GMT+5:30
da-DK	GMT+5.30
de-DE	GMT+5:30
en-GB	GMT+5:30
es-ES	GMT+5:30
pl-PL	GMT+5:30
fr-FR	UTC+5:30
sv-SE	GMT+5:30
nl-NL	GMT+5:30
nb-NO	GMT+5:30
el-GR	GMT+5:30
fi-FI	UTC+5.30
pt-PT	GMT+5:30
cs-CZ	GMT+5:30

so for some reason french and finnish are using the label UTC and all the other tested languages are using GMT.

I would really like to know what the reason behind this is. Is there any documentation or database where I can find the configuration of the different languages for Intl.DateTimeFormat?

Passing HTML elements between multiple Swift ViewControllers in Xcode iOS app

I’m pretty new to iOS app development in general, and I’m struggling to find online resources on how to pass variables (parsed from an HTML table via JavaScript, seen here: HTML_Table_Parsing) between two separate ViewControllers in Xcode.

I’ve placed a public copy of my Xcode project and all associated files on my GitHub, found here:

Git Repo: rynich07/WHS-Cart-Pick-iPad-App

Here’s what I’ve got set up so far:

Reference the following: iPad Simulator Xcode Screenshot

Main WKWebView in ViewController.swift, used to display the main warehouse picking website
- Using a static HTML file in GitHub Xcode project called PickScreenWebpage.html as source for company privacy, but will be a live URL once deployed
Blue box (as seen in screenshot referenced above) is an overlayed WebKit View added via Main.storyboard, used to render image of product during picking (will also be tied to a live URL once deployed) and to enlarge critical info fields for personnel to read from afar
- Sourced by static OverlayWebpage.html page, with the goal being the variables in the HTML can be dynamic and set programmatically based on data from the Main WKWebView above

Here’s what I need help with:

Using the PickScreenParser.js script to determine Screen Name, SKU #, and Quantity fields from the Main ViewController.swift view that the user will have open:

Only when the ScreenName field is equal to: rfpk_find (31.5), then
1. Pass SKU # (12345) from Main ViewController.swift to OverlayWebpage.html
2. Pass Quantity (5 PACKS OF 1) from Main ViewController.swift to OverlayWebpage.html
Again, unless the advancing page’s ScreenName field value is rfpk_find (31.5), do not update the values in the OverlayWebpage.html with any advancing screens of the Main WKWebView in ViewController.swift; instead, leave them set from the previous page.

If you guys could help me build the framework for the above, I can take it from there and make adjustments as needed.

Thanks in advance for all your input!

[runtime not ready]: Error: Non-js exception: Compiling JS failed: 1283:3:import declaration must be at top level of module, js engine: hermes

I upgraded my react native from 0.75.2 to 0.79.1 in order to fix the issue with the latest Xcode update. I followed exactly everything in the upgrade helper. After a long of trying to run the app, I finally got to know that I hade to add AppDelegate.swift file to the compile sources (as in the picture)

Now, the problem I’m getting seems to have something to do with javascript. my babel.config.js file is as follows:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['module:react-native-dotenv', 'react-native-reanimated/plugin'],
};

my package.json file is as follows:

{
  "name": "lutfen",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "^4.6.4",
    "@os-team/i18next-react-native-language-detector": "^1.0.34",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-clipboard/clipboard": "^1.15.0",
    "@react-native-community/blur": "latest",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@reduxjs/toolkit": "^2.2.8",
    "axios": "^1.7.7",
    "i18next": "^23.16.5",
    "react": "19.0.0",
    "react-i18next": "^15.1.1",
    "react-native": "0.79.1",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.20.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-localize": "^3.4.1",
    "react-native-reanimated": "^3.15.4",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^5.4.0",
    "react-native-screens": "^3.34.0",
    "react-native-share": "^11.0.4",
    "react-native-svg": "^15.11.2",
    "react-native-webview": "^13.12.3",
    "react-redux": "^9.1.2",
    "redux": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.1",
    "@react-native/eslint-config": "0.79.1",
    "@react-native/metro-config": "0.79.1",
    "@react-native/typescript-config": "0.79.1",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "patch-package": "^8.0.0",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "2.8.8",
    "react-native-dotenv": "^3.4.11",
    "react-native-svg-transformer": "^1.5.0",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

is there any way I can track the error? I tried to remove everything and clean all the caches and builds but the problem persist. Also, I have no information about the error (also not in the console). all I get is this:

could you please give me any advice about how to deal with this error?

How can I preserve the range of DOM in JavaScript [closed]

I have a rich text editor control. I am storing the range whenever user click in that area because I have to do some changes there. But when the user clicks outside it. The DOM is changing and due to this the stored range is getting lost.

Is there any way to preserve it regardless of changes in DOM.

Removing extra spacing on child element on line break

I have a fixed width div containing another div.

I want the internal div as wide as its text inside, unfortunately, when the text breaks to the second line, there is a space on the right that I can’t get rid of.

While a CSS/HTML only answer is preferred, at this point I’m happy to accept a JavaScript answer.

what I want

what I get

.test {
  background: pink;
  width: fit-content;
  font-size: 4rem;
}

.container {
  width: 400px;
  background: yellow;
  padding: 4px;
}

<div class="container">
  <div class="test">
    somed long text here somedlong
  </div>
</div>

Issue with Switching and Adding Classes to Elements on Mouse Click

I’m encountering a problem while trying to switch and add classes to elements when a mouse click event occurs. Likewise I have multiple “li” elements. I want to add “class = subdrop active” to the selected anchor tag and the “class = active” to the subsequent li tag. I’m not sure if I’m handling the class manipulation correctly. Could someone please suggest the right approach?

<li class="submenu">
  <a href="javascript:void(0);">
    <i class="ti ti-layout-dashboard"></i>
    <span>Admin Profile</span>
    <span class="menu-arrow"></span>
  </a>
  <ul>
    <li>
      <a href="<?php echo base_url('admin_dashboard'); ?>">Dashboard</a>
    </li>
    <li>
      <a href="<?php echo base_url('admin_profile'); ?>">Profile</a>
    </li>
    <li>
      <a href="#">Settings</a>
    </li>
    <li>
      <a href="#">Contacts</a>
    </li>
  </ul>
</li>

Trying to get the following results on selected li clicks

<li class="submenu">
 <a href="javascript:void(0);" class="subdrop active"><i class="ti ti-layout-dashboard"></i><span>Admin Profile</span><span class="menu-arrow"></span>
</a>
<ul>
  <li><a href="<?php echo base_url('admin_dashboard'); ?>" class="active">Dashboard</a></li>
  <li><a href="<?php echo base_url('admin_profile'); ?>">Profile</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Contacts</a></li>
</ul>
</li>

Kendo.js UID bug

I have a bug in my UI where when using UID as name of the column, the value changes from string to a random guid which is taken from data-uid:
UID looks like this:
uid: 8f7e2416-df36-4f52-a1ab-204553ca029f

The data coming from server is {“uid” : “test”}:
Data seen here:

I do not see this issue when the column name is anything other than “uid”.

Why is this happening & how can I mitigate this issue?

How to get results from an async Javascript script using C# and Microsoft WebView2 control?

I have the following Javascript script:

async function getIPAddress() {
    var thisFuncName = arguments.callee.toString().match(/function ([^(]+)/)[1];
    var retValue = {
        'Result': true,
        'ResultText': '',
        'Message': '',
        'ScriptFuncName': thisFuncName
    };

    try {
        const response = await fetch('https://api.ipify.org?format=json');
        if (response.ok) {
            const data = await response.json();
            console.log(`=> ${JSON.stringify(data)}`);
            retValue.ResultText = data.ip;
            return retValue;
        } else {
            throw new Error('Failed to fetch data');
        }
    } catch (error) {
        console.error('Error:', error);
        retValue.Message = `Error: ${error}`
        retValue.Result = false;
        return retValue;
    }
}
await getIPAddress();

which works fine when used in MS Edge browser’s DevTools:

But when I’m trying to execute this script using MS WebView2 control’s .ExecuteScriptAsync(...) method then I’m getting null, and when I’m trying to execute this script using WebView2.DevTools.Dom‘s EvaluateFunctionAsync(...) method then I’m getting error Evaluation failed: SyntaxError: Unexpected reserved word.