Retrieve data from a variable that is located within a function that is also

Question

Retrieve data from a variable that is located within a function that is also

 <script>
        const tally ={
            total: 0,
            increase: function(){
                total++;
                console.log(total);
            }        
        }
        const selectBtn = document.getElementsByTagName('button')[0];
        selectBtn.addEventListener('click', tally.increase, false);

    </script>

When executing this code, I'll encounter an error due to an undefined variable. To resolve this, one solution is to include tally.total within the function. However, I am looking for alternative approaches. Is there another method available?

javascript

Answer 1

Answer №1

There is no alternative solution unless you define a global variable outside of the counter.

Here's an example:

var cnt = 0;
const counter = {
    inc: function () {
        cnt++;
        console.log(cnt);
    }
}
const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', counter.inc, false);

<button name="button">click me</button>

However, there is a more efficient way to achieve this. Instead of using cnt, you can use counter.cnt:

const counter ={
            cnt: 0,
            inc: function(){
                counter.cnt++;
                console.log(counter.cnt);
            }        
        }
        const button = document.getElementsByTagName('button')[0];
        button.addEventListener('click', counter.inc, false);

<button name="button">click me</button>

Answer 2

There is no alternative solution unless you define a global variable outside of the counter.

Here's an example:

var cnt = 0;
const counter = {
    inc: function () {
        cnt++;
        console.log(cnt);
    }
}
const button = document.getElementsByTagName('button')[0];
button.addEventListener('click', counter.inc, false);

<button name="button">click me</button>

However, there is a more efficient way to achieve this. Instead of using cnt, you can use counter.cnt:

const counter ={
            cnt: 0,
            inc: function(){
                counter.cnt++;
                console.log(counter.cnt);
            }        
        }
        const button = document.getElementsByTagName('button')[0];
        button.addEventListener('click', counter.inc, false);

<button name="button">click me</button>

Answer 3

Answer №2

const counter = {
    value: 0,
    increase: function() {
        this.value++;
        console.log(this.value);
    }        
}
const btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', () => counter.increase(), false);

<button name="button">Click Here</button>

Answer 4

const counter = {
    value: 0,
    increase: function() {
        this.value++;
        console.log(this.value);
    }        
}
const btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click', () => counter.increase(), false);

<button name="button">Click Here</button>

Retrieve data from a variable that is located within a function that is also

Answer №1

Answer №2

Similar questions

Learn how to retrieve the TextBox value from a button click within a Nested Gridview

Create an interface object in TypeScript with no initial properties

What is the most effective method for transferring and accessing data within a child form component?

What is causing the addListener function in the events class to malfunction?

The textbox is only enabled when a specific selection is made in the dropdown menu

Please replace the text with only letters and then submit it without any spaces, periods, commas, or other symbols

Updating the value of each preceding sibling of every checked checkbox using jQuery upon form submission

React-Redux - Implement a button toggle functionality to display or hide additional information

Stop button from being clicked inside a div when mouse hovers over it

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

Tips on invoking a method from a JavaScript object within an AJAX request

What's the best way to implement two AJAX field validations to prevent button redirection on a website?

How to send parameters through the Google Maps API URL using Vue.js

The jQuery change event is not triggered for <input type="file"> when a file is dropped on the label

Implementing restriction measures for deterring harmful conduct within ExpressJS

Node Js is a lightweight server that allows for easy querying of URLs

While validating in my Angular application, I encountered an error stating that no index signature with a parameter of type 'string' was found on type 'AbstractControl[]'

When using Vue.js router.push, the URL gets updated but the RankerDetail component does not refresh when navigating with a button

Having difficulty retrieving the necessary information for manipulating the DOM using Express, Ajax, and Axios

What is the benefit of using $q.all() with a single promise in AngularJS?