Using VUEJS to pass the value of a JavaScript button

I am having difficulty passing the value of a button to a function when it is clicked. These buttons were dynamically created using JavaScript, which complicates the process.

    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);
}

Answer №1

It's important to note that manual creation of DOM elements is not recommended, as Vue is designed for that purpose.

However, if you still need to, you can achieve it by following this approach:

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

The reason for copying i into a new local variable is because its value changes within the for loop context.

Alternatively, you can rewrite the for loop like this:

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

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

What is the best way to eliminate duplicate items in JavaScript?

Note: I am aware that we use Set to eliminate duplicates in an array. I have a date dropdown. When I select a date, it displays the date correctly in a list. However, the problem arises when I select an already chosen date, it still shows up in the list. ...

I'm receiving the error message "app.get is not a function" when using Express.js. What could be

Having trouble understanding why I am getting an error: app.get is not a function in the upload.js file with the provided code snippet. In my index.js file, I have set up everything and exported my app using module.exports = app. I have also used app.set( ...

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

After transitioning a react js project to react js with typescript, I made sure to move all the code to the typescript react app and added types for every necessary library. In this process, I encountered an issue with a file called HeatLayer.js, which is ...

Visual feedback: screen flashes upon clicking to add a class with jQuery

I have successfully added a click event to my pricing tables in order to apply an animation class on mobile devices. However, I am facing an issue where every time I click on a pricing option on my iPhone, the screen flashes before the class is applied. Is ...

XMLHttpRequest encounters issues with 'Access-Control-Allow-Origin'

I have developed a JavaScript file that tracks and saves the coordinates of mouse clicks on a web page using an AJAX call. In one website (domain2), I have included the following code in the head section: <script src="http://www.domain1.com/scan/track/ ...

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

Running SOAP services with Jasmine framework in Node.js: A step-by-step guide

I've been successfully using the jasmine-node framework for automating my API tests. I can easily run REST services and retrieve results using node-fetch or http modules. However, my project also requires testing SOAP services. Can anyone provide guid ...

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

Monitoring the health and availability of AWS S3 buckets via API for checking their status

While working on a node.js application, I successfully implemented s3 file upload. However, there have been instances when the s3 bucket goes down for maintenance or other reasons. To address this issue and keep users informed, I wanted to incorporate an A ...

jQuery wrapAll issue

I have a repeating group of three divs in my code that I need to wrap together. Here's an example from my HTML: <div class="one" /> <div class="two" /> <div class="three" /> <div class="one" /> <div class="two" /> <d ...

Safari browser removes spaces after commas in cookie values

I'm encountering an issue when trying to set a session cookie for storing an Address. It seems that whenever I include a comma followed by a space in the cookie's value, Safari automatically removes the spaces after the commas, causing the format ...

Error: The JSON input unexpectedly ended, however the PHP file itself is error-free

When trying to display data retrieved using PHP through JSON/Ajax, I encountered an error message: [object Object] | parsererror | SyntaxError: Unexpected end of JSON input The PHP script is functional (I can view the JSON output by directly accessing th ...

What causes the left click to not trigger in Kendo's Angular Charts?

My homepage features a simple bar chart that displays correctly, but I am having trouble capturing the left click event (the right click works fine). This is an example of code from my template: <kendo-chart *ngIf="(dataExists | async)" [ ...

Encountered an issue with npm install showing error message 'Failed: connection closed unexpectedly.'

Encountered an issue while running the command npm install module-name --save. The installation fails regardless of the module I try to install. Even specifying it in the package.json and then running npm install for the entire project results in failure ...

Drop draggable items on top of each other

I'm wondering if there's a way to drag jQuery elements into each other. To illustrate my question, I've duplicated this code (link) and made some style changes. Here is the updated version: Fiddle Link. In the current setup, you can drag e ...

What is the recommended sequence for using decorators in NestJS: @Body(), @Params(), @Req(), @Res()?

How can I properly access the res object to send httpOnly cookies and validate the body with DTO? I keep running into issues every time I attempt it. What is the correct order for these parameters? ...

The React Bootstrap modal fails to display the value of an argument passed through a parameter

I am currently working on a project that utilizes React for its front end development. Below is the code snippet: import React, {useState} from 'react'; import Tree from 'react-d3-tree'; import { useCenteredTree } from "./helpers&q ...

Puppeteer - How to manage a basic authentication prompt that pops up after clicking a link

I need assistance with handling a basic authentication popup using puppeteer=5.2.1. My specific scenario is outlined below. 1. Start an application 2. Click on a button on the home page 3. This action opens a new window (saml) requesting email input Withi ...

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

Transmit a JSON object to the server using a JavaScript function

I am attempting to transmit a JSON object to a remote server but I am not receiving a success message. Can someone please help me identify what is incorrect in this code: function sendSMS(){ var input = '{"header":"****","****":*****,"****":"**** ...