Category: javascript

I’m working on a Next.js Typescript project, which uses the FileUpload by PrimeReact. It works fine, but because the project is for german users, I wanted to change the value of the badge after the file is uploaded to:

“Completed” -> “Erfolgreich”

“Pending” -> “Wird verarbeitet”

The only info I found on the PrimeReact Documentary was to use the pt (pass-trough) props, to atleast get in touch with the badge.

Link to PrimeReact pt

But it didn’t worked out for me. I also tried item template, but then I just got many many bugs.

Here is my code:

import "./Upload.css";

import { FC } from "react";
import { FileUpload } from 'primereact/fileupload'; 
import { fetchData } from "./serverside";

interface UploadProps {
    label?: string
}

const Upload:FC<UploadProps> = function Upload({ label = "Suche" }){
    return (
        <div className="file-upload-container">
        <FileUpload
          name="demo"
          url=""
          accept=".csv"
          onUpload={onUpload}
          maxFileSize={1000000}
          chooseLabel={label}
          auto
          emptyTemplate={<p className="m-0">Drag & Drop | Datei hier ablegen</p>}
        />
      </div>
    )
}

const onUpload = async (event: any) => {
    const files = event.files;
    fetchData(files);
};

export default Upload;

Upload.css:

.file-upload-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px; /* Optional: Add padding for some spacing around */
  }
  
  .p-fileupload {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    border: none; /* Remove border if any */
  }
  
  .p-fileupload-content {
    flex: 1;
    max-width: 300px; /* Set a fixed max width for the drag-and-drop area */
    min-width: 150px; /* Set a minimum width to keep it from shrinking too much */
    padding: 10px;
    border: 1px dashed #ccc; /* Add a border to indicate the drop area */
    border-radius: 4px; /* Optional: Rounded corners */
    text-align: center; /* Center the text inside */
  }
  
  .p-fileupload-buttonbar {
    display: flex;
    align-items: center;
    background-color: var(--grey-14);
    border: none;
  }

  /* Hide elements with the attribute data-pc-section="filesize" */
.file-upload-container [data-pc-section="filesize"] {
    display: none !important; /* Ensure the file size is hidden */
}

I still have a css framework around it, so it may look a little bit different, but this is how it should like:

But to get back to the task, I just want to change the text of the “Completed” and “Pending” (<- when the upload is still on going)

I have a WebView class and I want to select specific text from the rendered html code in a specific region.

Method: public static void selectTextInWebView(WebView webView, int startIndex, int endIndex)

I tried to write a JS code but it doesn’t work.

        String script = "function selectRange(start, end) {" +
                "    var range = document.createRange();" +
                "    var selection = window.getSelection();" +
                "    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);" +
                "    var charCount = 0;" +
                "    var startNode, endNode, startOffset, endOffset;" +
                "    while (walker.nextNode()) {" +
                "        var node = walker.currentNode;" +
                "        var nextCharCount = charCount + node.length;" +
                "        if (!startNode && nextCharCount > start) {" +
                "            startNode = node;" +
                "            startOffset = start - charCount;" +
                "        }" +
                "        if (nextCharCount >= end) {" +
                "            endNode = node;" +
                "            endOffset = end - charCount;" +
                "            break;" +
                "        }" +
                "        charCount = nextCharCount;" +
                "    }" +
                "    if (startNode && endNode) {" +
                "        range.setStart(startNode, startOffset);" +
                "        range.setEnd(endNode, endOffset);" +
                "        selection.removeAllRanges();" +
                "        selection.addRange(range);" +
                "    }" +
                "}" +
                "selectRange(" + startIndex + ", " + endIndex + ");";
        webView.getEngine().executeScript(script);

What I am trying to accomplish:
I am trying to create a google chrome extension that removes certain search results from the google search results

What I am doing:

Currently what I am doing is run a contentScript when the extension user searches something on google. This script then queries all anchor/cite tags and loops over them to see if any if them contain a link we want to filter out.

If they contain a link to be filtered out I will move up parents until I find an element that contains a class with classname “MjjYud” and then remove that element.

My code thus far:

const rules = {
  "https://www.google.com/search": filterGoogleSearch,
}

const sitesToFilter = [
  "reddit",
  "wikipedia",
]

console.log("test")

function filterGoogleSearch() {
  const anchorTags = document.querySelectorAll("a")
  const citeTags = document.querySelectorAll("cite")

  anchorTags.forEach((tag) => {
    if (!tag.href) {
      return
    }
    const parsedUrl = new URL(tag.href)
    const hostname = parsedUrl.hostname // Get the domain name of the full URL
    if (shouldFilterLink(hostname)) {
      const elementToRemove = findParentToRemove(tag)
      if (elementToRemove) {
        elementToRemove.remove()
      }
    }
  })
  citeTags.forEach((cite) => {
    if (shouldFilterLink(cite.textContent)) {
      const elementToRemove = findParentToRemove(cite)
      if (elementToRemove) {
        elementToRemove.remove()
      }
    }
  })
}

function shouldFilterLink(url: string) {
  try {
    for (const site of sitesToFilter) {
      if (url.includes(site)) {
        console.log("removed " + url + " why " + site)
        return true
      }
    }
  } catch (error) {
    console.log("Invalid URL: " + url)
  }
  return false
}

function findParentToRemove(element: HTMLElement) {
  while (element && element !== document.body) {
    if (element.classList.contains("MjjYud")) {
      return element
    }
    element = element.parentElement
  }
  return null
}

// Check if the current URL starts with any of the keys in rules (runs the rest)
for (const url in rules) {
  if (document.URL.startsWith(url)) {
    rules[url]()
    break
  }
}

What I think I am doing wrong (but not sure how to fix it):
I think moving up parents to find a class named “MjjYud” is not very good practice as this class might change during updates or A/B testing. Also when deleting this element the page sometimes doesnt render correctly for the remaining elements (the website logo will turn out very small)

Any help would be greatly appreciated!

With my very basic “knowledge” in javascript I have written the following generic function to sum up filtered columns (i.e. the content of the visible <td> elements of a filtered column). The unfiltered table has about 2000 lines and 55 columns. The function has the following parameters:

• tabID: is the ID of the table

• colNum: selects the number of the column to be filtered and summed up

• colS: is the ID of the column

• rec: just indicates if the sum needs to be converted e.g. from kWh to GWh (than rec would be 1’000’000)

The function is executed as soon as selection via dropdown in the html-table is made (on change). My problem is: it takes to much time (about 1-2 mins) until I get the result. Question: is there a solution (which I can understand) that performs quicker?

function htmlTableColSum(tabID, colNum, colS, rec) {
  var table = document.getElementById("" + tabID + "");
  var sumCol = 0;
  let count = $('#' + tabID + ' tbody tr').length;

  for (var i = 1; i < count - 1; i++) {
    if ($('#' + tabID + ' tbody tr:eq(' + i + ')').is(':visible')) {
      if (table.rows[i].cells[colNum].innerHTML !== "") {
        sumCol = sumCol + parseInt(table.rows[i].cells[colNum].innerHTML);
      }
    }
  }
  
  sumCol = sumCol / rec;
  if (rec > 1) {
    sumCol = sumCol.toFixed(2)
  }
  
  document.getElementById("" + colS + "").innerHTML = "" + sumCol;
}

I’m attempting to send data to http://localhost:50051/helloworld.Greeter/SayHello, but I’m encountering the following error in the browser console:

POST http://localhost:50051/helloworld.Greeter/SayHello net::ERR_INVALID_HTTP_RESPONSE
....
(index):49 Error: TypeError: Failed to fetch

There are no errors shown in the server console.

Server Code (server.mjs):

import grpc from "@grpc/grpc-js";
import protoLoader from "@grpc/proto-loader";
import path from "path";
import { fileURLToPath } from "url";

const PROTO_PATH = path.join(process.cwd(), "./helloworld.proto");
const packageDefinition = protoLoader.loadSync(PROTO_PATH, {});
const helloProto = grpc.loadPackageDefinition(packageDefinition).helloworld;

function sayHello(call, callback) {
  callback(null, { message: "Hello " + call.request.name });
}

function main() {
  const server = new grpc.Server();
  server.addService(helloProto.Greeter.service, { sayHello: sayHello });
  server.bindAsync(
    "0.0.0.0:50051",
    grpc.ServerCredentials.createInsecure(),
    () => {
      server.start();
      console.log("Server running at http://0.0.0.0:50051");
    }
  );
}

main();

I run the server using node server.mjs.

Client Code (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>gRPC Client</title>
  <script src="https://cdn.jsdelivr.net/npm/protobufjs/dist/protobuf.min.js"></script>
</head>
<body>
  <script>
    // Load the protobuf definitions
    const protoPath = "helloworld.proto";
    protobuf.load(protoPath, (err, root) => {
      if (err) throw err;

      const HelloRequest = root.lookupType("helloworld.HelloRequest");
      const HelloReply = root.lookupType("helloworld.HelloReply");

      console.log({ f: HelloRequest });
      // Create a HelloRequest message
      const payload = { name: "World" };
      const errMsg = HelloRequest.verify(payload);
      if (errMsg) throw Error(errMsg);

      const message = HelloRequest.create(payload);
      const buffer = HelloRequest.encode(message).finish();

      console.log({ buffer });
      // Send the request using fetch
      fetch("http://localhost:50051/helloworld.Greeter/SayHello", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-protobuf",
        },
        body: buffer,
      })
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.arrayBuffer();
      })
      .then((responseBuffer) => {
        const replyMessage = HelloReply.decode(
          new Uint8Array(responseBuffer)
        );
        console.log(`Greeting: ${replyMessage.message}`);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
    });
  </script>
</body>
</html>

I run the client using npx http-server -o.

Proto File (helloworld.proto):

syntax = "proto3";

package helloworld;

service Greeter {
  rpc SayHello (HelloRequest) returns (HelloReply) {}
}

message HelloRequest {
  string name = 1;
}

message HelloReply {
  string message = 1;
}

Dependencies:

"dependencies": {
  "@grpc/grpc-js": "^1.11.1",
  "@grpc/proto-loader": "^0.7.13",
  "cors": "^2.8.5",
  "express": "^4.19.2"
}

I’m not seeing any errors on the server side. What could be causing this issue, and how can I resolve it?

I integrated @ericblade/quagga2 library into a ReactJS application for barcode scanning, but the output for a specific barcode format, as shown in the image below, is not correct.
Please help me to get the expected output.

I also tried using the “react-qr-barcode-scanner” library, but most browsers are unable to access the camera for barcode scanning

Output of the below code

Supports popular browsers on Android mobile.

import React, { useEffect, useState, useRef } from "react";
import Modal from "react-bootstrap/Modal";
import Quagga from '@ericblade/quagga2';


const NewScanPopup = ({ show, onhide }) => {
  const scannerRef = useRef(null);
  const [view, setView] = useState(true);

  useEffect(() => {
    function decode() {
      Quagga.init({
        inputStream: {
          name: "Live",
          type: "LiveStream",
          constraints: {
            width: 640,
            height: 480,
            facingMode: 'environment', // Use the rear camera
          },
          target: scannerRef.current,
          singleChannel: false
        },
        locate: true,
        numOfWorkers: 0,
        decoder: {
          readers: [
            'code_128_reader',
            'code_32_reader',
            'qrcode',
            'ean_reader',
            'ean_8_reader',
            'code_39_reader',
            'code_39_vin_reader',
            'codabar_reader',
            'upc_reader',
            'upc_e_reader',
            'i2of5_reader',
            '2of5_reader',
            'code_93_reader'
          ],
          multiple: false,
        },
        locator: {
          halfSample: true,
          patchSize: "large", // x-small, small, medium, large, x-large
        }
      }, (err) => {
        if (err) {
          console.error(err);
          return;
        }
        Quagga.start();
      });
      Quagga.onDetected(onDetected);
    }
    decode();

  }, []);

  const onDetected = (result) => {
    if (result && result.codeResult && result.codeResult.code) {
      alert("Scanned Value is: " + result.codeResult.code);
      Quagga.stop();
      setView(false);
      onhandleClose();
    }
    else {
      alert("No Valid Result Detected", result);
    }
  };

  const onhandleClose = () => {
    onhide();
  }
  return (
    <div className={"custom-alert"}>
      <Modal
        show={show}
        backdrop="static"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        size={"lg"}
        dialogClassName="modal-alert"
      >
        <Modal.Header>
          <Modal.Title>Barcode Scanner</Modal.Title>
          <button className="btn btn-info" onClick={() => onhandleClose()}>
            X
          </button>
        </Modal.Header>
        <Modal.Body>
          {view && <div ref={scannerRef} style={{ width: '100%', height: '90%' }}></div>}
        </Modal.Body>
        <Modal.Footer>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default NewScanPopup;

Once the barcode is scanned using the mobile camera, the expected result should be the numbers from the image that match the barcode as the expected code.

I’m encountering a persistent SecurityError: The operation is insecure. issue in my Next.js project, but only on iOS devices. I’ve reviewed several related posts that suggest it could be a Firefox-specific issue, but in my case, the error occurs across all browsers on iOS.

Here is the log from Sentry:

column: 62797,
line: 63,
message: The operation is insecure.,
name: SecurityError,
sourceURL: https://website.com/_next/static/chunks/pages/_app-a65ffa319da93f05.js,
stack: 
get@https://website.com/_next/static/chunks/pages/_app-a65ffa319da93f05.js:63:62797
@https://website.com/_next/static/chunks/186-8e5aafdd07cb4743.js:1:1139
uI@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:9:84057
oU@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:9:113104
oC@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:9:95923
r8@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:9:44814
@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:9:111550
oI@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:9:111554
oS@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:9:94926
E@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:33:1365
T@https://website.com/_next/static/chunks/framework-42653e2defb541a0.js:33:1895

Key points:

• The error is specific to iOS devices and occurs in any browser.
• I do not have router.replace inside any useEffect.
• I cannot reproduce the error on Vercel or locally; it only appears in Sentry logs.

Any insights or suggestions on what might be causing this issue would be greatly appreciated. Has anyone else faced a similar problem or have any ideas on how to debug this further?

Thank you!

I am new to blockchain development. I am facing one issue in deploy.js, while running npx hardhat run src/backend/scripts/deploy.js --network localhost

ideally, it should show something like

Deploying contracts with the account: value
Account balance: value
NFT CONTACT ADDRESS value

but it is returning

Deploying contracts with the account: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
Account balance: 9999992459571303767619n
NFT CONTACT ADDRESS undefined

i’d like to know how to fix this undefined issue, please help

deploy.js code

async function main() {
    const [deployer] = await ethers.getSigners();
  
    console.log("Deploying contracts with the account:", deployer.address);
    console.log("Account balance:", await deployer.provider.getBalance(deployer.address));
  
    
    // Get the ContractFactories and Signers here.
    const NFT = await ethers.getContractFactory("NFT");
    const nft = await NFT.deploy();
    // Save copies of each contracts abi and address to the frontend.
    console.log("NFT CONTACT ADDRESS",nft.address)
    saveFrontendFiles(nft , "NFT");
    
  }
  
  function saveFrontendFiles(contract, name) {
    const fs = require("fs");
    const contractsDir = __dirname + "/../../frontend/contractsData";
  
    if (!fs.existsSync(contractsDir)) {
      fs.mkdirSync(contractsDir);
    }
  
    fs.writeFileSync(
      contractsDir + `/${name}-address.json`,
      JSON.stringify({ address: contract.address }, undefined, 2)
    );
  
    const contractArtifact = artifacts.readArtifactSync(name);
  
    fs.writeFileSync(
      contractsDir + `/${name}.json`,
      JSON.stringify(contractArtifact, null, 2)
    );
  }
  
  main()
    .then(() => process.exit(0))
    .catch(error => {
      console.error(error);
      process.exit(1);
    });

i tried changing deploy.js file to

async function main() {
    const [deployer] = await ethers.getSigners();
  
    console.log("Deploying contracts with the account:", deployer.address);
    console.log("Account balance:", await deployer.provider.getBalance(deployer.address));
  
    // Get the ContractFactory and Signer here.
    console.log("Getting the contract factory for NFT...");
    const NFT = await ethers.getContractFactory("NFT");
    console.log("Deploying NFT contract...");
    const nft = await NFT.deploy();
    await nft.deployed(); // Ensure the contract is fully deployed
    console.log("NFT contract deployed to:", nft.address);
    
    // Save copies of each contract's ABI and address to the frontend.
    saveFrontendFiles(nft, "NFT");
}

main().catch((error) => {
    console.error("Error in contract deployment:", error);
    process.exit(1);
});

it shows some error related to nft.deployed not found etc. etc..

Expectations:

to get some nft contact address value

I have a Razor Page in ASP.NET Core where I have a dropdown list () populated with usernames. Upon selecting a username, the form is automatically submitted using JavaScript (onchange=”this.form.submit()”). However, after the form submission, the selected username is cleared from the dropdown, which is not the intended behavior.

Razor Page (.cshtml):

 <div class="rollname">
     <label class="required">User Name :</label>
     <select id="selectedUser" name="selectedUser" class="form-control-1"
             asp-items='@(new SelectList(Model.Users, "Key", "Value",ViewData["SelectedUserId"]))'
             onchange="this.form.submit()">
         <option value="">--Select--</option>
     </select>


 </div>

Razor page (cshtml.cs)

public class PageNameModel : PageModel
{
    public Dictionary<long, string> Users { get; set; } // Replace with actual data type
    
    public void OnGet()
    {
        // Load users data and set default selected user ID
        ViewData["SelectedUserId"] = "123"; // Replace with your logic to get default selected user ID
    }

    public IActionResult OnPost(long selectedUser)
    {
        // Process form submission
        HttpContext.Session.SetString("selectedUserId", selectedUser.ToString());
        ViewData["SelectedUserId"] = selectedUser.ToString();
        return RedirectToPage();
    }
}

How do I make sure that after selecting username dropdown value , it should not get cleared after Redirecting to same page . Is there a better approach towards this ?

I have to write code such that when I click a roll dice btn, 5 random numbers get generated and stored in an array and each element is displayed in a diventer image description here

I’ve written this code —

rollDiceBtn.addEventListener("click",() => {
  for(let i=0;i<5;i++){
    diceValuesArr.push(Math.floor(Math.random()*6 + 1));
    listOfAllDice[i].textContent = diceValuesArr[i];
  }
  diceValuesArr = [];
})

It should work but the IDE is not accepting it.

I am authoring a server in Node.js. I am using three things:

• 100% ESM-Only with type: module and *.js extension for compiled files.
• TypeScript with project references.
• The subpath imports.

My project directory structure is:

REPO
|- api
|   |-- index.ts
|   |-- tsconfig.json
|- server
|   |-- index.ts
|   |-- tsconfig.json 
|- tsconfig.json
|- package.json

My package.json has following subpath imports:

{
  name: "my-app",
  imports: {
    "#api": "./api/index.js",
  }
}

The top-level tsconfig.json has references:

{
  "compilerOptions": {
    "noEmit": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "verbatimModuleSyntax": true
  },
  "references": [
    { "path": "./api/tsconfig.json" },
    { "path": "./server/tsconfig.json" },
  ],
  "include": [],
  "files": []
}

I am using subpath imports in my server/index.js like following:

import { graphql } from '#api';

async function main() {
   const response = await graphql('query-string');
}

main();

When I run the server in development mode using npx tsx --watch ./server/index.ts, it just works and tsx is able to properly resolve the ./api/index.ts file accordingly.

The problem happens when I compile this project for production. The project gets compiled to dist folder. In the docker image, only following files are present:

WORKSPACE
|- dist
|   |-- api
|   |   |-- index.js
|   |-- server
|   |   |-- index.js
|- package.json

When I try to run node ./dist/server/index.js it gives as error as it cannot fild the api/index.js file in the root of the folder.

I have two questions:

1. What is the correct mechanism to handle subpath imports differently for development and production environments in ESM-only mode?
2. Are they any recommended best practices around this pattern?

I have two OAuth consent screens set up in the Google Developer Console. Both created form say [email protected] and [email protected].

Javascript origin for first website is say first.com and for second website is say second.com. But the redirect URI for both websites are served from api.first.com. But again the endpoints are different here.

Example:
Redirect URI for first.com : http://api.first.com/api/google-auth/callback
Redirect URI for first.com : http://localhost:8080/api/google-auth/callback

Redirect URI for second.com : http://api.first.com/api/second/google-auth/callback
Redirect URI for second.com : http://localhost:8080/api/second/google-auth/callback

CLIENT_IDs for the two websites are also coming from two different gmail accounts hence are also different for both app.

For first.com, the oAuth flow is working fine both on localhost as well as after deployment.

BUT When both backend and frontend are running on LOCALHOST it is working as Expected.

NOTE: Both application are running on azure static web app.

Why is the consent screen from first.com being shown for both configurations even though the redirect URIs and CLIENT_ID are different for both first.com and second.com?

How can I ensure that the correct consent screen appears for each CLIENT_ID and redirect URI combination?

Please help me with this problem of utilizing google oAuth for my websites.

Here is the issue: I have to search for certain string (‘11223344’) on a web page. After it´s found, I have to click on it to download a file. The problem is after I click on the string it appears a pop window confirmation and my javascript code stucks on it. How can I send the command (via javascript) to click on the “OK button” in the confirmation window?

Here is my Javascript code which search for a certain string (I search for all elements td.arq which has which one a certain type of string – when I found the correct sequence I command click on it):

`var linkCount=document.querySelectorAll("td.arq").length
console.log(linkCount)
for (var i=0; i< linkCount; i++) {
    if ((document.querySelectorAll("td.arq")[i].innerText).includes('11223344'))
    {
    document.querySelectorAll("td.arq")[i].click()
    break
    }
}`

Here is the one of the element codes on web page where I have to search and locate the string to click with the code above:

`<tr class="tr2" id="tr_doc2" onclick="if (!confirm('Wanna download this file?')) return        false;document.getElementById('tr_doc2').style.background='#EEE';document.getElementById('salvar2')  .style.display = 'none';document.getElementById('ok2').style.display = '';new Effect.Highlight('tr_doc2',{duration:1.5});;window.location.href='https://xxx.com.br/access.php?98c71rvxPvt5XgAPXj1QizXIl+SUZMHvJYf87EYQNRVVynxm2r2/+ez4ufE48PiJsnUQqlOJdDzS43QQkKfJPj7dZHn2hL7b4LTAMTKCe3/fUIpsDCrUiEmGlBi//P8gC9Uajs+xrtsBw6xB5psGofMzdT8NjXKSmbJXcbqrgHitw8Q0O9cf/F9VYdAAnxZ6xEkwazBwNIByTtRKOyUopvcBxWLOEBJ5'">
        <td class="arq"><img src="imagens/assinado.gif">274</td>
        <td class="arq">201100052591765_15</td>
        <td><span id="salvar2"><img src="./imagens/salvar.gif"></span><span id="ok2" style="display:none"><img src="./imagens/ok.gif"></span></td>
</tr>`

My code stucks when confirmation windows appears. I don´t know how to command to click on OK in the confirmation “Wanna download this file?”

Thank you for suggestions.

I try to use the code to click but the confirmation windows stucks the code execution

i am trying to use @input on input field in vuejs, but the function assigned to it gets called only after user has stopped typing and the focus is out of the input field, that means it is getting called on onFocusout, what i want is, when user is typing, at that time i need to call the function.

Below is my code:

<input
    v-model="inputValue"
    type="text"
    :placeholder="placeholder"
    :class="['w-full !border-none !focus:border-none p-2.5 shadow-none', disabled ? 'text-[#969c9f]' : 'black']"
    @input="ValidateInput"
    :disabled="disabled"
/>


ValidateInput(){
    if(this.inputValue){
        if(this.valueType == "Number"){
            this.inputValue = this.inputValue.replace(/[^0-9]/g, '');
        }else if(this.valueType == "SP"){
            this.inputValue = this.inputValue.replace(/^0+/, '').replace(/D/g, '');
        }else if(this.valueType == "Number_with_TS"){
            this.inputValue = this.inputValue.replace(/[^0-9]/g, '');
            this.inputValue = this.inputValue.replace(/B(?=(d{3})+(?!d))/g, ' ');
        }else if(this.valueType == "SP_with_TS"){
            this.inputValue = this.inputValue.replace(/^0+/, '').replace(/D/g, '');
            this.inputValue = this.inputValue.replace(/B(?=(d{3})+(?!d))/g, ' ');
        }else if(this.valueType == "decimal"){
            this.inputValue = this.inputValue.replace(/[^0-9.]/g, '');
            const parts = this.inputValue.split('.');
            if (parts.length > 2) {
                this.inputValue = parts[0] + '.' + parts.slice(1).join('');
            }
        }else if(this.valueType=="ZipCode"){
            this.inputValue = this.inputValue.replace(/[^0-9]/g, '');
            if (this.inputValue.length > 4) {
                this.inputValue = this.inputValue.substring(0, 4);
            }
        } else if (this.valueType === "disabled") {
            this.inputValue = 0;
            this.$emit('update:modelValue', this.inputValue);
        } else if(this.valueType == "model_spec"){
            if (this.inputValue.length > 60) {
                this.inputValue = this.inputValue.substring(0, 60);
            }
        }else if(this.valueType=="cylinder_volume"){
            this.inputValue = this.inputValue.replace(/[^d,.]/g, '');
        }

        if(this.inputValue == ""){
            this.inputValue=null;
        }
        this.$emit('update:modelValue', this.inputValue);
    }
}

I am new to vuejs, can someone tell, how to solve this ?

I have tried several methods but none of that worked.

I am trying to display y-axis in the interval of 4. With min=30 & max=80.But its not displaying 80. Not able to find exact resolution to this.

JS

  $(function () {
    var chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'Div1',
        width: 600,
        height: 400

    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Productivity Report',
        x: -20 
    },
    xAxis: {
        lineColor: '#FF0000',
        categories: [1, 2, 3]
    },
    yAxis: {
        min: 30,
        max: 80,
        tickInterval:2,
         labels:{
          step:2
         },
        lineColor: '#FF0000',
        lineWidth: 1,
        title: {
            text: 'Values'
        },
        plotLines: [{
            value: 0,
            width: 10,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ''
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Value',
        data: [
            [1, 34],
            [2, 55],
            [3, 61],
            [4, 38]
           ]
       }]
    });
 });

fiddle link