Category: javascript

Category Added in a WPeMatico Campaign

How would i control a bot via the command console its running in? (discord.js)

ok so how would i go about making it so when i type a message in the command console, the bot repeats that message to a discord text channel in a server (using the ID of the channel ofc)

i just dont want to have to run any /say commands or anything stupid, i just want to allow the bot to say things using command prompt.

i used a thread a while ago to do it but i reset my PC and i cannot find the code no longer.
i no longer remember how to access command line messages to run commands. if someone could help thatd be Super appreciated

Website Dropdown Menu Function Not Working in JavaScript

I am web developing on replit and my button for dropdown menu is returning
ReferenceError: dropdown is not definedhttps://59b81476-925b-4a14-9d8a-26727de7f565.id.repl.co/:1
at HTMLButtonElement.onclick (https://59b81476-925b-4a14-9d8a-26727de7f565.id.repl.co/:1:447). I have changed around the variables and thought that adding return to the code would work but it has not helped. All I want is to drop down the list of href.

Javascript

function dropdown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    return i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      return openDropdown;
      if (openDropdown.classList.contains('show')) {
        return openDropdown.classList.remove('show');
      }
    }
  }
}

HTML

 <html>
 <body> 
 <div class="container">
   <div class="dropdown">
     <button onclick="dropdown(this)" class="dropbtn">
       <div class="bar1"></div>
       <div class="bar2"></div>
       <div class="bar3"></div>
     </button>
       <div id="myDropdown" class="dropdown-content">
         <a href="#home">Home</a>
         <a href="#contact">Contact</a>
         <a href="#work-experience">Work Experience</a>
         <a href="#website-code">Website Code</a>
       </div>
     </div>
 </body>
 </html>

CSS

.container {
  position: fixed;
  display: inline-block;
  top: 5%;
  left: 5%;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #ffffff;
  margin: 6px 0;
  transition: 0.4s;
}
.dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #222a2f;
}

.dropdown {
  position: fixed;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

Again I added return at the end of the function, checked variable names, and none worked. Could it perhaps be an error with replit or what area is wrong?

Setting image width dynamically only works from variable

I am trying to display images in the browser. I want them to display proportional to each other, so I am scaling them down by the size of the actual image. They have all been scanned at the same resolution, so it will make their sizes proportional. Here is the function to set their size:

let imageSize = (image)=>{
    let multiplier = screen.width > 1200 ? 0.35 : 0.15;
    let width = `${image.clientWidth * multiplier}px`;
    image.style.height = `${image.clientHeight * multiplier}px`;
    image.style.width = width;
}

This works. However, I have to create a variable for width. If I try to set the width the same way I am setting height, it doesn’t work. For example:

let imageSize = (image)=>{
    let multiplier = screen.width > 1200 ? 0.35 : 0.15;
    image.style.height = `${image.clientHeight * multiplier}px`;
    image.style.width = `${image.clientWidth * multiplier}px`;
}

This does not work. The width of the image ends up being WAY too small and distorting the image. I checked and the same thing is happening in both Firefox and Chrome.

This only applies to the width. the height seems to work normally. What the hell is going on here? This doesn’t make any sense to me. Can anybody shed any light on why this might be happening?

How to correctly create a dropdown using NgBootstrap

I’m very new to angular as i’m leaning it right now in a intnership.
However, i would like to learn how to correctly set a dynamic dropdown in ngBootstap as i’m getting the following error: Error

Here’s my HTML:

parent:

<div class="container" id="container">
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
      Dropdown button
    </button>
    <div app-city-details-component *ngFor="let city of cityArray" [city]="city" ngbDropdownMenu>
    </div>
  </div>

Child:

<div class="container" id="container" ngbDropdownItem>
<button class="button" type="button" (click)="handleClick()">
    <p>{{city.name}}</p>
    <p>Latitudine: {{latitudine}}</p>
    <p>Longitudine: {{longitudine}}</p>
    <p>Timezone: {{timezone}}</p>
    <div app-show-weather-conditions [weather]="currentRealWeather"></div>
</button>

My app.module.ts:

app.module.ts

What i’m doing wrog?

report.Cucumber.io is it possible to give a report a name

List of cucumber reports

Is it possible to give these reports a name?
The reports are created when ran using GitAction, the image is a list of reports but they have no name so its hard to make find out which report is linked to which git action? Its set up using playwright JS and cucumber.

Nothing at the moment, ive tried asking OpenAI for an answer but it gives me solutions for feature files where as i want to give a name to the entire report after the report is generated when ran using GitAction

JSInvokable Blazor method not being called

I’m trying to invoke a Blazor method in JavaScript inside of an OnSuccess callback for the Plaid API.

Here’s the JavaScript that’s being run:

async function InitializePlaidLink(objRef, linkToken) {
    //console.log("linkToken:" + linkToken);

    const handler = Plaid.create({
        token: linkToken,
        onSuccess: (public_token, metadata) => {
            //console.log("public_token: ");
            //console.log(public_token);
            objRef.invokeMethodAsync('OnPlaidLinkSuccess', public_token);
            //console.log("After Invoke Method Async")
        },
        onLoad: () => {},
        onExit: (err, metadata) => {},
        onEvent: (eventName, metadata) => {},
        //required for OAuth; if not using OAuth, set to null or omit:
        //receivedRedirectUri: window.location.href,
    });

    handler.open();
}

Here’s the Blazor code being used:

private string LinkToken { get; set; } = string.Empty;

private string PublicToken { get; set; } = string.Empty;

private async Task InitializePlaid()
{
    this.LinkToken = await this.apiService.GetPlaidLinkToken();

    var dotNetReference = DotNetObjectReference.Create(this);

    await this.jsRuntime.InvokeVoidAsync
        (
            "InitializePlaidLink",
            dotNetReference,
            this.LinkToken
        );
}

[JSInvokable]
public void OnPlaidLinkSuccess(string publicToken)
{
    this.PublicToken = publicToken;
}

The Blazor method InitializePlaid is being called to invoke the JS method InitializePlaidLink. Then, on success, the Blazor method OnPlaidLink Success should be called.

I used log statements to confirm that there is a public_token and the JS after the objRef.invokeMethodAsync() is being reached. Also I was able to invoke a Blazor method in a similar way with a different JS method, just not a method with the Plaid API and the onSuccess callback.

crypto.subtle decrypting compact jwe with ECDH-ES+A128KW – The operation failed for an operation-specific reason

I am trying to decrypt a compact JWE formatted response message with the crypto.subtle libraries.
I am sending to the Server my public key in JWK format with curve algo ECDH-ES+A128KW, encryption A256GCM, curve name P-256.
The server sends me back a compact JWE response.
As I understand this flow, it should be something like:

  • Client sends the public key to the Server
  • Server responds to client back the compact JWE message
  • Client derives the shared AES 128 KW key based on servers public key and own private key
  • Client unwraps the AES 128 GCM key using the shared AES 128 KW key
  • Clients decrypts the ciphertext using the AES 128 GCM key.

When my code reaches the unwrapKey step, i am only getting the error The operation failed for an operation-specific reason. At the moment I fail to find the problem.

My code looks like this right now:

export const decryptCompactJWE = async (
  compactJWE: string,
  privateKey: CryptoKey
) => {
  const [protectedHeader, encryptedKey, iv, ciphertext, tag] =
    compactJWE.split(".");

  const header = JSON.parse(Buffer.from(protectedHeader, "base64").toString());
  console.log("header:", header);

  const publicKey = await crypto.subtle.importKey(
    "jwk",
    header.epk,
    {
      name: "ECDH",
      namedCurve: "P-256",
    },
    true,
    ["deriveKey", "deriveBits"]
  );

  const derivedKey = await crypto.subtle.deriveKey(
    { name: "ECDH", public: publicKey },
    privateKey,
    { name: "AES-KW", length: 128 },
    true,
    ["unwrapKey"]
  );

  const myJWK = await crypto.subtle.exportKey("jwk", derivedKey);
  console.log("jwk", myJWK);

  const myAESKey = await crypto.subtle.unwrapKey(
    "raw",
    Buffer.from(encryptedKey, "base64url"),
    derivedKey,
    "AES-KW",
    { name: "AES-GCM" },
    false,
    ["decrypt"]
  );

  console.log(myAESKey);

  return crypto.subtle.decrypt(
    { name: "AES-GCM", iv: Buffer.from(iv, "base64url") },
    myAESKey,
    Buffer.from(ciphertext, "base64url")
  );
};

Here is my test data:

const privateKey = {
    kty: "EC",
    crv: "P-256",
    ext: true,
    key_ops: ["deriveKey", "deriveBits"],
    d: "vPZxnkg-j1xZ_8BZfH6jIvV52NvG2pxsZhmYgI9BEec",
    x: "CorZZG9qa5korQ6eVLenbFz2QyGKkpoEYlAJxF1JzGA",
    y: "yIEnQSGlMNVp6JEzZO3QvjQ0UDAwepzUZqwgsv0OTQE",
  };

const JWE_RESPONSE = "eyJhbGciOiJFQ0RILUVTK0ExMjhLVyIsImVuYyI6IkExMjhHQ00iLCJraWQiOiJhYmMxMjMiLCJlcGsiOnsia3R5IjoiRUMiLCJ4IjoiNmNReW1GUlJSTjVkVHdoOHA5dWx1NkgwS3paSkRGcm4xdjFKb2NzVURCUSIsInkiOiJTSGliQjFEMnBHMmVMbUxMV09HTTB4UUtCRDFpM3ZtZjJRNjZIM2RnbzJ3IiwiY3J2IjoiUC0yNTYifX0.OwriqBm-PXkIj_QwbqKZRVxql0sja2-p.UrZs5Ixu_rFCxpCw.z9Rfhw.m6AgqKsttsp9TV2dREgbWw";

So far I looked up a all examples I could find to implement this and based on those it kinda looks okay. The debugger is not stepping into the native crypto.subtle code and the error message is also not telling much about what is going wrong for me. The existing examples I found so far, are mostly less complex and skip the key derive part.

Serverless React – getting HTML from S3 Bucket – how to call async from sync

Based on this question I posted earlier today, I have added some logging and narrow in that the problem is with the s3.GetObject.

NOTE: I’ve seen about 6 different ways to do the S3 get object, and have tried a few of them. My mind is mush now…

This is my current code. I basically took the demo from Serverless/React (running on AWS Lambda) and am I’m just trying to load some HTML from S3 and show in the browser web page.
I’m trying to use React state to set the value on the web page to the value from S3 (based on dangerouslySetInnerHTML getting data from S3 bucket object in Serverless React).

Based on what I see in the log (see in yellow in picture below), I think await promise is the problem. It doesn’t seem to be waiting.

How do you call an async routine from a sync routine?
I tried an approach from this page, to wrap my call in a nameless async function.

import "./App.css";

import * as React from "react";

import useConfig from "./components/useConfig";
import logo from "./logo.svg";
import logoPsych from "./psych_mind_logo.jpg"


/**
 * Our Web Application
 */
export default function App() {

  console.log("Start: 'function App()'" );

  const [html, setHtml] = 
       React.useState<{ __html: string}>({ __html: '<h1>Blog goes here</h1>'})

  const config = useConfig();

  async function createPageBody() {

      console.log("function createPageBody");
      const AWS = require('aws-sdk');

      const params = {
        Bucket: 'mybucket',
        Key: 'myObjectFileName.html'
      }
      // console.log(params);
      let s3 = new AWS.S3();


      // getting the object with aws-sdk, ".promise()" is required to use async-await
      console.log("before await s3.getObject.promise");

      try {
          const output = await s3
            .getObject(params)
            .promise();
          console.log("after await s3.getObject.promise");
          const fileContents = output.Body?.toString() || "<h1>Failed to get S3 File/Body</h1>";
          console.log("S3 fileContents=");
          console.log(fileContents);
          setHtml({ __html: fileContents})      
      } catch (e) {
          console.log("s3.getObject: error=" + e.message); 
          setHtml({ __html: e.message})      
      }


      // output.Body contains the content of the S3 JSON file
      // we expect the file to not be empty, script doesn't fail if it is empty though


    return;  
           
  }         



  console.log("About to call createPageBody");
  (async() => {
      await createPageBody(); 
  })
  console.log("Back from call createPageBody");
  

  return (
    <div className="App">
      <header className="App-header">
         <img src={logoPsych} className="App-logo" alt="logo" />
         <h1 className="App-title">CognitivePsychology.com</h1>
      </header>
      <p className="App-intro">
            <div dangerouslySetInnerHTML={html} />
      </p>
    </div>
  );
}

This is what the CloudWatch log shows from the execution of the Lambda service. None of the falling logs show up there:

console.log("before await s3.getObject.promise");
console.log("after await s3.getObject.promise");
console.log("s3.getObject: error=" + e.message);

enter image description here

Some of my previous tests (before I put the nameless async around the call to createPageBody) have been showing “h1>Blog goes here” in the browser, the default value for the state. But the above code shows nothing in the browser.

NetSuite: How to set an eventhandler for cancel/avoid vendor bills

How can I listening the cancel/avoid vendor bill event.

I have this code to listening the “delete” event:

/**
 *@NApiVersion 2.1
 *@NScriptType UserEventScript
 */
define(["N/record", "N/https", "N/file", "./ent_sync_funciones"], (...args) => {


  const afterSubmit = (context) => {
    //I know this events, but in the netsuite doc has so many other events
    //context.UserEventType.CREATE
    //context.UserEventType.EDIT
    //context.UserEventType.DELETE
    if(context.UserEventType.DELETE){
      ....
    }
  };
  return {
    afterSubmit,
  };
});

but this not work for me, because the users don’t going to delete that.

Laravel 8 and ajax

Never used ajax before and I’m quite new to Laravel as well.
I’m running a function where it gets the information from the form and i have no idea how to do the request with the information that I need.

function myFunction() {
  var x = document.getElementById("frm1");
  //console.log(x.elements.personSearch.value);
var details = x.elements.personSearch.value;
document.getElementById("personValidation").innerHTML = "";

if (
        !details.match(
          /b[a-zA-Z ]*\[a-zA-Z ]*\[0-3][0-9][0-1][0-9][0-9]{4}b/g
        )
      ) {
        document.getElementById("personValidation").innerHTML =
          "Your search does not match the required format";
        return;
      }
      $.ajax({
        url: "/api/pnc/person",
        type: "POST",
        dataType: "json",
        success:function(amount) {
console.log(amount);
        }
    });
``` Javascript

public function person(Request $request)
{
$request->validate([
‘search’ => ‘required’
]);

return "test";

}

Display background image on switch statement

I posed this question earlier but had no success. I’m creating a personality quiz, and while my switch statement successfully displays the text in the format that I want, I don’t know how to display pictures that are unique to each statement. My code in full is here, but the switch statement in question is this excerpt, around line 657.

`write(“

Race:

“);

    switch (race) {
    case "human": 
        background = "none";
        backgroundImage = "url('https://static.wikia.nocookie.net/masseffect/images/1/16/Humansmasseffecticon.jpg/revision/latest?cb=20100110011026')";
        body.backgroundSize = "100% auto";
        write("<p style = 'font-size:12px'>Humans<//b> are... `

I’ve tried updating the code (I’m aware that it’s old, as it’s adopted from a 1999 quiz), but nothing I’ve tried can add images to the popout window other than including the same background image for the main page.

how to build a form whose fields which include select and textarea fit in a row using JS and Bootstrap 4?

I’ve been trying many fronts to get these fields to fit in a row, but no success and I’d appreciate some help.

The fields are built using JS as the user clicks on a button.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

<div id="new-content-form-horizontal">
  <div id="form-fields" class="row justify-content-around space-evenly">
    <form id="form" class="row">
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="monthSelect">Month</label>
          <select id="monthSelect">
            <option value="January">January</option>
            <option value="TBD">TBD</option>
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="statusSelect">Status</label>
          <select id="statusSelect">
            <option value="3. Uploading To Site">3. Uploading To Site</option>
            <option value="4. Published">4. Published</option>
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="title">Title</label><textarea id="myTextarea" class="form-control" rows="1"></textarea></div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="main-kw">Main KW</label><textarea id="main-kw" class="form-control" rows="1"></textarea></div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="typeSelect">Page Type</label>
          <select id="typeSelect">
            <option value="Home">Home</option>
            <option value="Services Page">Services Page</option>
            <option value="Local Landing Page">Local Landing Page</option>
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="new-rewrite">New or Rewrite</label>
          <select id="new-rewrite">
            <option value="New">New</option>
            <option value="Rewrite">Rewrite</option>
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="notes">Notes</label><textarea id="notes" class="form-control" rows="1"></textarea></div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="content-draft">Content Draft</label><textarea id="content-draft" class="form-control" rows="1"></textarea></div>
      </div>
      <div class="col-md-3 form-group">
        <div class="select-wrap"><label for="final-url">Final URL</label><textarea id="final-url" class="form-control" rows="1"></textarea></div>
      </div>
    </form>
  </div>
</div>
</div>

Texture coordinate inaccuracy

I am getting what looks like a precision problem at 16bit for texture uv. This might be common knowledge, and texture casting to normalized integer, but I could not find anything about that, nor would it make much sense to me (why degrade the coordinates at the last step?).

In real code (which is too long to show), this results in a texture bleed when zooming in too far, way before the expected issues for float32. The following demo has a lot of boilerplate, so here are the parts I think are important:

  • The test texture is a 512×512 checkerboard of 8×8 tiles, green and blue.
  • A square is rendered, with uv set to an 8×8 blue tile above the middle, sitting so it covers half the canvas.
  • const offset = -1 / (1 << bitsRequired); slightly shifts these uv on the y-axis.
  • const zoom = 2 ** (bitsRequired - 14); zooms in on the edge.

By construction, the uv offset is then set to a step that requires more than 16 bit. The zoom is chosen so exactly one green pixel should be rendered, without precision problems. However, at exactly 17 bit required precision, the pixel vanishes (at least for me, can always be dependent on hardware/driver/whatever).

At first, I thought I made a mistake. However, adding the rounding manually before the texture call, uncommenting the following, makes the green pixel line reappear:

vec2 texCoordRounded = vec2(
  (floor(vTextureCoord.x * 512.) + 0.5) / 512.,
  (floor(vTextureCoord.y * 512.) + 0.5) / 512.
);

Now I am confused. Did I miss something, or make a mistake? Does texture cast to some normalized integer? Why does this look like my precision runs out at 16 bit?

The following is copy&paste of the same code, with changed parameters (too cumbersome to parameterize this demo code):

With an offset requiring less than 16 bit, the green pixel line appears:

const assert = (condition, message) => {
  if (!condition) throw new Error(message);
};

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl2');
assert(gl !== null, `WebGL2 was unexpectedly not supported.`);

const testImage = new Uint8Array(Array.from(
  { length: 512 * 512 },
  (_, i) => (i % 16 > 7) !== (Math.floor(i / 512) % 16 > 7)
    ? [0, 0xff, 0, 0xff]
    : [0, 0, 0xff, 0xff],
).flat());
const bitsRequired = 16;
const offset = -1 / (1 << bitsRequired);
const vData = new Float32Array([
  -1, 0, 0, 0.5 + offset, 1, 0, 0.015625, 0.5 + offset,
  1, 2, 0.015625, 0.515625 + offset, -1, 2, 0, 0.515625 + offset,
]);
const zoom = 2 ** (bitsRequired - 14);
const projection = new Float32Array([
  zoom, 0,    0,     0,
  0,    zoom, 0,     0,
  0,    0,    -zoom, 0,
  0,    0,    0,     1,
]);

const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, testImage);

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);

const vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
gl.bufferData(gl.ARRAY_BUFFER, vData, gl.STATIC_DRAW);

const iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

const vertexShaderSrc = `#version 300 es
precision highp float;
uniform mat4 projection;
layout(location = 0) in vec2 aPosition;
layout(location = 1) in vec2 aTextureCoord;
out vec2 vTextureCoord;
void main(void) {
  gl_Position = projection * vec4(aPosition, 0.0, 1.0);
  vTextureCoord = aTextureCoord;
}`;

const fragmentShaderSrc = `#version 300 es
precision highp float;
uniform sampler2D sampler;
in vec2 vTextureCoord;
out vec4 fColor;

void main(void){
  // vec2 texCoordRounded = vec2(
    //   (floor(vTextureCoord.x * 512.) + 0.5) / 512.,
    //   (floor(vTextureCoord.y * 512.) + 0.5) / 512.
    // );
  // vec4 color = texture(sampler, texCoordRounded);
  vec4 color = texture(sampler, vTextureCoord);
  fColor = color;
}`;

const program = gl.createProgram();
assert(program !== null, `Program was unexpectedly `null`.`);

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
assert(vertexShader !== null, `Vertex-shader was unexpectedly `null`.`);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), `Vertex-shader failed to compile:n${gl.getShaderInfoLog(vertexShader)}`);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
assert(fragmentShader !== null, `Vertex-shader was unexpectedly `null`.`);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), `Fragment-shader failed to compile:n${gl.getShaderInfoLog(fragmentShader)}`);

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
assert(gl.getProgramParameter(program, gl.LINK_STATUS), `Program linking failed:n${gl.getProgramInfoLog(program)}`);

gl.useProgram(program);

const uniformLocationSampler = gl.getUniformLocation(program, 'sampler');
gl.uniform1i(uniformLocationSampler, 0);
const uniformLocationProjection = gl.getUniformLocation(program, 'projection');
gl.uniformMatrix4fv(uniformLocationProjection, false, projection);

gl.clearColor(0, 0, 0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
<canvas id='canvas' width='256' height='256'></canvas>

Changing bitsRequired to 17 (only change) causes the problem, the green pixel line disappears:

const assert = (condition, message) => {
  if (!condition) throw new Error(message);
};

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl2');
assert(gl !== null, `WebGL2 was unexpectedly not supported.`);

const testImage = new Uint8Array(Array.from(
  { length: 512 * 512 },
  (_, i) => (i % 16 > 7) !== (Math.floor(i / 512) % 16 > 7)
    ? [0, 0xff, 0, 0xff]
    : [0, 0, 0xff, 0xff],
).flat());
const bitsRequired = 17;
const offset = -1 / (1 << bitsRequired);
const vData = new Float32Array([
  -1, 0, 0, 0.5 + offset, 1, 0, 0.015625, 0.5 + offset,
  1, 2, 0.015625, 0.515625 + offset, -1, 2, 0, 0.515625 + offset,
]);
const zoom = 2 ** (bitsRequired - 14);
const projection = new Float32Array([
  zoom, 0,    0,     0,
  0,    zoom, 0,     0,
  0,    0,    -zoom, 0,
  0,    0,    0,     1,
]);

const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, testImage);

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);

const vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
gl.bufferData(gl.ARRAY_BUFFER, vData, gl.STATIC_DRAW);

const iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

const vertexShaderSrc = `#version 300 es
precision highp float;
uniform mat4 projection;
layout(location = 0) in vec2 aPosition;
layout(location = 1) in vec2 aTextureCoord;
out vec2 vTextureCoord;
void main(void) {
  gl_Position = projection * vec4(aPosition, 0.0, 1.0);
  vTextureCoord = aTextureCoord;
}`;

const fragmentShaderSrc = `#version 300 es
precision highp float;
uniform sampler2D sampler;
in vec2 vTextureCoord;
out vec4 fColor;

void main(void){
  // vec2 texCoordRounded = vec2(
    //   (floor(vTextureCoord.x * 512.) + 0.5) / 512.,
    //   (floor(vTextureCoord.y * 512.) + 0.5) / 512.
    // );
  // vec4 color = texture(sampler, texCoordRounded);
  vec4 color = texture(sampler, vTextureCoord);
  fColor = color;
}`;

const program = gl.createProgram();
assert(program !== null, `Program was unexpectedly `null`.`);

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
assert(vertexShader !== null, `Vertex-shader was unexpectedly `null`.`);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), `Vertex-shader failed to compile:n${gl.getShaderInfoLog(vertexShader)}`);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
assert(fragmentShader !== null, `Vertex-shader was unexpectedly `null`.`);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), `Fragment-shader failed to compile:n${gl.getShaderInfoLog(fragmentShader)}`);

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
assert(gl.getProgramParameter(program, gl.LINK_STATUS), `Program linking failed:n${gl.getProgramInfoLog(program)}`);

gl.useProgram(program);

const uniformLocationSampler = gl.getUniformLocation(program, 'sampler');
gl.uniform1i(uniformLocationSampler, 0);
const uniformLocationProjection = gl.getUniformLocation(program, 'projection');
gl.uniformMatrix4fv(uniformLocationProjection, false, projection);

gl.clearColor(0, 0, 0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
<canvas id='canvas' width='256' height='256'></canvas>

Activating the previously commented manual rounding before the texture call (only change) on what’s still float32 causes the green pixel line to re-appear, fixing the problem, but why?

const assert = (condition, message) => {
  if (!condition) throw new Error(message);
};

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl2');
assert(gl !== null, `WebGL2 was unexpectedly not supported.`);

const testImage = new Uint8Array(Array.from(
  { length: 512 * 512 },
  (_, i) => (i % 16 > 7) !== (Math.floor(i / 512) % 16 > 7)
    ? [0, 0xff, 0, 0xff]
    : [0, 0, 0xff, 0xff],
).flat());
const bitsRequired = 17;
const offset = -1 / (1 << bitsRequired);
const vData = new Float32Array([
  -1, 0, 0, 0.5 + offset, 1, 0, 0.015625, 0.5 + offset,
  1, 2, 0.015625, 0.515625 + offset, -1, 2, 0, 0.515625 + offset,
]);
const zoom = 2 ** (bitsRequired - 14);
const projection = new Float32Array([
  zoom, 0,    0,     0,
  0,    zoom, 0,     0,
  0,    0,    -zoom, 0,
  0,    0,    0,     1,
]);

const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, testImage);

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);

const vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 16, 8);
gl.bufferData(gl.ARRAY_BUFFER, vData, gl.STATIC_DRAW);

const iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

const vertexShaderSrc = `#version 300 es
precision highp float;
uniform mat4 projection;
layout(location = 0) in vec2 aPosition;
layout(location = 1) in vec2 aTextureCoord;
out vec2 vTextureCoord;
void main(void) {
  gl_Position = projection * vec4(aPosition, 0.0, 1.0);
  vTextureCoord = aTextureCoord;
}`;

const fragmentShaderSrc = `#version 300 es
precision highp float;
uniform sampler2D sampler;
in vec2 vTextureCoord;
out vec4 fColor;

void main(void){
  vec2 texCoordRounded = vec2(
      (floor(vTextureCoord.x * 512.) + 0.5) / 512.,
      (floor(vTextureCoord.y * 512.) + 0.5) / 512.
    );
  vec4 color = texture(sampler, texCoordRounded);
  // vec4 color = texture(sampler, vTextureCoord);
  fColor = color;
}`;

const program = gl.createProgram();
assert(program !== null, `Program was unexpectedly `null`.`);

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
assert(vertexShader !== null, `Vertex-shader was unexpectedly `null`.`);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), `Vertex-shader failed to compile:n${gl.getShaderInfoLog(vertexShader)}`);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
assert(fragmentShader !== null, `Vertex-shader was unexpectedly `null`.`);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), `Fragment-shader failed to compile:n${gl.getShaderInfoLog(fragmentShader)}`);

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
assert(gl.getProgramParameter(program, gl.LINK_STATUS), `Program linking failed:n${gl.getProgramInfoLog(program)}`);

gl.useProgram(program);

const uniformLocationSampler = gl.getUniformLocation(program, 'sampler');
gl.uniform1i(uniformLocationSampler, 0);
const uniformLocationProjection = gl.getUniformLocation(program, 'projection');
gl.uniformMatrix4fv(uniformLocationProjection, false, projection);

gl.clearColor(0, 0, 0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
<canvas id='canvas' width='256' height='256'></canvas>

forEach call not working with infinite scroll

I use this snippet to manipulate the action when clicking the ‘a’ tag within all ‘.read-more’ div’s:

[].forEach.call(document.querySelectorAll(".read-more > a"),function(el){el.addEventListener("click",function(e){...}

It works perfectly, except when I use infinite scrolling. All ‘.read-more a’ elements that is not loaded at page loading, but when infinite scrolling is loading them, does not get affected by my snippet.

How to make the snippet affect the elements that is loaded by infinite scroll and not just the visible ones at page load?