Category: javascript

I have converted a html table content in a array but unable to send it to the controller. Pls help

• I have tried a lot of references but every time the parameter in controller getting null values

function sendtabledata() {
var element = document.getElementById("pveloandata");
var rows = element.querySelectorAll("tr");


var jsarray = [];

            rows.forEach((r, i) => {
                if (i > 0) {
                    const tabledata = {}
                    const rowitems = r.children
    
                    tabledata["srl"] = i;
                    tabledata["date"] = rowitems[1].textContent;
                    tabledata["balance"] = rowitems[2].textContent;
                    tabledata["intbal"] = rowitems[3].textContent;
    
                    jsarray.push(tabledata);
                }
            })
        
        jsarray = JSON.stringify({ 'jsarray': jsarray });
    
            $.ajax({
                
                ContentType: 'application/json; charset=utf-8',
                dataType: "json",
                type: "POST",
                traditional:true,
                url: '@Url.Action("gettabledata", "Loan")',
                data: jsarray,
               
                success: function (data) {
                   
    
                },
                error: function (err) {
                    alert(err);
                }
            });
    
        }

//controller Method

 public ActionResult gettabledata(string[] jsarray)
        {

           
            return View();
        }

I created a php page to process data. Contains HTML form and JavaScript function. Tested the page and it runs well and perfectly. Eg pageprocessor.php

On my index page , each time the service is trigged, ajax fetches the required page (pageprocessor) into a section of index page that will process the data. However, upon retrieval,everything runs well except select inputs(LGA and Model) whose value change on event change (onchange functions) . indicating that my JavaScript function is not running on index page upon ajax call. Only on processor page. How do I solve this please

var ajax;
       if(window.XMLHttpRequest) {
           ajax=new XMLHttpRequest();
       }else{
           ajax=new ActiveXObject('Microsoft.XMLHTTP');
       } ajax.onreadystatechange=function(){
       if(this.readyState ==4 && this.status == 200){
           document.getElementById('airtimediv').innerHTML=this.responseText;
                     document.getElementById('airtimediv').style.visibility="visible";     
   }
       }
     ajax.open('GET','insurance.php',true);
       ajax.send();

Processor page data

<?php
if(isset($_GET['brand'])){
    $vbrand=$_GET['brand'];
    echo "
    <option value='' disabled selected>...Please Choose ...</option>
    ";
             // get vehicle brand model codes 
     $curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://base url/$vbrand",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_POSTREDIR => 3,  
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"api-key:key here", 
"public-key:key here",
"Accept: application/json",
"Content-Type: application/json"
),
));
$response= curl_exec($curl);
curl_close($curl);
$iresponse=json_decode($response);
$code=array_column($iresponse->content->original,'VehicleModelCode');
$name=array_column($iresponse->content->original,'VehicleModelName');
$model=array_combine($code,$name);
foreach ($model as $vmc => $vmn){
    echo "
    <option value='$vmc'>$vmn</option>
    ";
}
    exit();
}
elseif (isset($_GET['state'])){
    $state=$_GET['state'];
    echo "
    <option value='' disabled selected>...Please Choose ...</option>
    ";
             // get lga code
     $curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://base URL /lga/$state",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_POSTREDIR => 3,  
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"api-key:", 
"public-key:PK_",
"Accept: application/json",
"Content-Type: application/json"
),
));
$response= curl_exec($curl);
curl_close($curl);
$iresponse=json_decode($response);
$code=array_column($iresponse->content->original,'LGACode');
$name=array_column($iresponse->content->original,'LGAName');
$lga=array_combine($code,$name);
foreach ($lga as $lc => $ln){
    echo "
    <option value='$lc'>$ln</option>
    ";
}
    exit();
}
 echo "Maintenance in progress
 </br>
 <label for='owner'>Owner Name</label>
 <input type='text' name='owner' id='owner' class='form-control' required>
 </br>
 <label for='chasis'>Chasis Number</label>
 <input type='text' name='chasis' id='chasis' class='form-control' required>
  </br>
 <label for='email'>Owner Email</label>
 <input type='text' name='email' id='email' class='form-control' required>
  </br>
 <label for='phone'>Owner Phone</label>
 <input type='tel' name='phone' id='phone' class='form-control' required> 
   </br>
 <label for='Year'>Year of Make</label>
 <input type='tel' name='year' id='year' class='form-control' required>
 </br>
 <label for='color'>Vehicle Color</label>
</br> <select name='color' id='color' class='form-control' required>
<option value='' disabled selected>...Please Choose...</option>
 ";
 
         // get color codes 
     $curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://base URL /color",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_POSTREDIR => 3,  
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"api-key:", 
"public-key:PK_",
"Accept: application/json",
"Content-Type: application/json"
),
));
$response= curl_exec($curl);
curl_close($curl);
$iresponse=json_decode($response);
$code=array_column($iresponse->content,'ColourCode');
$name=array_column($iresponse->content,'ColourName');
$colour=array_combine($code,$name);
foreach ($colour as $vcc => $vcn){
    echo "
    <option value='$vcc'>$vcn</option>
    ";
}
echo "</select>
 </br>
 <label for='engine'>Engine Capacity</label>
</br> <select name='engine' id='engine' class='form-control' required>
<option value='' disabled selected>...Please Choose...</option>
";
         // get Engine capacity codes 
     $curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://base url/engine-capacity",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_POSTREDIR => 3,  
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"api-key:", 
"public-key:PK_",
"Accept: application/json",
"Content-Type: application/json"
),
));
$response= curl_exec($curl);
curl_close($curl);
$iresponse=json_decode($response);
$code=array_column($iresponse->content,'CapacityCode');
$name=array_column($iresponse->content,'CapacityName');
$capacity=array_combine($code,$name);
foreach ($capacity as $vec => $ven){
    echo "
    <option value='$vec'>$ven</option>
    ";
}
echo "</select>
 </br>
 <label for='brand'>Vehicle Brand</label>
</br> <select name='brand' id='brand' class='form-control' required>
<option value='' disabled selected>...Please Choose...</option>
";
         // get vehicle brand codes 
     $curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://base url/brand",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_POSTREDIR => 3,  
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"api-key:", 
"public-key:PK",
"Accept: application/json",
"Content-Type: application/json"
),
));
$response= curl_exec($curl);
curl_close($curl);
$iresponse=json_decode($response);
$code=array_column($iresponse->content,'VehicleMakeCode');
$name=array_column($iresponse->content,'VehicleMakeName');
$vehicle=array_combine($code,$name);
foreach ($vehicle as $vbc => $vbn){
    echo "
    <option value='$vbc'>$vbn</option>
    ";
}
echo "</select>
</br>
<label for='model'>Vehicle Model</label>
</br> <select name='model' id='model' class='form-control' required>
</select>
 </br>
 <label for='State'>State</label>
</br> <select name='state' id='state' class='form-control' required>
<option value='' disabled selected>...Please Choose...</option>
";
         // get state codes 
     $curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://base url/state",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POST => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_POSTREDIR => 3,  
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"api-key:", 
"public-key:PK_",
"Accept: application/json",
"Content-Type: application/json"
),
));
$response= curl_exec($curl);
curl_close($curl);
$iresponse=json_decode($response);
$code=array_column($iresponse->content,'StateCode');
$name=array_column($iresponse->content,'StateName');
$state=array_combine($code,$name);
foreach ($state as $vsc => $vsn){
    echo "
    <option value='$vsc'>$vsn</option>
    ";
}
echo "</select>
</br>
<label for='lga'>Local Government Area</label>
</br> <select name='lga' id='lga' class='form-control' required>
</select>
";  

echo "
<script>
        document.getElementById('brand').setAttribute('onchange','model()');
        document.getElementById('state').setAttribute('onchange','lga()');
        function model(){
        var car=document.getElementById('brand').value;
        var ajax;
       if(window.XMLHttpRequest) {
           ajax=new XMLHttpRequest();
       }else{
           ajax=new ActiveXObject('Microsoft.XMLHTTP');
       } ajax.onreadystatechange=function(){
       if(this.readyState ==4 && this.status == 200){
           document.getElementById('model').innerHTML=this.responseText;
   }
       }
     ajax.open('GET','insurance.php?brand='+car,true);
       ajax.send();
        }
        function lga(){
        var state=document.getElementById('state').value;
        var ajax;
       if(window.XMLHttpRequest) {
           ajax=new XMLHttpRequest();
       }else{
           ajax=new ActiveXObject('Microsoft.XMLHTTP');
       } ajax.onreadystatechange=function(){
       if(this.readyState ==4 && this.status == 200){
           document.getElementById('lga').innerHTML=this.responseText;
   }
       }
     ajax.open('GET','insurance.php?state='+state,true);
       ajax.send();
        }
</script>
"; 
?>

Tried creating it o index page so the functions can run, but same result.

I had the following Problem. The objective was to make an text-input for an E-Mail thats is always showing the the same appendix.

For example [email protected].

Requirements:

1. The appendix @mail.de has to be in correct position behind the user input
2. The appendix needs to be visually contained in the input field
3. The apendix is uneditable

The input field:

<input type="text" class="form-control" id="mailAddress"
                       placeholder="[email protected]" maxlength="64"> 

So how is this possible? (This is a rethoric question, since i will answer my self, so if anyone encounters a similar Problem they can use this as help)

When I load my node.js application using localhost, index.html’s script works properly:

<script src="/index.js" defer></script>

On the other hand, when I use render.com to load my app, index.html loads along with the css however the javascript doesn’t and this error appears in the console:

• GET https://blackjack-v7lr.onrender.com/index.js net::ERR_ABORTED 404 (Not Found)
• Refused to execute script from ‘https://blackjack-v7lr.onrender.com/index.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled

Despite the location of the file being correct as evidenced by local host working, the online host doesn’t. Other htmls that dont use javascipt work though. How would I go about fixing this?

I tried using postman through the server based url (https://blackjack-v7lr.onrender.com/index.js) but that didn’t find the file either only when using localhost did it find it

const compName = pathName.split("/").slice(1).map((url) => url.charAt(0).toUpperCase() + url.slice(1)).join('')

        const Component = dynamic(() => import(`@/components/admin/tabs/${compName}.js`), {
            ssr: false,
        });

        return (
            < Component />
        )

It works fine but fast loads whenever I work with fetch in my component which is causing bug in my code.

I tried importing the component and return, it works nicely without loading but loads in dynamic

I have a question-answer web app. When the user clicks on ‘knee’ in my app, some questions about the knee are fetched from the backend. The user can answer these questions, and once all the questions are answered and submitted, the answers are sent to the backend, which then responds.

Now, consider this scenario carefully: If the user answers five questions but their device shuts down unexpectedly, when they reopen the browser, they should be able to see the previously answered questions.

How can I handle this situation so that the user’s data is retained even if their device shuts down? Also, I don’t want to send a request to the backend on every answer, as it would increase costs. What is the best way to handle this?”

Would you like me to improve it further or simplify it?

I have a Navbar component with an “Account” button that should toggle a dropdown menu. The dropdown should open when clicked and close when clicking outside or clicking the button again. However, clicking “My Account” only opens the menu but doesn’t close it when clicked again.

Navbar.jsx

import { useState } from 'react';
import { Link } from 'react-router-dom';
import AccountDropdown from '../AccountDropdown';

const Navbar = () => {
  const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);

  const toggleAccountMenu = (event) => {
    event.stopPropagation();
    setIsAccountMenuOpen((prev) => !prev);
  };

  const handleAccountMenuClose = () => {
    if (isAccountMenuOpen) setIsAccountMenuOpen(false);
  };

  return (
    <nav>
      <button onClick={toggleAccountMenu}>My Account</button>
      {isAccountMenuOpen && <AccountDropdown onClose={handleAccountMenuClose} />}
    </nav>
  );
};

export default Navbar;

AccountDropdown.jsx

import { useEffect, useRef } from 'react';

const AccountDropdown = ({ onClose }) => {
  const dropdownRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        onClose();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [onClose]);

  return (
    <div ref={dropdownRef}>
      <button onClick={onClose}>Close</button>
      <a href="/profile">Profile</a>
      <a href="/logout">Log Out</a>
    </div>
  );
};

export default AccountDropdown;

Clicking “My Account” always opens the menu, but clicking it again doesn’t close it. How can I properly toggle the dropdown?

import superheroes from 'superheroes';
console.log(superheroes.default.random());

for this code
I got this error

(node:1512) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time

(Use `node --trace-warnings ...` to show where the warning was created)
file:///C:/Users/nikhi/Downloads/2.3+NPM%20(1)/2.3%20NPM/index.js:7
console.log(superheroes.default.random());
                                ^

TypeError: Cannot read properties of undefined (reading 'random')
    at file:///C:/Users/nikhi/Downloads/2.3+NPM%20(1)/2.3%20NPM/index.js:7:33
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:482:26)
    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:117:5) how to solve this 

In my tutorials they have taught me this

import superheroes from 'superheroes';
console.log(superheroes.default.random());

I expect you to give correct code to get output

Hi guys Here’s the problem I’m using a fast render form that contains a hidden field and I want to get back a record ID through it but of course,e I can’t write simple Jija2 in it because I can’t access it from the HTML page or that what I think here’s what I have and some solutions I tried (note: I know that if used a different way of rendering the form will be easier to handle this but the core of the question is there a way to do that while using fast render**)**

this is the form

class TaskForm(FlaskForm):
    title = StringField(label="Task Title", validators=[DataRequired()])
    description = CKEditorField(label="Description", validators=[DataRequired()])
    list_id = HiddenField(
        label="List id",
        validators=[DataRequired()],
        default="{{list.id}}",
    )
    submit = SubmitField("Add task")

I have a container of todo list that I iterate through it

   {% for list in all_lists %}
    <li class="list col col-sm-3 justify-content-start">
      
            <h5 class="card-title text-muted text-uppercase text-start">
              {{ list.title }}
            </h5>
            <p style="display: none">{{ list.description }}</p>
            <hr />
            <ol class="fa-ol ol-task justify-content-start">
            {% for task in list.ltasks %}
            <!-- Cards to do-->
            <li class="task justify-content-start">
            <h6 class="card-title text-muted text-uppercase text-start" >
                {{ task.title }}
            </h6>
            <hr />
            <p class="card-text">{{ task.description }}</p>
            </li>
            {% endfor %}
            <li class="task justify-content-start">
            {{ ckeditor.load(pkg_type="basic") }} 
            {{ ckeditor.config(name='body') }} 
            {{ render_form(task_form ,novalidate = True, id = "task-form" ) }} <-- Fast rendered form -->
            </li>
            </ol>
            </li>
            {% endfor %}

So I have tried to pass the default attribute as seen above and also used render_kw={“value”:”{{ list.id }}”} I even tried to the field using javascript and append it to the form which has worked but the list.id only shows up as a string like this:

<input id="list_id" name="list_id" required="" type="hidden" value="{{list.id}}">

and also tried to pass it with different styles like (list.id), and (List.id) with a capital L like the DB class itself, I even tried to pass (db.get_or_404(List,>id<) but remembered that I need the id 😀

I am still learning and knowing the nooks and crannies is part of the quest
Thanks in advance

I have a problem with the way webpack bundles my files.

Consider the following files:

// utils/index.js

export const funcA = () => {
  return "funcA in CompA";
};

export const funcB = () => {
  return "funcB in CompB";
};

// components/ComponentA.js

import { funcA } from "@/utils";

export const ComponentA = () => {
  return funcA();
};

// components/ComponentB.js

import { funcB } from "@/utils";

export const ComponentB = () => {
  return funcB();
};

Also ComponentA is in one page and ComponentB is in another page.

You would expect webpack to place funcA in ComponentA chunk and funcB in ComponentB chunk however this isn’t what happening. Instead the whole utils file is placed in both ComponentA and ComponentB chunk although the other function is not used.

I have placed "sideEffects": false in my package.json file. Also i have added this webpack configs:

const nextConfig = {
  webpack: (config, { isServer }) => {
    config.optimization.splitChunks.chunks = "all";

    return config;
  },
};

None of this has helped.
Can anyone please guide me what is the problem and how can i fix it?

I am having a scenario where I need only option in mat multi select. Currently I am adding a button along with the options, and added a functionality to select single item. The issue I am facing is the text Only is getting appended with the option.
Here is the code snip:

<mat-select 
  [formControl]="selectionControl" (selectionChange)="selectionChange($event.value)" multiple
>
  <mat-option class="position-relative options-wrapper"
    *ngFor="let version of [1,2,3,4,5,6,7,8,9,10] [value]="version">
    <span>{{version}}</span>
    <button mat-button class="position-absolute only-btn" style="top:5px; right: 0px;"
      >Only</button>
  </mat-option>
</mat-select>

Any help to resolve this is appreciated.

I know this seems like a vague question but I’ll outline the items I cannot get to work correctly.

I mainly use the Generic Code Editor (it used to be called Generic Text Editor), for javascript coding and these things do not work as expected. I can;t imagine that I’m the only one unless I have completely missed how to use it.

1. I have inline variable types showing despite having this turned off in the preferences. Window->Preferences-> JS/TS (Wild Web Developer)->Javascript->Inlay Hint everything is unchecked yet I still see inline variables showing in grey.

2. Everytime I hit ENTER when typing code, the outline collapses and expands. All interaction stops, so it takes about 3 seconds for me to be able to stat typing the next line of code. Extremely annoying

3. There is no collapse all or expand all icons on the outline. Requires scrolling through the whole list in the outline, collapsing one by one. I have hundreds ofjavascript files with hundreds of functions in each file.

I’m at the point where I think I must have a faulty Eclipse installation or I am doing something fundamentally wrong with Wild Web Developer.

I am using
Wild Web Developer HTML, CSS, JSON, Yaml, JavaScript, TypeScript, Node tools 1.3.9.202411190713.
Eclipse Version: 2024-12 (4.34.0)
Build id: 20241128-0757

I have all js files to open using the Genric Code Editor.

If anybody has some hints to how I can use this better, I would be eternally grateful.
I have started using VSCode for my javascript, but that requires me to have 2 IDEs open for the one project and old habits are hard to toss.

I find myself coding JS in Eclipse on occassions and then things get out of synch. That’s clearly my own issue but I would love to be able to code everything in Eclipse.

It seems that angular refuses to update <input>.value if it is same as the previous bound value.
How to workaround this problem?

The example below can run on https://angular.dev/playground.
The example is meant to post-processes <input> value:

• Removes trailing slash on Enter;
• Restores previous value on Esc;

However, it doesn’t work in angular:

1. Let initial value be abc;
2. Type abc/// and Enter, input value is not updated to abc;
3. Type zzz and Esc, input value is not restored to abc;

import {Component, computed, signal} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

@Component({
  selector: 'myinput',
  template: `
    @let d = currentData();
    <div style="display: flex;">
      <pre>state: </pre>
      <pre>{{ d.state }}</pre>
    </div>
    <input #el type="text" value="{{d.value}}" [attr.v]="d.value" (keyup)="keypress($event)" (blur)="blur(el)">
  `,
})
export class MyInput {
  refresh = signal<void>(undefined, { equal: () => false });
  data = { state: 'init', value: 'init' };
  console = globalThis.console;

  currentData = computed(() => {
    this.refresh();
    return this.data;
  });
  keypress(kev: KeyboardEvent) {
    const elem = kev.target! as HTMLInputElement;
    if (kev.key === 'Escape') {
      return this.cancel(elem);
    } else if (kev.key === 'Enter') {
      this.data = { state: 'change', value: elem.value.split('/')[0] };
    } else return;
    console.log(`change:`, this.data);
    this.update();
  }
  cancel(elem: HTMLInputElement) {
    this.data = { state: 'cancel', value: this.data.value };
    console.log(`cancel:`, this.data);
    this.update();
  }
  blur(elem: HTMLInputElement) { /* return this.cancel(elem); */ }
  update() {
    let defer = false;
    // elem.blur();
    if (defer) {
      setTimeout(() => this.refresh.set(undefined), 0);
    } else {
      this.refresh.set(undefined);
    }
  }
}

@Component({
  selector: 'app-root',
  imports: [ MyInput ],
  template: `
    <myinput />
  `,
})
export class PlaygroundComponent {}

bootstrapApplication(PlaygroundComponent);

I am trying to encode all parameters before appending them to a web URL. The encoding works correctly for most parameters, but when the video title is in Japanese, it gets encoded twice. However, this issue does not occur with English characters.

    const generateVideoURL = async (
        vPath: string,
        videoTitle: string,
        completedId: string,
        startedAt: string,
        endedAt: string,
        testUrl: string
    ) => {
        const maxUrlLength = 2000;
      
        const estimatedOtherLength = 300;
        const maxTitleLength = maxUrlLength - estimatedOtherLength;

        let truncatedTitle = videoTitle;
        if (truncatedTitle.length > maxTitleLength / 3) {
            truncatedTitle =
                truncatedTitle.substring(0, maxTitleLength / 3) + '...';
        }
        let encodedTitle = encodeURIComponent(truncatedTitle);
        const queryParams = new URLSearchParams({
            vPath,
            vtitle: encodedTitle,
            cid: encodeURIComponent(completedId),
            start: encodeURIComponent(startedAt),
            end: encodeURIComponent(endedAt),
        });

        if (route.query.continue === 'retest') {
            queryParams.append('continue', 'retest');
        }

        let finalURL = `${testUrl}?${queryParams.toString()}`;                    
    };

How can I check the value of an input field in JavaScript whenever the value changes, whether through direct user input or by pressing a + or – button that increments or decrements the value by 1?

I tried using the input event, but it only fetched the value when the user typed in the input field. However, when the user used the + or – buttons to update the value, it didn’t fetch the updated value. I also tried using the change event, but it only worked dynamically while the user was typing. How can I fetch the value for all these cases?

I’m expecting a solution that can detect changes in the input field value in all situations and fetch the values dynamically on any change:

1. When the user types directly into the input field.
2. When the user uses the + or – buttons to increment or decrement the value.