web3 Uncaught TypeError: Cannot read property 'createBox' of undefined

Question

i'm trying to create simple application by using solidity 5.0.0 , Truffle v5.0.0 and web3 web3@1.0.0-beta.34.

but i've gotten

Uncaught TypeError: Cannot read property 'createBox' of undefined.

these are my codes.

pragma solidity >0.4.99 <0.6.0;

import "./SafeMath.sol";

contract PiggyBank {

using SafeMath for uint256;

struct Box {
    address owner;
    uint256 targetFigure;
    uint256 balance;
}

mapping (address =>  mapping (uint16 => Box)) public myBoxes;

event Deposit (
    address indexed _from,
    uint16 indexed _to,
    uint256 indexed _amount
);

event Withdraw (
    uint16 indexed _whichBox,
    address indexed _to,
    uint256 indexed _amount
);

function createBox(uint16 _boxid, uint _targetFigure) public {
    myBoxes[msg.sender][_boxid].owner = msg.sender;
    myBoxes[msg.sender][_boxid].targetFigure = _targetFigure;
    myBoxes[msg.sender][_boxid].balance = 0;
}

function getBoxInfo(uint16 _boxid) onlyOwner(_boxid) public view returns (uint256, uint256) {
    return (myBoxes[msg.sender][_boxid].targetFigure, myBoxes[msg.sender][_boxid].balance);
}

function deposit(uint16 _boxid,uint256 _amount) onlyOwner(_boxid) public payable {
    require(msg.value == _amount);
    myBoxes[msg.sender][_boxid].balance = myBoxes[msg.sender][_boxid].balance.add(msg.value);
    emit Deposit(msg.sender,_boxid, _amount);
}

function withdraw(uint16 _boxid) onlyOwner(_boxid) public payable {
    require(myBoxes[msg.sender][_boxid].targetFigure <= myBoxes[msg.sender][_boxid].balance);
    uint amount = myBoxes[msg.sender][_boxid].balance;
    myBoxes[msg.sender][_boxid].balance = 0 ;
    msg.sender.transfer(amount);
    breakBox(_boxid); 
    emit Withdraw (_boxid, msg.sender, amount);
}

function checkBalance() view public returns (uint){
    return(msg.sender.balance);
}

function breakBox(uint16 _boxid) public {
    delete myBoxes[msg.sender][_boxid];
}

 modifier onlyOwner(uint16 _boxid) {
   require(msg.sender == myBoxes[msg.sender][_boxid].owner);
    _;
}
}

web3

        var PiggyBank;

        var userAccount;

        function startApp() {

            var piggyBankAddress = "0xEa6294cDB3F810215ebAcd76367365F1C611f422";
            PiggyBank = web3js.eth.contract(PiggyBankABI, piggyBankAddress);
            console.log(PiggyBank)
                var accountInterval = setInterval(function() {
                // Check if account has changed
                if (web3.eth.accounts[0] !== userAccount) {
                    userAccount = web3.eth.accounts[0];
                }
                }, 100);
            }

        window.addEventListener('load', function() {

        if (typeof web3 !== 'undefined') {
            if (web3.currentProvider.isMetaMask === true) {
                console.log('MetaMask is active')
                web3js = new Web3(web3.currentProvider);
                startApp()

                } else {
                alert("MetaMask is not active")
                }
        } else {
                alert("Use Mist/MetaMask's provider")
            }
        });



        function create(){
            event.preventDefault();
            var _boxId = document.getElementById("boxId").value;
            var _targetFigure = document.getElementById("targetFigure").value;
            console.log(_boxId)
            console.log(_targetFigure)
            return PiggyBank.methods.createBox(_boxid, _targetFigure).send({from:userAccount})
            .on("receipt", function(receipt) {
            console.log(receipt)
            //$("#txStatus").text("Successfully created ");
            })
            .on("error", function(error) {
            console.log(error)
            //$("#txStatus").text(error);
        });
        }

could anyone tell me how to solve this error? i spend 2 hours to try to solve this error,but i still got in stack...

Answer 1

To me it looks like the problem is with

PiggyBank = web3js.eth.contract(PiggyBankABI, piggyBankAddress);

as you're using web3js@1.0.0 and the documentation states

new web3.eth.Contract(jsonInterface[, address][, options]) 

with the capital c try using

PiggyBank = web3js.eth.Contract(PiggyBankABI, piggyBankAddress);