Web3.js Discussion

Blockchain Programming Course
#21

As we can see the same error: Uncaught TypeError: web3.eth.Contract is not a constructor

#22

Sorry, now I saw that you are using another version than me. Seems to be a mistake in the github repo to have different version between the default branch and the cdn in the readme.

Try to replace your web3 script tag with this one.

<script src=“https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js” integrity=“sha256-nWBTbvxhJgjslRyuAKJHK+XcZPlCnmIAAMixz6EefVk=” crossorigin=“anonymous”></script>

#23

Still not working (ChromeError_1, ChromeError_2) yet.
InMicrosoft Edge I got a different result:
unfortunately the issue beyond my experience, so I keep relying upon someone’s help.

#24

Is the script tag all on one line or is there a line break in between?

#25

I can’t hold the script tag on the line, it’s broke exactly like this…

<script src=“https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js” integrity=“sha256-nWBTbvxhJgjslRyuAKJHK+XcZPlCnmIAAMixz6EefVk=”
    crossorigin=“anonymous”></script>
#26

I’m not sure that’s the issue. But it seems to be a linebreak there, which shouldn’t be there. Here it is without linebreak.

  <script src=“https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js” integrity=“sha256-nWBTbvxhJgjslRyuAKJHK+XcZPlCnmIAAMixz6EefVk=” crossorigin=“anonymous”></script>
#27

Now I see what is wrong with the input statement.

Seems like to quotes around the src url are the wrong types of quotes. They need to be ", not “

Maybe that’s an error when copying text from the forum, I don’t know.

#28

The web3 issue had been fixed, but now I got just one new error:

Uncaught TypeError: Cannot read property ‘call’ of undefined

seems I have set a non valid jQuery validation rule…

contractInstance.owner.call((err, ownerValue) => {
document.querySelector(’#owner-address’).innerHTML(ownerValue)
})

#29

Great! Could you share you code now?

#30

My updated code

#31

Ok, thanks. Now since you have updated the web3.js version you need to change the way you call your contract function according to the docs here https://web3js.readthedocs.io/en/1.0/web3-eth-contract.html#methods-mymethod-call.

That means changing it to

contractInstance.methods.owner().call()

And then use then() according to the example in the docs.

I think it should be like this, but I don’t have time to test right now. But check the docs.

contractInstance.methods.owner().call().then(err, ownerValue => {
    document.querySelector('#owner-address').innerHTML(ownerValue
})
#32

Everything seems to be fine except ''err"
The Console shows that something not right with “err” now it’s not defined
My problem solving session had been updated

#33

I’m not sure what you are doing with err. It’s hard to keep up with what your code looks like. But err should be undefined as long as your contract don’t return an error.

#34

The Idea pretty simple, to get value from the contract and display it on the web page, that’s it.

#35

Yes, but as you change the code I need to see the code. So please update me on what the code looks like right now. Because I’m not sure what you are doing with the err variable.

#36

My code

#37

Ok, now I see that you are updating the code in stack overflow. Good to know.

I tested the code now and found the issue I think. Not sure why though but it doesn’t seem to support lambda functions. If we use a callback function it works.

contract.methods.owner().call().then(function(err, ownerValue){
        document.querySelector('#owner-address').innerHTML(ownerValue)
    })
#38

The console respond:

“Uncaught ReferenceError: contract is not defined”

#39

Sorry that was my own code. ContractInstance is what you called it.

#40

The JavaScript code here took me a long time to get my head around. I found that some extra research on callback functions and anonymous functions helped. As I previously could not follow where the program was going. I have commented the code as much as it took for me to understand it. thought I would post here in case it can help others, hopefully my understanding is correct.

1.(function (Contract) { //accessing helloworld contract
2. var web3; //this will store our web3 api/library
3. var instance; //this will contain our solidity smart contract
4.
5. function init(cb) { //cb is the input to this function and is the anomynous function on line 22
6. web3 = new Web3( //lines 6-8 initiating web3 api. 6 is creating a web3 object
7. (window.web3 && window.web3.currentProvider) || // taking api source from here
8. new Web3.providers.HttpProvider(Contract.endpoint)); // failing the above taking the api from here
9.
10. var contract_interface = web3.eth.contract(Contract.abi); //this is creating the contract interface. “(Contract.abi)” is entering our abi file
11. instance = contract_interface.at(Contract.address); //this is creating the instance of the contract, the contract address is provided here
12. cb(); //here we call the callback function and run the anomynous function on line 22
13. }
14.
15. function getMessage(cb) { //called from line 23
16. instance.message(function (error, result) { //instace is our solidity contract. .message is accessing the message variable within the contract, error and result are objects passed form our smart contract
17. cb(error, result); //call cb which this time is the anomynous functionon line 23, error and result are arguments passed to that function
18. });
19. }
20.
21. $(document).ready(function () { //program starts here, jquery function to ensure page loads before running
22. init(function () { //runs lines 5-12, passing this anomynous function as the init cb argument
23. getMessage(function (error, result) { //calling the getmesage function, result and error come from line 16
24. if (error) {
25. console.error(“Could not get article:”, error); //if error throw an error
26. return; //and exit
27. }
28. $(’#message’).append(result); //if no error then this jquery function will add data to the “message id” in the html
29. });
30. });
31. });
32. })(Contracts[‘HelloWorld’]); //input concract

1 Like