web3js - Cannot read property <some-prop>

Question

Web3js code:

<script type="text/javascript">
var userAccount;
    function startApp() {
       var contractAddress = "<contract-address>";
       var cryptoIpfs = new web3js.eth.contract(abi, contractAddress);

       var accountInterval = setInterval(function() {

         if (web3.eth.accounts[0] !== userAccount) {
            userAccount = web3.eth.accounts[0];
          }
}, 100);}

function save_hash(hash) {
    return cryptoIpfs.methods.saveHash('hash')                        ////// error there! (error mentioned at bottom)/////
    .send({from: userAccount, value:web3.utils.toWei("0.001")})
    .on("receipt", function(receipt) {
      $("#txn_hash").text(receipt);
     })
    .on("error", function(error) {
       $("#txStatus").text(error);
     });
}

 window.addEventListener('load', function() {
    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
    if (typeof web3 !== 'undefined') {
      // Use Mist/MetaMask's provider
      web3js = new Web3(web3.currentProvider);
    } else {
      // Handle the case where the user doesn't have Metamask installed
    }
    startApp()
})
</script>


////########## error in console######/////
ipfsLink:172 Uncaught TypeError: Cannot read property 'saveHash' of undefined at save_hash (ipfsLink:172)
    at <anonymous>:1:1 save_hash @ ipfsLink:172

Solidity code:

pragma solidity ^0.4.23;

contract IpfsLink{
    address owner;
    uint public lastHashId;
    uint hashCost = 0.001 ether;

    struct IpfsHash{
        address sender;
        string hashString;
        uint timestamp;
    }

    mapping (uint => IpfsHash) hashes;

    modifier onlyOwner {
        require(msg.sender == owner);
        _;
    }

    constructor() public{
        owner = msg.sender;
        lastHashId = 0;
    }

    function saveHash(string _hashContent) external payable {
        require(msg.value >= hashCost);

        uint hashId = ++lastHashId;
        hashes[hashId].sender = msg.sender;
        hashes[hashId].hashString = _hashContent;
        hashes[hashId].timestamp = now;
    }
}

There is no error in startApp() so that means the contract get imported properly...

Answer 1

The web3js code had issues...Finally, I got it to work with the following code:

<script type="text/javascript">
    var userAccount;
    var cryptoIpfs;
    function startApp() {
        var contractAddress = "<contract-address>";
        cryptoIpfs = web3js.eth.contract(abi);
        cryptoIpfsInstance = cryptoIpfs.at(contractAddress);

        var accountInterval = setInterval(function() {
            if (web3.eth.accounts[0] !== userAccount) {
                userAccount = web3js.eth.defaultAccount;
            }
        }, 100);}

    function save_hash(hash){
        var result = cryptoIpfsInstance.saveHash(hash,{value:web3js.toWei("0.001"), gas:140000}, function(err, res){
            console.log(res);
        });
    }

    window.addEventListener('load', function() {
        // Checking if Web3 has been injected by the browser (Mist/MetaMask)
        if (typeof web3 !== 'undefined') {
            // Use Mist/MetaMask's provider
            web3js = new Web3(web3.currentProvider);
        } else {
            // Handle the case where the user doesn't have Metamask installed
        }

        startApp()
    })
</script>