Category: javascript

I’m trying to publish my electron app, And I’m using the following code in the package.json:

  "packagerConfig": {
    "icon": "./src/icon.ico"
  },

But when I use electron forge and look into out/win32-x64 directory, the single executable is the default electron icon, when I run it the icon appears both in the app top right corner, as well as the shortcut icon.

I’ve scoured the internet and couldn’t find a fix for this.

Heres the github with the code: https://github.com/Paxxous/Extremely-minamilistic-text-editor

I have an Application that Clients Install:

• C++, Compiled with CMake on Windows
• GUI that Generates Website Packages (HTML, JS, CSS files) for Users to then host
• The Application builds these files both dynamically and from amending boiler plates, all on the Client’s PC
• Simple installation, not requiring anything outside installation package.

I need these generated files to be minified.

Solution Examples:

• UglifyJS 3 https://github.com/mishoo/UglifyJS#readme
• Minify https://github.com/matthiasmullie/minify
• Closure Compiler https://developers.google.com/closure/compiler/
• Any Online Copy-Paste Minifier

I discovered this is generally done host/developer side, keeping the ordinal code and hosting the minified version, thus solutions end up being made with Node.Js, PHP, are tools with a GUI/Commandline interface, or are Online services.

Due to all of this I cannot find a way to include a minifier in my Application, such that the user doesn’t need to mess with anything outside of the installation package. No one seems to one that would be easy to link my project to (such as a C++ library), due to this not usually being done client side (I know that in this scenario my “client” would be the host, but the purpose of this software is to handle all of the work, except hosting, for the web applications it builds).

Question:

Would I need to build my own rudimentary minifier or is there a way to incorporate theses tools into my software that I am unaware of?

I’m fetching data from an API and then I save an array inside a state. While I’m trying to modify the specific field in object inside an array using input, I’m getting the following error: ‘Uncaught TypeError: Cannot assign to read only property ‘amount’ of object ‘#”.

States (I’m using RTK Query):

const { data: Florists_data, refetch } = useGetFloristQuery(Number(sessionStorage.getItem('florist_id')));
const [flowersData, setFlowersData] = useState(Florists_data?.florist[0].flowers);
const [tmpFlowers, setTmpFlowers] = useState(Florists_data?.florist[0].flowers);

Update function:

const updateFieldChanged = (index: number, e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        let newArr = [...tmpFlowers!];
        newArr[index].amount = Number(e.target.value); //GETTING ERROR HERE
        setTmpFlowers(newArr);
    }

Inputs:

{flowersData?.map((flower, index) => {
  return (
    <>
      <div className={classes.Nested_Flower_Container} key={index}>
        <div className={classes.Nested_Flower_Name}>
          {flower.name}
        </div>
        <div className={classes.Nested_Flower_Input} style={{ marginRight: '0.2em' }}>
          <TextField
            id="Amount"
            label="Amount"
            variant="outlined"
            size="small"
            type="number"
            onChange={(e) => {
              updateFieldChanged(index, e);
            }}
            className={classes_2.root}
            />
        </div>
      </div>
    </>)
})}

Trying to make this code display in a textbox instead of on the console… please give me some insight into what possibilities I could do.

package GetCalc;
import java.util.Scanner;

public class main {

public static void main(String[] args) {
    char operator;
    double num1, num2;
    Scanner input = new Scanner(System.in);
    
    System.out.println("Enter the operator ( + , - ,*, /)");
    operator = input.next().charAt(0);
    
    System.out.println("Enter the two numbers one by one");
    num1 = input.nextDouble();
    num2 = input.nextDouble();
    
    input.close();
    
    switch (operator ) {
    case '+':
        System.out.printf("%.2f + %.2f = %.2f", num1,num2,(num1+num2));
        break;
    case '-':
        System.out.printf("%.2f - %.2f = %.2f", num1,num2,(num1-num2));
        break;
    case '*':
        System.out.printf("%.2f * %.2f = %.2f", num1,num2,(num1*num2));
        break;
    case '/':
        if(num2 != 0)
            System.out.printf("%.2f / %.2f = %.2f", num1,num2,(num1/num2));
        else
            System.out.println("Divide by zero situation");
        break;
        
        default:
            System.out.printf("%c is an invalid operator", operator);
    }
    
}

}

I’m trying to create a class with some fields on Google Scripts. I can’t even save the file. From what I understand of this SO answer, I’m using the correct syntac for class fields.

V8 runtime is enabled.

The error:

Syntax error: ParseError: Unexpected token = line: 5 file: Airtable_Class.gs

Line 5 is: foo = "bar";

Here’s the whole code:

class FieldsTest{
  foo = "bar";
}

the problem is with zIndex/elevation but I couldn’t find a solution.

source code

Following this simple example:

let number = 12;
let string1 = '12';
let string2 = number.toString();

let regex = new RegExp('^[0-9]+$', 'g');

console.log(string1 === string2); // true
console.log(regex.test(string1)); // true
console.log(regex.test(string2)); // false

Why is outcome of test function different on equal strings, where only difference is one was casted to String from Number?

Trying to get 10 messages from every channel in a guild and read the contents then see if they contain a certain string but getting the error below

TypeError: Cannot read properties of undefined (reading 'fetch')

This is my code

interaction.guild.channels.cache.forEach(c => {
   c.messages.fetch({limit: 10}).then(msgs => {
      msgs.forEach(m => {
         if (m.content.includes(interaction.options.getString('text',true))) {
            // will do stuff here
         }
      }).catch(err => console.error(err))
   })
})

I was trying to implement my own version of the Space Warp effect in three JS
in React, by implementing a Component class with the mount and unmount functions.

However, I encountered two problems which I cannot seem to fix. There is no error message being displayed by the console. The problems are the following:

1. The scene does not render at all, and there is no error being displayed in the console. The scene is called by the App() function.
2. When I change something and save, I get the following error:
   Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at ThreeSection.componentWillUnmount

This is my code:

import React, { Component } from 'react';
import * as THREE from "three";


class ThreeSection extends Component{

  componentDidMount(){
 
      this.starGeo = []
      this.stars = []
      this.dVelocities = []
      this.dAccelerations = []

      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight, 1, 2000);
      this.camera.position.z = 1;
      this.camera.rotation.x = Math.PI/2;

      this.renderer = new THREE.WebGLRenderer({ antialias: true })
      this.renderer.setSize(window.innerWidth, window.innerHeight);

      let numOfImages = 13;
      let n = numOfImages > 1000 ? 1 : 1000 / numOfImages;

      for(let i = 0; i<numOfImages; i++) {

          const geom = new THREE.BufferGeometry();
          const vertices = [];
          const velocities = [];
          const accelerations = [];

          for(let j=0; j < n; j++) {
              vertices.push(
              Math.random() * 600 - 300,
              Math.random() * 600 - 30,
              Math.random() * 600 - 300
              );

              velocities.push( 0 );
              accelerations.push( 0.2 );
          }

          geom.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

          this.starGeo.push(geom);

          const sprite = new THREE.TextureLoader().load("images/" + (i + 1) + ".png");
          const material = new THREE.PointsMaterial({
              color: 0xaaaaaa,
              size: 30,
              map: sprite
          });

          this.stars = new THREE.Points( geom, material ); //stars.push( new THREE.Points(starGeo[i],starMaterial) );
          this.scene.add(this.stars);

          this.dAccelerations.push(accelerations);
          this.dVelocities.push(velocities);
  }

      this.start()
  }
  componentWillUnmount(){
      this.stop()
      this.mount.removeChild(this.renderer.domElement)
  }

  start = () => {
      if (!this.frameId) {
        this.frameId = requestAnimationFrame(this.animate)
      }
    }
  stop = () => {
      cancelAnimationFrame(this.frameId)
    }
  animate = () => {
      for(let j=0; j < this.starGeo.length; j++) {


          const positionAttribute = this.starGeo[j].getAttribute( 'position' );

              for ( let i = 0; i < positionAttribute.count; i ++ ) {

                      let z = positionAttribute.getZ( i );  

                      let vel = this.dVelocities[j][ i ];
                      let accel = this.dAccelerations[j][ i ];
                      vel += accel;
                      this.dVelocities[j][ i ] = vel;
                      z -= vel;

                      if (z < 0 - Math.random() * 1000) {
                          z = 2000;
                          this.dVelocities[j][ i ] = 0;
                      }

                      positionAttribute.setZ( i, z );
              }

              positionAttribute.needsUpdate = true;
          //stars[i].rotation.y +=0.0025;
      }
  
     this.renderScene()
     this.frameId = window.requestAnimationFrame(this.animate)
   }
  renderScene = () => {
    this.renderer.render(this.scene, this.camera)
  }
  render(){
      return(
        <div

          ref={(mount) => { this.mount = mount }}
        ></div>
      )
    }
  }

export default ThreeSection;

I try to send a data called favProduct to Favourites component. When I send the data, I get undefined. How can I send a data when I use react route?

const [favProduct, setFavProduct] = useState([1,2,3,4,5]);


  return (
    <Router>
      <div className="App">
        <Header />
        <Switch>
          <Route path="/" exact component={Home}/>
          <Route path="/men" component={Men} />
          <Route path="/women" component={Women} />
          <Route path="/kids" component={Kids} />
          <Route path="/productBuy" component={ProductBuy} />
          <Route path="/favourites" component={Favourites} />
          <Route path="/cart" component={Cart} />
          <Route path="/checkout" component={Checkout} />
          <Route path="/addproduct" component={AddProduct} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

How can I get the new console.log output after my JSON file has changed? I have a function

index.getCurrentPlaying();

This function requests data from the Last FM API, and it is working perfectly. It updates the output.json file with the new data.
I want to console.log this new data, but it does console.log on the old data, and I get the same song, even though the song has changed.
So it should look like this

NF - Thinking

Glass Animals - Life Itself

So I want the songs to change like that.

How can I fix this? Thanks for any help.
https://paste.ee/p/1eAF1

I am using VueDraggable component [https://www.npmjs.com/package/vuedraggable], which is based on the SortableJS [https://github.com/SortableJS/Sortable].

So the issue I am having is, that when I have a draggable element inside the modal and if I reoder some draggable element and try close the modal by clicking outside, I have to click outside twice.

But if I do the same thing and close modal by clicking on the close btn [the X icon], then it closes at single click.

Has anyone had this issues and solved it in the past?

I use these codes to change the value of a field. Only the first two lines run, I tried the rest of the code but it did not work and sometimes the message “Uncaught ReferenceError: $ is not defined” is displayed on the console.

document.getElementsByName('tmcp_textfield_6').value = Pak;
document.getElementById("tmcp_textfield_116202d52cbd078").value = Pak;
$("input[name='tmcp_textfield_6']").val(Pak);
document.getElementsByName("tmcp_textfield_6").value = 100;
document.getElementByname("tmcp_textfield_6").value = "100";
$("input[name='tmcp_textfield_6']").val(Pak); 

Hello im trying to load all file names from a folder.

im using this script and it returns a response object called data. When i use console.log on data it returns me to html below. how can i now collect all the file names out of there and write it into the variable fileNames?

my script:

var fileNames= "";
var folder = "csvData/";
    $.ajax({
          type: 'GET',
          url:  folder, 

          success: function(data){
              console.log(data);
          },
          async:false
      });

html inside of data response:
a the bottom you can see that a function is called for each file in the folder.

<!DOCTYPE html>

<html dir="ltr" lang="de">

<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<meta name="google" value="notranslate">

<script>
function addRow(name, url, isdir,
    size, size_string, date_modified, date_modified_string) {
  if (name == "." || name == "..")
    return;

  var root = document.location.pathname;
  if (root.substr(-1) !== "/")
    root += "/";

  var tbody = document.getElementById("tbody");
  var row = document.createElement("tr");
  var file_cell = document.createElement("td");
  var link = document.createElement("a");

  link.className = isdir ? "icon dir" : "icon file";

  if (isdir) {
    name = name + "/";
    url = url + "/";
    size = 0;
    size_string = "";
  } else {
    link.draggable = "true";
    link.addEventListener("dragstart", onDragStart, false);
  }
  link.innerText = name;
  link.href = root + url;

  file_cell.dataset.value = name;
  file_cell.appendChild(link);

  row.appendChild(file_cell);
  row.appendChild(createCell(size, size_string));
  row.appendChild(createCell(date_modified, date_modified_string));

  tbody.appendChild(row);
}

function onDragStart(e) {
  var el = e.srcElement;
  var name = el.innerText.replace(":", "");
  var download_url_data = "application/octet-stream:" + name + ":" + el.href;
  e.dataTransfer.setData("DownloadURL", download_url_data);
  e.dataTransfer.effectAllowed = "copy";
}

function createCell(value, text) {
  var cell = document.createElement("td");
  cell.setAttribute("class", "detailsColumn");
  cell.dataset.value = value;
  cell.innerText = text;
  return cell;
}

function start(location) {
  var header = document.getElementById("header");
  header.innerText = header.innerText.replace("LOCATION", location);

  document.getElementById("title").innerText = header.innerText;
}

function onHasParentDirectory() {
  var box = document.getElementById("parentDirLinkBox");
  box.style.display = "block";

  var root = document.location.pathname;
  if (!root.endsWith("/"))
    root += "/";

  var link = document.getElementById("parentDirLink");
  link.href = root + "..";
}

function sortTable(column) {
  var theader = document.getElementById("theader");
  var oldOrder = theader.cells[column].dataset.order || '1';
  oldOrder = parseInt(oldOrder, 10)
  var newOrder = 0 - oldOrder;
  theader.cells[column].dataset.order = newOrder;

  var tbody = document.getElementById("tbody");
  var rows = tbody.rows;
  var list = [], i;
  for (i = 0; i < rows.length; i++) {
    list.push(rows[i]);
  }

  list.sort(function(row1, row2) {
    var a = row1.cells[column].dataset.value;
    var b = row2.cells[column].dataset.value;
    if (column) {
      a = parseInt(a, 10);
      b = parseInt(b, 10);
      return a > b ? newOrder : a < b ? oldOrder : 0;
    }

    // Column 0 is text.
    if (a > b)
      return newOrder;
    if (a < b)
      return oldOrder;
    return 0;
  });

  // Appending an existing child again just moves it.
  for (i = 0; i < list.length; i++) {
    tbody.appendChild(list[i]);
  }
}

// Add event handlers to column headers.
function addHandlers(element, column) {
  element.onclick = (e) => sortTable(column);
  element.onkeydown = (e) => {
    if (e.key == 'Enter' || e.key == ' ') {
      sortTable(column);
      e.preventDefault();
    }
  };
}

function onLoad() {
  addHandlers(document.getElementById('nameColumnHeader'), 0);
  addHandlers(document.getElementById('sizeColumnHeader'), 1);
  addHandlers(document.getElementById('dateColumnHeader'), 2);
}

window.addEventListener('DOMContentLoaded', onLoad);
</script>

<style>

  h1 {
    border-bottom: 1px solid #c0c0c0;
    margin-bottom: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
  }

  table {
    border-collapse: collapse;
  }

  th {
    cursor: pointer;
  }

  td.detailsColumn {
    padding-inline-start: 2em;
    text-align: end;
    white-space: nowrap;
  }

  a.icon {
    padding-inline-start: 1.5em;
    text-decoration: none;
    user-select: auto;
  }

  a.icon:hover {
    text-decoration: underline;
  }

  a.file {
    background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABEElEQVR42nRRx3HDMBC846AHZ7sP54BmWAyrsP588qnwlhqw/k4v5ZwWxM1hzmGRgV1cYqrRarXoH2w2m6qqiqKIR6cPtzc3xMSML2Te7XZZlnW7Pe/91/dX47WRBHuA9oyGmRknzGDjab1ePzw8bLfb6WRalmW4ip9FDVpYSWZgOp12Oh3nXJ7nxoJSGEciteP9y+fH52q1euv38WosqA6T2gGOT44vry7BEQtJkMAMMpa6JagAMcUfWYa4hkkzAc7fFlSjwqCoOUYAF5RjHZPVCFBOtSBGfgUDji3c3jpibeEMQhIMh8NwshqyRsBJgvF4jMs/YlVR5KhgNpuBLzk0OcUiR3CMhcPaOzsZiAAA/AjmaB3WZIkAAAAASUVORK5CYII=") left top no-repeat;
  }

  a.dir {
    background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABt0lEQVR42oxStZoWQRCs2cXdHTLcHZ6EjAwnQWIkJyQlRt4Cd3d3d1n5d7q7ju1zv/q+mh6taQsk8fn29kPDRo87SDMQcNAUJgIQkBjdAoRKdXjm2mOH0AqS+PlkP8sfp0h93iu/PDji9s2FzSSJVg5ykZqWgfGRr9rAAAQiDFoB1OfyESZEB7iAI0lHwLREQBcQQKqo8p+gNUCguwCNAAUQAcFOb0NNGjT+BbUC2YsHZpWLhC6/m0chqIoM1LKbQIIBwlTQE1xAo9QDGDPYf6rkTpPc92gCUYVJAZjhyZltJ95f3zuvLYRGWWCUNkDL2333McBh4kaLlxg+aTmyL7c2xTjkN4Bt7oE3DBP/3SRz65R/bkmBRPGzcRNHYuzMjaj+fdnaFoJUEdTSXfaHbe7XNnMPyqryPcmfY+zURaAB7SHk9cXSH4fQ5rojgCAVIuqCNWgRhLYLhJB4k3iZfIPtnQiCpjAzeBIRXMA6emAqoEbQSoDdGxFUrxS1AYcpaNbBgyQBGJEOnYOeENKR/iAd1npusI4C75/c3539+nbUjOgZV5CkAU27df40lH+agUdIuA/EAgDmZnwZlhDc0wAAAABJRU5ErkJggg==") left top no-repeat;
  }

  a.up {
    background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACM0lEQVR42myTA+w1RxRHz+zftmrbdlTbtq04qRGrCmvbDWp9tq3a7tPcub8mj9XZ3eHOGQdJAHw77/LbZuvnWy+c/CIAd+91CMf3bo+bgcBiBAGIZKXb19/zodsAkFT+3px+ssYfyHTQW5tr05dCOf3xN49KaVX9+2zy1dX4XMk+5JflN5MBPL30oVsvnvEyp+18Nt3ZAErQMSFOfelCFvw0HcUloDayljZkX+MmamTAMTe+d+ltZ+1wEaRAX/MAnkJdcujzZyErIiVSzCEvIiq4O83AG7LAkwsfIgAnbncag82jfPPdd9RQyhPkpNJvKJWQBKlYFmQA315n4YPNjwMAZYy0TgAweedLmLzTJSTLIxkWDaVCVfAbbiKjytgmm+EGpMBYW0WwwbZ7lL8anox/UxekaOW544HO0ANAshxuORT/RG5YSrjlwZ3lM955tlQqbtVMlWIhjwzkAVFB8Q9EAAA3AFJ+DR3DO/Pnd3NPi7H117rAzWjpEs8vfIqsGZpaweOfEAAFJKuM0v6kf2iC5pZ9+fmLSZfWBVaKfLLNOXj6lYY0V2lfyVCIsVzmcRV9Y0fx02eTaEwhl2PDrXcjFdYRAohQmS8QEFLCLKGYA0AeEakhCCFDXqxsE0AQACgAQp5w96o0lAXuNASeDKWIvADiHwigfBINpWKtAXJvCEKWgSJNbRvxf4SmrnKDpvZavePu1K/zu/due1X/6Nj90MBd/J2Cic7WjBp/jUdIuA8AUtd65M+PzXIAAAAASUVORK5CYII=") left top no-repeat;
  }

  html[dir=rtl] a {
    background-position-x: right;
  }

  #parentDirLinkBox {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
</style>

<title id="title"></title>

</head>

<body>

<h1 id="header">Index von LOCATION</h1>

<div id="parentDirLinkBox" style="display:none">
  <a id="parentDirLink" class="icon up">
    <span id="parentDirText">[übergeordnetes Verzeichnis]</span>
  </a>
</div>

<table>
  <thead>
    <tr class="header" id="theader">
      <th id="nameColumnHeader" tabindex=0 role="button">Name</th>
      <th id="sizeColumnHeader" class="detailsColumn" tabindex=0 role="button">
        Größe
      </th>
      <th id="dateColumnHeader" class="detailsColumn" tabindex=0 role="button">
        Änderungsdatum
      </th>
    </tr>
  </thead>
  <tbody id="tbody">
  </tbody>
</table>

</body>

</html>
<script>// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @fileoverview This file defines a singleton which provides access to all data
 * that is available as soon as the page's resources are loaded (before DOM
 * content has finished loading). This data includes both localized strings and
 * any data that is important to have ready from a very early stage (e.g. things
 * that must be displayed right away).
 *
 * Note that loadTimeData is not guaranteed to be consistent between page
 * refreshes (https://crbug.com/740629) and should not contain values that might
 * change if the page is re-opened later.
 */

/** @type {!LoadTimeData} */
// eslint-disable-next-line no-var
var loadTimeData;

class LoadTimeData {
  constructor() {
    /** @type {?Object} */
    this.data_ = null;
  }

  /**
   * Sets the backing object.
   *
   * Note that there is no getter for |data_| to discourage abuse of the form:
   *
   *     var value = loadTimeData.data()['key'];
   *
   * @param {Object} value The de-serialized page data.
   */
  set data(value) {
    expect(!this.data_, 'Re-setting data.');
    this.data_ = value;
  }

  /**
   * @param {string} id An ID of a value that might exist.
   * @return {boolean} True if |id| is a key in the dictionary.
   */
  valueExists(id) {
    return id in this.data_;
  }

  /**
   * Fetches a value, expecting that it exists.
   * @param {string} id The key that identifies the desired value.
   * @return {*} The corresponding value.
   */
  getValue(id) {
    expect(this.data_, 'No data. Did you remember to include strings.js?');
    const value = this.data_[id];
    expect(typeof value !== 'undefined', 'Could not find value for ' + id);
    return value;
  }

  /**
   * As above, but also makes sure that the value is a string.
   * @param {string} id The key that identifies the desired string.
   * @return {string} The corresponding string value.
   */
  getString(id) {
    const value = this.getValue(id);
    expectIsType(id, value, 'string');
    return /** @type {string} */ (value);
  }

  /**
   * Returns a formatted localized string where $1 to $9 are replaced by the
   * second to the tenth argument.
   * @param {string} id The ID of the string we want.
   * @param {...(string|number)} var_args The extra values to include in the
   *     formatted output.
   * @return {string} The formatted string.
   */
  getStringF(id, var_args) {
    const value = this.getString(id);
    if (!value) {
      return '';
    }

    const args = Array.prototype.slice.call(arguments);
    args[0] = value;
    return this.substituteString.apply(this, args);
  }

  /**
   * Returns a formatted localized string where $1 to $9 are replaced by the
   * second to the tenth argument. Any standalone $ signs must be escaped as
   * $$.
   * @param {string} label The label to substitute through.
   *     This is not an resource ID.
   * @param {...(string|number)} var_args The extra values to include in the
   *     formatted output.
   * @return {string} The formatted string.
   */
  substituteString(label, var_args) {
    const varArgs = arguments;
    return label.replace(/$(.|$|n)/g, function(m) {
      expect(m.match(/$[$1-9]/), 'Unescaped $ found in localized string.');
      return m === '$$' ? '$' : varArgs[m[1]];
    });
  }

  /**
   * Returns a formatted string where $1 to $9 are replaced by the second to
   * tenth argument, split apart into a list of pieces describing how the
   * substitution was performed. Any standalone $ signs must be escaped as $$.
   * @param {string} label A localized string to substitute through.
   *     This is not an resource ID.
   * @param {...(string|number)} var_args The extra values to include in the
   *     formatted output.
   * @return {!Array<!{value: string, arg: (null|string)}>} The formatted
   *     string pieces.
   */
  getSubstitutedStringPieces(label, var_args) {
    const varArgs = arguments;
    // Split the string by separately matching all occurrences of $1-9 and of
    // non $1-9 pieces.
    const pieces = (label.match(/($[1-9])|(([^$]|$([^1-9]|$))+)/g) ||
                    []).map(function(p) {
      // Pieces that are not $1-9 should be returned after replacing $$
      // with $.
      if (!p.match(/^$[1-9]$/)) {
        expect(
            (p.match(/$/g) || []).length % 2 === 0,
            'Unescaped $ found in localized string.');
        return {value: p.replace(/$$/g, '$'), arg: null};
      }

      // Otherwise, return the substitution value.
      return {value: varArgs[p[1]], arg: p};
    });

    return pieces;
  }

  /**
   * As above, but also makes sure that the value is a boolean.
   * @param {string} id The key that identifies the desired boolean.
   * @return {boolean} The corresponding boolean value.
   */
  getBoolean(id) {
    const value = this.getValue(id);
    expectIsType(id, value, 'boolean');
    return /** @type {boolean} */ (value);
  }

  /**
   * As above, but also makes sure that the value is an integer.
   * @param {string} id The key that identifies the desired number.
   * @return {number} The corresponding number value.
   */
  getInteger(id) {
    const value = this.getValue(id);
    expectIsType(id, value, 'number');
    expect(value === Math.floor(value), 'Number isn't integer: ' + value);
    return /** @type {number} */ (value);
  }

  /**
   * Override values in loadTimeData with the values found in |replacements|.
   * @param {Object} replacements The dictionary object of keys to replace.
   */
  overrideValues(replacements) {
    expect(
        typeof replacements === 'object',
        'Replacements must be a dictionary object.');
    for (const key in replacements) {
      this.data_[key] = replacements[key];
    }
  }

  /**
   * Reset loadTimeData's data. Should only be used in tests.
   * @param {?Object} newData The data to restore to, when null restores to
   *    unset state.
   */
  resetForTesting(newData = null) {
    this.data_ = newData;
  }

  /**
   * @return {boolean} Whether loadTimeData.data has been set.
   */
  isInitialized() {
    return this.data_ !== null;
  }
}

  /**
   * Checks condition, throws error message if expectation fails.
   * @param {*} condition The condition to check for truthiness.
   * @param {string} message The message to display if the check fails.
   */
  function expect(condition, message) {
    if (!condition) {
      throw new Error(
          'Unexpected condition on ' + document.location.href + ': ' + message);
    }
  }

  /**
   * Checks that the given value has the given type.
   * @param {string} id The id of the value (only used for error message).
   * @param {*} value The value to check the type on.
   * @param {string} type The type we expect |value| to be.
   */
  function expectIsType(id, value, type) {
    expect(
        typeof value === type, '[' + value + '] (' + id + ') is not a ' + type);
  }

  expect(!loadTimeData, 'should only include this file once');
  loadTimeData = new LoadTimeData;

  // Expose |loadTimeData| directly on |window|, since within a JS module the
  // scope is local and not all files have been updated to import the exported
  // |loadTimeData| explicitly.
  window.loadTimeData = loadTimeData;

  console.warn('crbug/1173575, non-JS module files deprecated.');</script><script>loadTimeData.data = {"header":"Index von LOCATION","headerDateModified":"Änderungsdatum","headerName":"Name","headerSize":"Größe","language":"de","parentDirText":"[übergeordnetes Verzeichnis]","textdirection":"ltr"};</script><script>start("C:\Users\MYNAME-\eclipse-workspace\htmlCsvtable\src\htmlTableGeneration\csvData\");</script>
<script>onHasParentDirectory();</script>
<script>addRow("20220201221359.csv","20220201221359.csv",0,2959,"2.9 kB",1644181136,"06.02.22, 21:58:56");</script>
<script>addRow("20220206091030.csv","20220206091030.csv",0,2958,"2.9 kB",1644181136,"06.02.22, 21:58:56");</script>
<script>addRow("20220206135359.csv","20220206135359.csv",0,2959,"2.9 kB",1644181136,"06.02.22, 21:58:56");</script>

As example, I dynamically create instance of some custom HTML element.
After this, I twice use document.body.appendChild() and this work, but this should no be. What I may do for prevent this?

I put sample about this situation below in the text. RandomParagraphSizePlaceholder is simple web-component from some book. I use it only for illustration purposes.

https://jsfiddle.net/h6cxjae5/