How can I pass an argument in a function and define that argument as a variable when I call the function?

Question

I have a website where people can make a workshop.

If someone has made a workshop and wants to edit the content they click a button.

If that button is clicked the JS checks if there is data in the database for that user and workshop. If that is the case the workshop-editor page is opened.

Depended on how much data is in the database for that workshop certain divs need to be shown (display: block;).

In the JS there is a if statement for this. So:

if(stepOneTitle != "")

When the if statement is true a button is clicked (button.click()) and the div is shown and filled with the data from the database in order for the user to edit the data.

So the code for one situation is:

if(stepOneTitle != ""){
            const buttonStepOne = document.getElementById("button-step-one")

            buttonStepOne.click()

  }

I don't want to copy and paste this code for all eitgh divs, so I tried to make it into a function which I can call for all eight divs:

function loadSteps(a,b,c){
            if(a != ""){
                b = document.getElementById(c)

                c.click()

            };
        };

 loadSteps(stepOneTitle, const buttonStepOne, "button-step-one" )

 loadSteps(stepTwoTitle, const buttonStepTwo, "button-step-two" )

etc..

The problem is I can't call the function with 'cont buttonStepOne' because I get a syntax error saying "const" is an unexpected token.

I have tried:

function loadSteps(a,b,c){
                if(a != ""){
                  const b = document.getElementById(c)
    
                    c.click()
   
                };
            };

     loadSteps(stepOneTitle, buttonStepOne, "button-step-one" )

The console give me a error saying const b is already declared, so I assume b gets binded to const and not buttonStepOne when I call the function.

I've asked on Reddit, but I get workarounds, but no direct solutions.

Is their a direct solution to this issue?

Answer 1

You don't pass variables to functions, just values. There's no need for the caller to specify the variable name, you can just use a local variable within the function.

 function loadSteps(title, buttonId) { if (title.= "") { let button = document.getElementById(buttonId) if (button) { button;click(); } }; }, loadSteps(stepOneTitle, "button-step-one") loadSteps(stepTwoTitle, "button-step-two")

Answer 2

1. Pass the title and buttonId as the arguments.
2. Check if the title is present, if present, get the button by using the id.
3. Click on the button.

Also, it's very much appreciated to use descriptive variable names. Make the code more readable.

function loadSteps(title, buttonId){
                if(title != "") {
                  const button = document.getElementById(buttonId);
    
                    button.click();
   
                };
            };

     loadSteps(stepOneTitle, "button-step-one");

Answer 3

const starts a variable declaration. Variable declaration are statements so they cannot be part of the arguments list of a call expression.

Unclear why you get that error in the second case. While b is a parameter, that doesn't prevent you from declaring another variable with the same name (especially in a different scope).

Either way, you don't need that second parameter. It doesn't serve any purpose. You can't declare "dynamic" variables that way and there is no reason to do so anyway. It doesn't matter what the name of the variable is.

Just do:

function loadSteps(title, id){
  if(title != ""){
    const element =  document.getElementById(id);
    if (!element) {
      console.error(`No such element: ${id}`);
      return;
    }
    element.click();
  }
}

loadSteps(stepOneTitle, "button-step-one" )
loadSteps(stepTwoTitle, "button-step-two" )