VUEJS: passing value of javascript button

Question

I am trying to pass the value of a button to a function when it is clicked. Because the buttons were created as a javascript element I'm not sure how to do it.

    methods:{
      createButtons() {
        
        var i;
        var rows =["9","8","7","6","5","4","3","2","1","0","•","="];
        var elDiv = document.getElementById("myDIV");
        for (i=0; i<12; i++){ 
          var btn = document.createElement("BUTTON");
          btn.value = i
          btn.style.height = "40px"
          btn.textContent = rows[i];
          btn.onclick = buttonvalue;
          elDiv.appendChild(btn);  
        }
        var pressedbutton = document.getElementById("calculate");
        pressedbutton.remove();
      },
    }
  }

function buttonvalue(i){
  alert(i);
}

Decade Moon · Accepted Answer · 2020-08-13 03:08:23Z

1

This is an XY problem. Don't create DOM elements manually like this, that's what Vue is for.

But to answer your question, you can do something like this:

const captureI = i;
btn.onclick = () => buttonvalue(captureI);

I copied i into a new local variable because i changes value by the for loop.

Or you can just write the for loop like this instead:

for (let i = 0; i < 12; i++) {
  // ... omitted code ...
  btn.onclick = () => buttonvalue(i);
}

answered Aug 13, 2020 at 3:08

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

Collectives™ on Stack Overflow

VUEJS: passing value of javascript button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related