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.

  • What is your question? – Ismael Apr 23 '18 at 4:46
  • with the code I've written, is it possible? and how do i get it to run on blockchain (ropsten)? – Na'im Roslan Apr 23 '18 at 5:18
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>

  • 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 7: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 9: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. imgur.com/a/x80hmxS – Na'im Roslan Apr 23 '18 at 9: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
  • 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 3:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.