Web3js - Pressing a button and trigger function

GregorSGregorS Member Posts: 3
I am using the web3js library in my frontend to connect with my smart contract backend

See below my code:
  App = {
      web3Provider: null,
      contracts: {},
    
      init: function () {
        return App.initWeb3();
      },
    
      initWeb3: function () {
    
        // Is there an injected web3 instance?
        if (typeof web3 !== 'undefined') {
          App.web3Provider = web3.currentProvider;
        } else {
          // If no injected web3 instance is detected, fall back to Ganache
          App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
        }
        web3 = new Web3(App.web3Provider);
    
        return App.initContract();
      },
    
      initContract: function () {
    
        $.getJSON('CryptoSportsToken.json', function (data) {
          // Get the necessary contract artifact file and instantiate it with truffle-contract
          var CryptoSportsTokenArtifact = data;
          App.contracts.CryptoSportsToken = TruffleContract(CryptoSportsTokenArtifact);
    
          // Set the provider for our contract
          App.contracts.CryptoSportsToken.setProvider(App.web3Provider);
    
        });
    
        return App.createPerson();
      },
      /*
        bindEvents: function () {
          var owner = $('#owner').val();
          var name = $('#name').val();
          var price = $('#price').val();
          
          console.log("App: \n");      
          console.log(App);
          console.log("App.contracts: \n");      
          console.log(App.contracts);
    
          console.log(owner + " " + name + " " + price)
    
          //createPromoPerson(address _owner, string _name, uint256 _price)
          $(document).on('click', '.btn-create', App.createPromoPerson(owner, name, price));
        },
      */
      createPerson: function () {
    
        console.log("lolonator")
        var cryptosportInstance;
    
        //##########
        $(document).on('click', '.btn-create', function () {
          var owner = $('#owner').val();
          var name = $('#name').val();
          var price = $('#price').val();
    
          console.log(owner + " " + name + " " + price)
    
          App.contracts.CryptoSportsToken.deployed().then(function (instance) {
            cryptosportInstance = instance;
    
            console.log(cryptosportInstance)
    
            return cryptosportInstance.createPromoPerson(owner, name, price).call();
          }).catch(function (err) {
            console.log(err.message);
          })
        });
      },
    };
    
    $(function () {
      $(window).load(function () {
        App.init();
      });
    });
Within my frontend I have a button that should trigger the creation of a new person:
    <div class="container">
        <h1>Sports Person</h1>
        <label for="owner" class="col-lg-2 control-label">Owner Address: </label>
        <input id="owner" type="text" />
        <br/>
    
        <label for="name" class="col-lg-2 control-label">Name: </label>
        <input id="name" type="text" />
        <br/>
    
        <label for="price" class="col-lg-2 control-label">Price: </label>
        <input id="price" type="text" />
        <br/>
    
        <button class="btn btn-default .btn-create" type="button" data-id="0">Create</button>
      </div>
When I press the button I basically get no result. No `console.log` gets triggered.

Any suggestions why?

I appreciate your replies!

Comments

Sign In or Register to comment.