Having difficulty communicating with the smart contract using JavaScript in order to retrieve the user's address and the balance of the smart contract

Hi there, I am a newcomer to the world of blockchain technology. Recently, I created a smart contract designed to display both the contract balance and user data, including the address and balance of the user. The smart contract allows users to deposit funds into it as well. However, despite functioning perfectly in Remix, I am facing issues with displaying the contract balance and user data.

Below is the code for my smart contract:

// SPDX-License-Identifier: MIT
pragma solidity >=0.6.0 <0.9.0;

contract UserData {

    address owner;
    uint bal;

    constructor() {
        owner = msg.sender;
    }

    receive() external payable {}

    function getBalance() view public returns(uint) {
        return bal;
    }

    function deposit(uint amt) external payable {
        bal = bal + amt;
        bal += msg.value;
    }

    function getOwner() public view returns (address) {    
        return owner;
  }
  
    function getUserBalance() public view returns(uint256){
        return owner.balance;
    }

    function withdraw(uint withdrawAmount) external payable {
        require(msg.sender == owner, "Only owner can withdraw!");
        payable(msg.sender).transfer(withdrawAmount);
    }
}

Additionally, here is my JavaScript code snippet:

<script>
var contract;

$(document).ready(function(){
    web3 = new Web3(web3.currentProvider);

    var address = "0xd3553504e02681C4d4f1969017dAca11003bB496";
    var abi = [];

    contract = new web3.eth.Contract(abi, address);

    contract.methods.getBalance().call().then(function(bal){
        $('#balance').html(bal/10000000000000000);
    })

    contract.methods.getOwner().call().then(function(address){
        $('#userAddress').html(address);
    })
})

$('#deposit').click(function(){
    var amt = 0;
    amt = parseInt($('#amount').val());

    web3.eth.getAccounts().then(function(accounts){
        var acc = accounts[0];
        return contract.methods.deposit(amt).send({from: acc});
    }).then(function(tx){
        console.log(tx);
    }).catch(function(tx){
        console.log(tx);
    })
})
</script>

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 retrieve the value from a callback function in the outer scope?

I'm facing an issue with accessing values from a callback function in the parent scope. Essentially, I need to retrieve and use data fetched by the s3.getObject() function in the outer scope (last line). Below is my JavaScript code used for fetching ...

Analyzing file data while uploading the file

Does anyone have a solution for extracting the content from an uploaded file in express/nodejs without saving it as a temporary file? I have code that successfully pipes the input to a filestream, but I'm struggling to deserialize the upload to a pla ...

What is the best way to implement page navigation within Nuxt?

Is there a way to efficiently paginate and display comments from this particular API? Should we retrieve the entire object and use slice() for pagination, or is there a specific method for fetching comments in chunks for a single page? Furthermore, how c ...

Prevent the SnackBar from extending to full width in case of a smaller window size

Is there a solution to prevent the SnackBar from spanning the entire width of the screen when the window is narrow? ...

Vue Component, switching state

Feeling like I'm losing it, this should be really simple but it's not working... The idea is that when the link is clicked, the display property toggles between true and false. However, it's not working as expected. Vue.component('d ...

Unveiling the Mystery: How Browser Thwarts Server Push in HTTP/2.0

After studying the documentation of HTTP/2.0, I discovered that it is feasible to completely close a referenced stream using the RST_STREAM frame. Check it out here: ()! I am curious about how this feature can be implemented in popular web browsers such a ...

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos: <div data-tippy-root id ...

The function replace does not exist in t(…)trim

I encountered an error in my code that breaks the functionality when checked using console.log. var map = L.map('map').setView([0, 0], 2); <?php $classesForCountries = []; if (have_posts()) : while (have_posts()) : the_post(); ...

"The use of objects as a React child is not permitted" and code linters

I'm encountering an issue with a simple component and I can't figure out why. The error message and code snippet are as follows: Error: Objects are not valid as a React child (found: object with keys {Cfor, children}). If you meant to render a ...

What is the best method for retrieving the character's ID from within an object?

Exploring my collection of movies, I discovered that each movie contains an array of characters. My goal is to display specific information about each character (such as their name and age) when clicked on, requiring me to obtain the id of each character. ...

Unable to send data using GET method after implementing passportjs integration

In the route.js file, I have implemented the following REST method: app.get('/api/todos', isAuthenticated, function(req, res) { DB.TodoTable.find() .exec(function(err, todos) { res.json(todos, function(err){ if (err) ...

Pass the chosen option to PHP using Ajax within the same webpage, utilizing HTML

My Goal: I am working on a HTML/PHP page that displays the home page of my website. One section on this page is dedicated to highscores, with data retrieved from a database. Users can use a Select box to choose how the highscores are sorted. View the high ...

The TypeScript compiler is generating node_modules and type declaration files in opposition to the guidelines outlined in the tsconfig.json file

For the past week, I've been trying to troubleshoot this issue and it has me completely puzzled. What's even more puzzling is that this app was compiling perfectly fine for months until this problem occurred seemingly out of nowhere without any c ...

I am looking to transfer the value of one textbox to another textbox within a dynamic creation of textboxes using JavaScript

var room = 1; function add_fields() { room=$('#row_count').val()-1; room++; var objTo = document.getElementById('education_fields'); var divtest = document.createElement("div"); divtest.setAttribute("class", "form- ...

Alter the class of the div element every three seconds

Greetings, I trust everyone is doing well. I am in need of some assistance from your brilliant minds. I have a circular div along with three CSS classes, and my objective is to switch the div's class and update the label text every 3 seconds. Any insi ...

What is the significance of the error message '[WDS] Disconnected!' in the context of using webpack and Vue.js?

Currently, I am engaged in a Django project that utilizes Vue.js for the frontend. Whenever I refresh the page, I encounter the "[WDS] Disconnected!" error. Despite the website's full functionality and absence of issues, this error appears every time ...

Is there a way to stop a specific route in Express from continuing further execution without completing its function?

In my post route, I need to ensure that the user has provided all the necessary data in the body. To achieve this, I have added an if block to check for errors. router.post("/", (req, res) => { if(req.body.age < 24) { res.send("You are too you ...

Node.js server experiences a crash after attempting to send a large string using res.send()

I've recently started learning JavaScript and NodeJs. I'm facing an issue with my Nodejs application crashing when a get request is made, specifically when trying to return a large string. app.mjs app.get('/log', function (req, res) { ...

What is the best way to read a file or Stream synchronously in node.js?

Kindly refrain from lecturing me on asynchronous methods. Sometimes, I prefer to do things the straightforward way so I can swiftly move on to other tasks. Unfortunately, the code below is not functioning as expected. It closely resembles code that was po ...