0

I'm trying to do something simple like Hello World that shows on a webpage. I've written a smart contract like this:

pragma solidity ^0.4.18;

contract HelloContract {
    string word = "Hello World!";

    function getWord() constant returns (string) {
        return word;
    }

    function setWord(string newWord) returns (string) {
        word = newWord;
        return word;
    }
}

and this the html:

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>

        <link rel="stylesheet" type="text/css" href="main.css">

        <script src="./node_modules/web3/dist/web3.min.js"></script>

    </head>
        <body>
            <div class="container">
                <center>
                <label for="name" class="col-lg-2 control-label">Name:</label>
                <input id="name" type="text">

                <button id="button">Click!</button>

                <h1 id="word"></h1>

                </center>

            </div>

            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

                <script>
                    if (typeof web3 !== 'undefined') {
                    web3 = new Web3(web3.currentProvider);
                    } else {
                    // set the provider you want from the Web3.providers
                    web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
                    }

                    web3.eth.defaultAccount = web3.eth.accounts[0];

                    var HelloContract = web3.eth.contract([
    {
        "constant": false,
        "inputs": [
            {
                "name": "newWord",
                "type": "string"
            }
        ],
        "name": "setWord",
        "outputs": [
            {
                "name": "",
                "type": "string"
            }
        ],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "anonymous": false,
        "inputs": [
            {
                "indexed": false,
                "name": "Word",
                "type": "string"
            }
        ],
        "name": "Word",
        "type": "event"
    },
    {
        "constant": true,
        "inputs": [],
        "name": "getWord",
        "outputs": [
            {
                "name": "",
                "type": "string"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    }
]);

            var Hello = HelloContract.at('0xd993de41f4979af7af48c2b5262afb41e63ff4c6');

            Hello.getWord(function(error, result){
                if(!error)
                {
                    $("#word").html('Hello ' + result[0]);
                } else 
                    console.log(error);
            });

            $("#button").click(function() {
                Hello.setWord($("#name").val());
            });
        </script>
    </body>
</html>

what I'm trying to do is, users insert their name (setWord) and it'll display "Hello (username)" (getWord) and all of this running on blockchain means there is a txhash and when I click it'll display "Hello (user)" at the data on etherscan.

Na'im Roslan
  • 1
  • 1
  • 2

1 Answers1

0

While calling setWord function you should specify gas limit (cost of transaction that you can spent for executing) that particular transaction and account from which that particular transaction cost need to be deducted.

Hello.setWord($("#name").val(),{from: web3.eth.accounts[0], gas:3000000});

As you are specifying web3.eth.defaultAccount = web3.eth.accounts[0]; that is default account from which all transactions will be executed there is no need to specify from: web3.eth.accounts[0] but you shall mention gas limit.

After doing this you will be able to execute setWord()and getWord() transactions successfully. I am wondering why you are printing only first letter(result[0])in getWord() function. You shall print complete result i.e. result.

I am attaching complete code here that I am able to execute. You need to refresh page to see the modified word.

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- <link rel="stylesheet" type="text/css" href="main.css"> -->

    <!-- <script src="./node_modules/web3/dist/web3.min.js"></script> -->

</head>
    <body>
        <div class="container">
            <center>
            <label for="name" class="col-lg-2 control-label">Name:</label>
            <input id="name" type="text">

            <button id="button">Click!</button>

            <h1 id="word"></h1>

            </center>

        </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script>

            <script>
                Web3 = require('web3');
                web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));

                web3.eth.defaultAccount = web3.eth.accounts[0];

                var HelloContract = web3.eth.contract([
{
    "constant": false,
    "inputs": [
        {
            "name": "newWord",
            "type": "string"
        }
    ],
    "name": "setWord",
    "outputs": [
        {
            "name": "",
            "type": "string"
        }
    ],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
},
{
    "anonymous": false,
    "inputs": [
        {
            "indexed": false,
            "name": "Word",
            "type": "string"
        }
    ],
    "name": "Word",
    "type": "event"
},
{
    "constant": true,
    "inputs": [],
    "name": "getWord",
    "outputs": [
        {
            "name": "",
            "type": "string"
        }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
}
]);

        var Hello = HelloContract.at('0x178cae4d338a7c3ea5fcf8727bac04b5df925607');

        Hello.getWord(function(error, result){
            if(!error)
            {
                $("#word").html('Hello ' + result);
            } else 
                console.log(error);
        });
        console.log("Word :"+$("#name").val());
        $("#button").click(function() {
            Hello.setWord($("#name").val(),{from: web3.eth.accounts[0], gas:3000000});
        });
    </script>
</body>

Aniket
  • 3,545
  • 2
  • 20
  • 42
Soham Lawar
  • 2,567
  • 14
  • 38
  • oh thank you. i almost got there. one more thing, i insert my name, but it doesn't display. only "hello". and how do i check if its already on etherscan? search the address? – Na'im Roslan Apr 23 '18 at 07:13
  • Right click on web browser and click on inspect , open a console tab and see if you are getting some errors while executing java script code. I am using ganache which is another client of ethereum Hello.getWord() gives me updated word on console. Hope this will help ! – Soham Lawar Apr 23 '18 at 09:45
  • I did. that's the problem, I'm not getting any errors. as you can see, I insert the name, but the name doesn't display but also don't have any errors. https://imgur.com/a/x80hmxS – Na'im Roslan Apr 23 '18 at 09:58
  • I am able to execute it my end and still not able to figure out what problem you are facing. I recommend you to try to execute same java script code on ethereum client(geth or ganache) and figure out what is problem. – Soham Lawar Apr 23 '18 at 10:48
  • https://imgur.com/a/qZHmZzb thank you. there is a txhash but when i search it on etherscan, nothing comes out. – Na'im Roslan Apr 24 '18 at 03:28
  • There are two types of blockchain network 1) Public ethereum blockchain network and 2) Private ethereum blcockchain network Accordig to this etherscan can not be used as a explorer for private blockchain network . https://ethereum.stackexchange.com/questions/27564/etherscan-for-private-networks/27568#27568 So if you search your transaction hash on public blockchain you won't be able to see it as you are creating transaction on your own private blockchain network. I recommend you to use ganache which is UI based client in which you can explore blocks and transaction. – Soham Lawar Apr 24 '18 at 10:14
  • i know it'll messed up the blockchain but this is a task and i just need to know if its working. if it holds data on blockchain, on solidity and not the html. sorry and thanks tho. – Na'im Roslan Apr 24 '18 at 10:17
  • As you are able to excute Hello.getWord() on ganache client that means data is stored in blockchain. You need to figure out why you are not able to see it using webpage. I am able to see it https://imgur.com/JQNyp9K – Soham Lawar Apr 24 '18 at 10:28