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

Tips for positioning input fields and labels in both horizontal and vertical alignment

Below is the HTML code, and I want the tags to look like this: label1: input1 label2: input2 label3: input3 Instead, it currently looks like this: label1: input1 How can I modify the HTML to achieve the desired format? HTML: <div class=" ...

Is time-based revalidation in NextJS factored into Vercel's build execution time?

Currently overseeing the staging environment of a substantial project comprising over 50 dynamic pages. These pages undergo time-based revalidation every 5 minutes on Vercel's complimentary tier. In addition, I am tasked with importing data for numer ...

Require a more efficient strategy for iterating through lines of input

One of the challenges I'm facing with my form is that it contains 5 input lines. I need to keep any blank lines that are sandwiched between two filled lines, while removing all others. For instance, if the first line is blank, the second line contains ...

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. ...

Click on a button to completely remove all JavaScript from your website using jQuery

I'm currently experiencing some difficulties with my website Concept Studio. On a specific page, I have a typing animation within a form and I'd like to include a button that allows users to skip the animation. However, I'm unsure of how to ...

Why does the content not appear again when switching between tabs?

Hello! I'm facing an issue with toggling between two sets of content on my page. Initially, the correct content shows up, but when I switch tabs, the new content doesn't appear. Furthermore, if I click back to the first tab, that content disappea ...

Differences in how line breaks are handled in script output have been observed when comparing Atom and Notepad

Currently, I am utilizing a small script that generates a .txt file and inputs some data into it. Strangely, when I open the .txt file in Atom, the content appears on separate lines as I intended. However, when I access the same file in notepad, all the co ...

Is there a way to stop text from wrapping between words and punctuation marks using CSS or jQuery?

There is a paragraph containing some text. One issue I am facing is that punctuation at the end of a word may get wrapped to the next line, as shown here: This is the sentence, This is a new line Is there a way to fix this using CSS or jQuery? ...

Exploring ways to utilize Next.js (React) for formatting date and time with either Moment.js or alternate

When deciding on the best method for handling date formats in my next front-end app, should I use Moment.js or JavaScript functions? The data is sourced from the backend as the date type, and I want it to be displayed in a user-friendly format while consid ...

Adding JSON data to an HTML document

Seeking guidance on how to efficiently parse and display information from a JSON file consisting of 3 objects onto a widget. Unsure of the best approach to achieve this task. Any suggestions or methods would be greatly appreciated. Widget Structure: < ...

Leveraging jQuery to Avoid Memory Leaks

After utilizing jQuery for a couple of months and delving into Javascript memory leaks for several days, I have two concerns related to memory leaks and jQuery: When I bind events (using .bind()) in jQuery, do I need to unbind them (.unbind()) before l ...

Preserve content from a hyperlink using JavaScript

How can I store a value to the cache using JavaScript when clicking on an anchor link? The code below sets up the dynamic content: <a align="left" href="projectoverview.html">Test Manager</a> I want to save the text "Test Manager" to the cach ...

One approach to animating elements on a web page is by utilizing Node.js

Imagine you want to programmatically define animated movement for elements on a web page. In JavaScript, this can be achieved using techniques outlined in this helpful guide: How TO - JavaScript HTML Animations. But how would you do this in Node.js? UPDAT ...

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

Creating a JSON array using looping technique

I am attempting to construct a JSON array using a loop where the input className and value will serve as the JSON obj and key. However, I am facing difficulties in creating one and cannot seem to locate any resources on how to do so. Below is an example sn ...

What is the reason behind the execution of componentDidMount occurring after componentWillUnmount?

I have been exploring the differences between componentDidMount and componentWillUnmout by experimenting with the following code: class App extends React.Component { constructor(props) { super(props); this.state = { name: "", ...

Compilation error in Angular 7 development process

Using Angular 7, npm 5.5.1 and node 8.9.0 In the terminal... npm run build:test <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5435252503736d736d73">[email protected]</a> build:test C:\Projects\fff ng ...

Is it possible for me to create a distinct component that can display numerous input fields at once?

Introducing the inputArea component, which collects data from input fields and sends it to the server: export default class InputArea extends React.Component { constructor(props){ super(props); this.state = { draw_number: '', ...

What is the best way to populate an array with zeros when there is no data available?

Currently, I am working on a project that involves using chart.js to display monthly profit data up to the current month. The data is retrieved from the server and there are two scenarios to consider: // First scenario data: [ ...

What is the process for integrating require.js and jquery.min.js?

I am facing an issue with a specific piece of code: <script data-main="http://northapp.co/_a/js/main.min.js" src="http://northapp.co/_a/js/require.js"></script> Why am I unable to connect require.js with jquery.min.js? I have tried the follow ...