how to fix Javascript function arguments (when i use a variable to pass the argument)

Question

<p id="demo">Click me.</p>
<p id="demo2">Click me.</p>
<script>
x="demo";
b="ttt";
document.getElementById("demo").onclick = function() {myFunction(x,b)};
x="demo2";
b="555"
document.getElementById("demo2").onclick = function() {myFunction(x,b)};
function myFunction(x,b) {
  document.getElementById(x).innerHTML =b ;
}

My intent is for demo, use onclick function with x="demo" b="ttt"; and for demo 2, use onclick function with x="demo2" and b="555". but seems both functions used most updated x and b values.

Ele · Accepted Answer · 2018-02-04 01:41:50Z

1

You're re-assigning `x` variable.

The best approach is close your logic with functions, so you can create two functions called demo and demo2.

Look at this code snippet

let demo = function(x,b) {
  document.getElementById("demo").onclick = function() {
    myFunction(x, b)
  };
};

let x = "demo";
let b = "ttt";
demo(x, b);

let demo2 = function(x,b) {
  document.getElementById("demo2").onclick = function() {
    myFunction(x, b)
  };
};

x = "demo2";
b = "555"
demo2(x, b);

function myFunction(x, b) {
  document.getElementById(x).innerHTML = b;
}

<p id="demo">Click me.</p>
<p id="demo2">Click me.</p>

See? now your logic is working!

edited Feb 4, 2018 at 1:41

answered Feb 4, 2018 at 1:12

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vicky Yu Over a year ago

Thanks. But if there are hundreds of x and b... is creating hundreds of onclick function the only option? I was thinking to do that using a loop and use one function and pass x,b through that function's argument.but seems that function always uses the most updated value of x/b (not the x/b value when document.getelement("demo").onclick=funcion happens).

Tamiko · Accepted Answer · 2018-02-04 02:31:54Z

or another way to think about it is like this... but yeah, you probably want to do what Ele did ^

<html>

  <button id="demo">Click me.</button>
  <button id="demo2">Click me.</button>
  
  <script>
    var x = "demo";
    var b = "ttt";
    document.getElementById("demo").addEventListener(
      "click", () => myFunction(x, b)
    );

    function diffScope() {
      var x = "demo2";
      var b = "555"
      document.getElementById("demo2").addEventListener(
        "click", () => myFunction(x, b)
      );
    }
    
    function myFunction(x, b) {
      document.getElementById(x).innerHTML = b
    };
    
    // Note: you're initializing that inner function called diffScope
    // from above AFTER the first "demo" has already been assigned 
    // the eventListener

    diffScope();

  </script>
</html>

Collectives™ on Stack Overflow

how to fix Javascript function arguments (when i use a variable to pass the argument)

2 Answers 2

You're re-assigning `x` variable.

Look at this code snippet

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You're re-assigning x variable.

Look at this code snippet

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

You're re-assigning `x` variable.