Category: javascript

Category Added in a WPeMatico Campaign

JavaScript to calculate the sum of fields not working in HTML forms

Created a HTML form and Javascript to calculate the sum of different expense fields and display it in the sum field. But the sum is not changing dynamically

Sum of different expense fields to be calculated dynamically and to be displayed in the SUM field.

But the sum is not happening

function calculateSum() {
  // Get the values of the input fields
  const field1 = parseFloat(document.getElementById('food').value) || 0;
  const field2 = parseFloat(document.getElementById('travel').value) || 0;
  const field3 = parseFloat(document.getElementById('recharge').value) || 0;
  const field4 = parseFloat(document.getElementById('grocery').value) || 0;
  const field5 = parseFloat(document.getElementById('others').value) || 0;

  // Calculate the sum
  const sum = field1 + field2 + field3 + field4 + field5;

  // Update the sum field with the calculated value
  document.getElementById('sumField').value = sum;
}
body {
  background-color: lime;
}
<form action="recordexpense.jsp">
  <table align="center">
    <th>
      <h2>Enter your Expense</h2>
    </th>
    <tr>
      <td>Food : </td>
      <td><input type="number" name="food" value="food" oninput="calculateSum()"></td>
    </tr>
    <tr>
      <td>Travel :</td>
      <td> <input type="number" name="travel" value="travel" oninput="calculateSum()"></td>
    </tr>
    <tr>
      <td>Mobile/DTH/OTT recharge : </td>
      <td><input type="number" name ="recharge" value="recharge" oninput="calculateSum()">
      </td>
    </tr>
    <tr>
      <td>Grocery :</td>
      <td> <input type="number" name ="grocery" value="grocery" oninput="calculateSum()"></td>
    </tr>
    <tr>
      <td>Others :</td>
      <td> <input type="number" name ="others" value="others" oninput="calculateSum()"></td>
    </tr>
    <tr>
      <td>Sum: </td>
      <td><input type="number" name="sumField" readonly></td>
    </tr>
    <tr>
      <td><input type="Submit" name="Submit"></td>
    </tr>
  </table>
</form>

How to increase the value of a variable using setInterval?

I am trying to build a simple roleplay game where players can farm gold and wood and would like to have a function increase a variable “gold” when they decide to farm it.

So far here’s my code:

<body>
<p id="gold"></p>
<script>
let gold = 0;
let goldText = document.getElementById("gold");
function goldFarming(){
        setInterval(gold += 10, 5000);
        goldText.innerText = gold;
    }
    goldFarming();
</script>
</body>

It seems to be working one time only with my gold variable reaching 10 but never increasing to 20, 30 etc…

Any idea what I’m doing wrong?

Array “includes” returns false, but item exists [closed]

What am I doing wrong?

Here is my code:

let weekends_test=[6,5];
let day_of_week_curr=moment.unix(curr_time).format('e'); //returns 6 (I'm using moment.js library)
console.log (weekends_test.includes(day_of_week_curr)) //returns false, but true expected

indexOf instead includes returns “-1”

Maybe other way to find a value exists? Except “for” cycle?

How to find each occurrence of a “” within html and replace it

Hope you can help.

I would like to be able to take the following html example:

<p>This is some text.</p>

<p>This is some more text.</p>

and use a javascript function (not jquery) to find each unique occurrence of </p> and replace it so it becomes (for example)…

<p>This is some text. <span>Random text from function.</span></p>

<p>This is some more text. <span>Different random text from function.</span></p>`

To insert a random quote of the day or suchlike. This must be within the <p></p> tags.

React Apex Charts multiple y-axis

I am using React Apexcharts for my project and i am facing issues with it. Data is in the following format:

[
{
name: “Series A”,
type: “column”,
data: [44980, 50172, 39767, 24906, 26615, 26890, 23529],
},
{
name: “Series B”,
type: “column”,
data: [44980, 50172, 39767, 24906, 26615, 26890, 23529],
},
{
name: “Series C”,
type: “line”,
data: [5116, 4644, 5398, 3210, 4103, 5673, 5940],
},
{
name: “Series D”,
type: “line”,
data: [5319, 4878, 3923, 8416, 7553, 8709, 10000],
}
]

I want:
1)There should be 2 y-axis, one for ‘column’ and other for ‘line’.
2) For type ‘column’, the graph should be column and for type ‘line’, the graph should be line.
3) On disabling both line or both colunmn graph from legends, the respective y-axis should diappear.
4)Common tooltip at a point on x-axis.

My code :

export const Graph = () => {
  const seriesData =[
    {
      name: "Series A",
      type: "column",
      data: [44980, 50172, 39767, 24906, 26615, 26890, 23529],
    },
    {
      name: "Series B",
      type: "column",
      data: [44980, 50172, 39767, 24906, 26615, 26890, 23529],
    },
    {
      name: "Series C",
      type: "line",
      data: [5116, 4644, 5398, 3210, 4103, 5673, 5940],
    },
    {
      name: "Series D",
      type: "line",
      data: [5319, 4878, 3923, 8416, 7553, 8709, 10000],
    }
  ]

  const options = {
    tooltip: {
      y: {
        formatter: (val, { seriesIndex }) =>
          seriesIndex < 2 ? `${val} unit A` : `${val} unit B`,
      },
    },
    chart: {
      height: 250,
      type: "line",
      toolbar: { show: false },
    },
    plotOptions: {
      bar: {
        borderRadius: 0,
        columnWidth: "30%",
      },
    },
    markers: {
      size: [0, 0, 5, 5], // Markers for line series
      strokeColors: "#ffffff",
      hover: { size: 7 },
    },
    stroke: {
      width: [1, 1, 2, 2],
      curve: "straight",
    },
    series: seriesData,
    xaxis: {
      categories: [
        "27-Jul",
        "28-Jul",
        "29-Jul",
        "28-Aug",
        "29-Aug",
        "09-Oct",
        "10-Oct",
      ],
    },
    colors: ["#0A384D", "#7CC674", "#F0AB00", "#A5D8DD"],
    yaxis: [
      {
        title: { text: "MWh" },
        labels: {
          formatter: (value) =>
            value >= 1000 ? `${Math.round(value / 1000)} K` : value,
        },
      },
      {
        opposite: true,
        title: { text: "Rs/MWh" },
        labels: {
          formatter: (value) =>
            value >= 1000 ? `${Math.round(value / 1000)} K` : value,
        },
      },
    ],
    legend: {
      markers: { width: 10, height: 10, radius: 2 },
    },
  };

  return (
    <div>
      <ApexCharts
        options={options}
        series={options.series}
        type="line"
        height={350}
      />
    </div>
  );
};

Dynamic getStaticPaths in Next.js SSG for unknown value

I’m working with Next.js Static Site Generation (SSG) and need to generate static paths for a route like /recovery-password/[token]. However, the token value is unknown in advance and changes every time (e.g., it’s generated dynamically when a user requests a password reset).

Since my project is using static generation, I can’t switch to Server-Side Rendering (SSR). How can I handle this scenario while keeping my Next.js app statically generated?

What I Tried:

  • I attempted to use getStaticPaths to pre-generate pages for the /recovery-password/[token] route, but since the token is dynamic and unknown at build time, I couldn’t define the possible paths in advance.

  • I considered using fallback modes (true or blocking), but since the app is fully statically generated, this didn’t solve the issue.

Expected Outcome:
I wanted the /recovery-password/[token] page to be accessible with a dynamic token while keeping the project in static generation (SSG) mode.

Javascript Developer I questions [closed]

I was practicing JavaScript and came across this question:
I have the following HTML structure:

code here: <div id="main"><ul>
<li>Leo</li>
<li>Tony</li>
<li>Tiger</li></ul></div>

Question:
Which JavaScript statement will change “Tony” to “The Lion”? What’s the best way to do this? Also, could you explain the reason why it works?

I found this question on that source but unfortunately, I am unable to do this. Here is the link of source where i found this Javascript Developer I question: https://www.pass4future.com/questions/salesforce/javascript-developer-i

JavaScript DataTable Last Page not displaying any data

I have a list page which contains a datatable. When the number of records exceeds 10,000 ; and I navigate to last page by pagination on bottom right “>>”; The page is empty. Also the pagination structure on first page is like –

|<< | < | 1 | 2 | 3 | 402 | .. | > | >> |

But when I click on >> , the structure changes to as given below and no data –

|<< | < | > | >> |

Can anyone help me here to understand the Root Cause. It is working fine when number of records are less than 10,000.

list = dataTable.DataTable({
layout: {
    topStart: null,
    topEnd: null,
    bottomStart: [
        "info",
        {
            paging: {
                type: "full_numbers"
            }
        }
    ],
    bottomEnd: null
},
ordering: true,
searching: true,
stateSave: true,
stateDuration: -1,
serverSide: true,
processing: true,
scrollCollapse: true,
renderer: "bootstrap",
rowCallback: function(row, data, dataIndex) {
    dataIndex = dataIndex + 1;
    // Remove previous odd/even

Can I join a new object to a passed object without looping through the new object? [duplicate]

When passing an object to a function, it’s possible to add keys to the original object, but not to reassign it:

let data = { "foo": "bar" };
let new_data = { "bar": "foo", "baz": "foo" };

function addData(data) {
    for (let key in new_data) data[key] = new_data[key];
}

function setData(data) {
    data = {
        ...data,
        ...new_data,
    };
}

function assignData(data) {
    Object.assign(data, new_data);
}

setData(data);
console.log(data); // { "foo": "bar" }

assignData(data);
console.log(data); // { "foo": "bar" }

addData(data);
console.log(data); // { "foo": "bar", "bar": "foo", "baz": "foo" }

Is there a way to join a new object into the original object anyway, without looping through the new object and setting each individual key?

Visual Studio Code does not show red underline

My visual studio code doesn’t show red underline althought it undefine or import. But its still in some old project with old eslint version. I still install Eslint.
My setting:

{
  "workbench.colorTheme": "Default Dark+",
  "window.zoomLevel": 2,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.validate.enable": true,
  "typescript.validate.enable": true,
  "javascript.implicitProjectConfig.checkJs": true
}

[Example][1]
[1]: https://i.sstatic.net/rUjzzRek.png

KubeJS container item insertion

I have a rather simple problem:
Given the x, y and z coordinates of a barrel/chest, in a PlayerChatDecorateEventJS, I want to insert an ItemStack into it.

I have read through the generated docs for both KubeJS and Forge but couldn’t find any way to access a BlockEntity’s inventory. Sadly, neither mod has detailed docs, so they weren’t all that helpful.

My other approach was doing this via a command ran as the player:
(book is the ItemStack, player is just a Player obtained from the event, the copyx/y/z variables are integers.)

player.runCommand(`execute in minecraft:overworld run item replace block ${copyx} ${copyy} ${copyz} container.0 with ${book.getId()}${book.getNbt()}`);

When logging this command with the variables filled out I can run it from the console or as a player without problems. Weirdly enough, when I try to run it with the player.runCommand, I get the error message:
Target position ... is not a container.

I mean, it obviously is since the command works perfectly when run through the client, so what am I doing wrong?
If you find an alternative solution, or find a way to fix the first attempt, to achieve this I’ll also take that but I’d still like to know why this doesn’t work.

If it’s relevant, I’m on Forge 47.3.0 for Minecraft 1.20.1 on Java 17.
KubeJS is version 2001.6.5-build.16+forge.

Importing React using importmap not always loading

Basically I’m trying to load React from an external source using an import map (needed because multiple JS files use React). We have an issue where it loads when you first access the page, but if you try to reload it, it fails without any meaningful error. The only error logged is:

Uncaught TypeError: Failed to resolve module specifier “react”. Relative references must start with either “/”, “./”, or “../”.

Basically it looks like the browser doesn’t load the import map at all. Looking at the network tab confirms that the module JS files are not being fetched. The only way to get it to load again is Ctrl+F5.

In addition, on Firefox (latest version) it’s completely broken. Again, no meaningful error.

All browsers are fresh-installed and all extensions disabled.

This is the head section of the file (the file is too big to attach in its entirety):

<!DOCTYPE html><html lang="he" dir="rtl" class=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="color-scheme" content="dark light"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="modulepreload" href="/assets/entry.client-Bai6OFt8.js"/><link rel="modulepreload" href="/assets/chunk-IR6S3I6Y-Ct8-JFrb.js"/><link rel="modulepreload" href="/assets/with-props-5eOWdupz.js"/><link rel="modulepreload" href="/assets/clsx-B-dksMZM.js"/><link rel="modulepreload" href="/assets/index-B0KV9gXh.js"/><link rel="modulepreload" href="/assets/root-CsemyFcV.js"/><link rel="modulepreload" href="/assets/button-Gtl0NDqm.js"/><link rel="modulepreload" href="/assets/mode-toggle-L9ENPaWS.js"/><link rel="modulepreload" href="/assets/login-CJsWJ0HR.js"/><script type="importmap">{"imports":{"react":"https://esm.sh/react","react-dom":"https://esm.sh/react-dom","react-dom/client":"https://esm.sh/react-dom/client"}}</script><script>
(() => {
  const theme = window.matchMedia("(prefers-color-scheme: light)").matches
    ? 'light'
    : 'dark';
  
  const cl = document.documentElement.classList;
  const dataAttr = document.documentElement.dataset.theme;

  if (dataAttr != null) {
    const themeAlreadyApplied = dataAttr === 'light' || dataAttr === 'dark';
    if (!themeAlreadyApplied) {
      document.documentElement.dataset.theme = theme;
    }
  } else {
    const themeAlreadyApplied = cl.contains('light') || cl.contains('dark');
    if (!themeAlreadyApplied) {
      cl.add(theme);
    }
  }
  
  const meta = document.querySelector('meta[name=color-scheme]');
  if (meta) {
    if (theme === 'dark') {
      meta.content = 'dark light';
    } else if (theme === 'light') {
      meta.content = 'light dark';
    }
  }
})();
</script><link rel="stylesheet" href="/assets/root-DvUHNLVV.css"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&amp;display=swap"/></head>

Thank you!

Which programming language is the translation done into?

I found a piece of code.
In the JavaScript programming language
The translation was interesting.
But I don’t know what language it was translated into.
I would appreciate it if you could help me decode it.
Thanks in advance

console.log(eval(“([][[]]+[])[!+[]+!+[]]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]]+[]+([][‘entries’]()+”)[2]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+([][‘entries’]()+”)[2]+[!+[]+!+[]+!+[]]+[]+[!+[]+!+[]]+[]+[!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+([][[]]+[])[!+[]+!+[]]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]]+[]+([][[]]+[])[!+[]+!+[]]+[+!+[]]+[]+[!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]]+[]+(![]+[])[+[]]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+([][‘fill’]+”)[3]+[+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+(![]+[])[+[]]+([][[]]+[])[!+[]+!+[]]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]]+[]”));

<script>
    console.log(eval("([][[]]+[])[!+[]+!+[]]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]]+[]+([]['entries']()+'')[2]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+([]['entries']()+'')[2]+[!+[]+!+[]+!+[]]+[]+[!+[]+!+[]]+[]+[!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]]+[]+([][[]]+[])[!+[]+!+[]]+[!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]]+[]+([][[]]+[])[!+[]+!+[]]+[+!+[]]+[]+[!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]]+[]+(![]+[])[+[]]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+([]['fill']+'')[3]+[+!+[]]+[]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+(![]+[])[+[]]+([][[]]+[])[!+[]+!+[]]+[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]+[]+[!+[]+!+[]+!+[]]+[]"));
    
</script>