Web3js - 按下按钮和触发功能答案

【问题标题】：Web3js - Pressing a button and trigger functionWeb3js - 按下按钮和触发功能
【发布时间】：2018-02-03 20:38:31
【问题描述】：

我在前端使用web3js library 连接我的智能合约后端

见下面我的代码：

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();
  });
});

在我的前端中，我有一个按钮应该会触发一个新人的创建：

<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>

当我按下按钮时，我基本上没有得到任何结果。没有console.log 被触发。

请看下面我来自 chrome 的 console.log：

有什么建议吗？

感谢您的回复！

【问题讨论】：

你至少得到了lolonator 吗？
@Frederik.L 是的，我得到了lolonator ;)。但是，当我按下按钮 create 时，什么都不会触发。我刚刚用我的 chrome 控制台的图片更新了我的问题。

标签： javascript jquery web3js

【解决方案1】：

您在 HTML 中的某个“创建”按钮类中有错字。而不是：

<button class="btn btn-default .btn-create" type="button" data-id="0">

应该是：

<button class="btn btn-default btn-create" type="button" data-id="0">

这是因为$(document).on('click', '.btn-create', function () {中的.btn-create实际上是一个CSS类选择器。

【讨论】：