Is it possible to update the event parameters with every click?

Is there a way to dynamically add a Select box for selecting a condition each time the "add" button is clicked?

For example, when the add button is clicked, I would like the following elements to be continuously added:

https://i.stack.imgur.com/6bad2.png

However, there seems to be an issue here. This means that the event parameters need to increase every time the button is clicked.

Here are some example functions:

test1.html

function Value(){
    google.script.run.addOption(value1,value2,value3,value4,value5);}

 test1.gs

function addOption(e1,e2,e3,e4,e5) {
  if(e1 == ‘a’){
     e2+’test’
  else{
     e2 
  }

  if(e3 == ‘b’){
      e3 = e2+’hi’
  }else{
      e3
  }
}   

It should work in a similar manner like this: value1 => e1 value2 => e2 value3 => e3…

In this scenario, a new Select box should be added every time the "add" button is clicked. If you select 3 additional values,

 test1.html

 function Value(){

google.script.run.addOption(value1,value2,value3,value4,value5,value6,value7,value8);}


 test1.gs

function addOption(e1,e2,e3,e4,e5,e6,e7,e8) {
//}

Is it possible to achieve this functionality? Any assistance would be greatly appreciated.

Answer №1

I have considered two possible solutions

  1. One option is to pass a single record, such as an array, to your function. This allows for flexibility in the number of elements within the array without changing the number of arguments passed to the function.

  2. An interesting feature in JavaScript is that functions do not enforce strict checking on the number of arguments received. This means you can pass any number of arguments to a function and access them using the argument property of the function object. For example:

    function myFunction(a) { console.log(arguments[3]); } // prints the fourth argument passed to the function

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unraveling JSON data retrieved from a MySQL query

After successfully encoding a MySQL result from PHP into JSON, I am now faced with the task of decoding it using JavaScript. Let's assume that my string returned is: [{"0":"x","1":"z"},{"0":"xs","1":"zz"}] I would appreciate some guidance on how to ...

Encountering the error `ReferenceError: document is not defined` when trying to deploy a Next.js project on Vercel

I recently worked on a Next JS project and deployed it to Vercel. Initially, everything was running smoothly, so I didn't check the website status for a while. I was just developing it locally and pushing updates to GitHub. However, when I finally rev ...

Unraveling the Mysteries of Node.js Application Logging

We've been having smooth sailing with our Kube cluster on AWS, but there seems to be a recurring issue with our Node app crashing and generating repetitive logs from our instances... I've scoured the internet for solutions but haven't had m ...

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

I am experiencing an issue where the dropdown closes after the first selection, despite setting close-on-select="false". However, it works properly after the initial select. You can observe this behavior directly on the homepage at the following link: vue ...

Expanding the functionality of Element.prototype, problem related to anchor

Consider the following code: A JavaScript (JS) Snippet Element.prototype.changeInnerText = function(str) { this.textContent = str; return this; } let divElement = document.createElement('div').changeInnerText('new div text'); / ...

Condense categories

Hello there, I'm currently working on a table that contains different groups, and I am trying to figure out how to collapse categories within my table. Check out the Plunker here This is the HTML code snippet I am using: <table border=1> ...

NextJS build problem causing all content to become static

As a newcomer to NextJS with prior experience in basic React apps, I recently attempted to deploy a CRUD NextJS app (utilizing prisma and mongoDB). Everything runs smoothly with npm run dev, but issues arise when transitioning to npm run build followed by ...

What are your thoughts on Uptrends vs Dynatrace for Website Monitoring?

I'm seeking recommendations for improving monitoring on a retail website. Any advice would be appreciated. Thank you in advance. ...

Why is passing data:{} to a route essential for achieving the desired outcome?

Check out the Angular Material Documentation Site passing {} to the Homepage route: {path: '', component: HomePage, pathMatch: 'full', data: {}} I'm interested in knowing the significance of data: {}. Recent Discovery Closer ex ...

axios: prevent automatic sorting of objects according to keys

When using axios, I am receiving an API response. To send the sorted API response based on name, I use the following endpoint: http://localhost:8000/api/ingredients/ordering=name The actual object received from my server looks like this: { 2:{"id":2 ...

Is NextJS rendering solely on the server, or is it capable of rendering on both

Within my users.js JSX file, I have an exported component that looks like this: ... return <MainContainer keywords="users"> export default Users During the process of SSR/SSG, the browser displays the users HTML (comprising of <li> t ...

Navigating between two intervals in JavaScript requires following a few simple steps

I have created a digital clock with a button that switches the format between AM/PM system and 24-hour system. However, I am facing an issue where both formats are running simultaneously, causing the clocks to change every second. Despite trying various s ...

Arranging mat-checkboxes in a vertical stack inside a mat-grid-tile component of a mat-grid-list

I'm looking to create a grid list with 2 columns, each containing 2 checkboxes stacked vertically. While I found this helpful question, it still involves a lot of nested divs. Is there a cleaner way to achieve this layout? Here's how I currentl ...

What is the best way to apply a hover effect to a specific element?

Within my CSS stylesheet, I've defined the following: li.sort:hover {color: #F00;} All of my list items with the 'sort' class work as intended when the Document Object Model (DOM) is rendered. However, if I dynamically create a brand new ...

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

What could be causing my Vue application to not launch after executing `npm run serve`?

These past 24 hours have been a struggle for me. I recently embarked on the journey of learning Javascript, and my choice of JS framework was Vue JS. However, when I run npm run serve, my Vue JS app bombards me with numerous errors that seem to make no se ...

Converting a date from PHP to JavaScript

My PHP code generates the following date: <?php date_default_timezone_set('Europe/London'); echo date('D M d Y H:i:s O'); ?> Additionally, I have a JavaScript/jQuery script that displays this date on the website: setInterval( ...

What is the best way to create a backup copy of my project using git?

To ensure the safety of my project, I took the necessary steps to back it up. First, I initialized a repository using git init Following that, I committed all files by executing git add . git commit -am "first commit" Now, the next step involves pushin ...

Deploy Node.js on a Debian server hosted on Google Compute Engine

Currently, I am operating a Debian server on Google Compute Engine using a host called example.com. My goal is to run a node.js app within a specific directory on this server, for instance, example.com/mynodeapp. Fortunately, the necessary components such ...

Retrieve new data upon each screen entry

After running a query and rendering items via the UserList component, I use a button in the UserList to run a mutation for deleting an item. The components are linked, so passing the deleteContact function and using refetch() within it ensures that when a ...