我的 javascript 代码无法连接到我的 HTML 代码（它只是没有出现在我的 html 网站上）

Question

首先感谢您花时间阅读本文：

我已经研究这个问题一段时间了。我正在使用 this 教程视频在以太坊网络上创建自己的 token/cryptocurrency。你应该知道的几件事：

我正在使用 Ganache 作为本地主机
我正在使用 Mac 电脑
我正在使用终端启动我的 HTML 网站，代码为 npm run dev
我正在使用 atom 编写我所有的代码

下面是我遇到错误的 javascript 代码。特别是它说 App.contracts.CinoCoinSale.deployed().then(function(instance) 在此功能下的任何内容都不起作用。即使我执行 console.log 它也会出现在我的控制台中。真的很奇怪，我不知道怎么了

App = {
  web3Provider: null,
  contracts: {},
  account: '0x0',
  loading: false,
  tokenPrice: 1000000000000000,
  tokensSold: 0,
  tokensAvailable: 750000,

  init: function() {
    console.log("App initialized...")
    return App.initWeb3();
  },

  initWeb3: function() {
    if (typeof web3 !== 'undefined') {
      // If a web3 instance is already provided by Meta Mask.
      App.web3Provider = web3.currentProvider;
      web3 = new Web3(web3.currentProvider);
    } else {
      // Specify default instance if no web3 instance provided
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
      web3 = new Web3(App.web3Provider);
    }
    return App.initContracts();
  },

  initContracts: function() {
    $.getJSON("CinoCoinSale.json", function(cinoCoinSale) {
      App.contracts.CinoCoinSale = TruffleContract(cinoCoinSale);
      App.contracts.CinoCoinSale.setProvider(App.web3Provider);
      App.contracts.CinoCoinSale.deployed().then(function(cinoCoinSale) {
        console.log("Cino Coin Sale Address:", cinoCoinSale.address);
      });
    }).done(function() {
      $.getJSON("CinoCoin.json", function(cinoCoin) {
        App.contracts.CinoCoin = TruffleContract(cinoCoin);
        App.contracts.CinoCoin.setProvider(App.web3Provider);
        App.contracts.CinoCoin.deployed().then(function(cinoCoin) {
          console.log("Cino Coin Address:", cinoCoin.address);
        });
        return App.render();
      });
    })
  },

  render: function() {
    if (App.loading) {
      return;
    }
    App.loading = true;

    var loader  = $('#loader');
    var content = $('#content');

    loader.show();
    content.hide();

    // Load account data
    web3.eth.getCoinbase(function(err, account) {
      if(err === null) {
        App.account = account;
        $('#accountAddress').html("Your Account: " + account);
      }
    })

    // Load token sale contract
    App.contracts.CinoCoinSale.deployed().then(function(instance) {
      cinoCoinSaleInstance = instance;
      return cinoCoinSaleInstance.tokenPrice();
    }).then(function(tokenPrice) {
      App.tokenPrice = tokenPrice;
      $('.token-price').html(web3.fromWei(App.tokenPrice, "ether").toNumber());
      return cinoCoinSaleInstance.tokensSold();
    }).then(function(tokensSold) {
      App.tokensSold = tokensSold.toNumber();
      $('.tokens-sold').html(App.tokensSold);
      $('.tokens-available').html(App.tokensAvailable);

      var progressPercent = (Math.ceil(App.tokensSold) / App.tokensAvailable) * 100;
     $('#progress').css('width', progressPercent + '%');

     // Load token contract
     App.contracts.CinoCoin.deployed().then(function(instance) {
       cinoCoinInstance = instance;
       return cinoCoinInstance.balanceOf(App.account);
     }).then(function(balance) {
       $('.cino-balance').html(balance.toNumber());
     })
   });

   App.loading = false;
   loader.hide();
   content.show();
  }
 },

 $(function() {
   $(window).load(function() {
     App.init();
   })
 });

然后这是我在本地主机服务器上运行我的网站使用的 HTML 代码。该网站看起来非常好并且可以正常工作，除了一件事：没有出现并且我遇到问题的部分是从以前的代码中插入值。这可能令人困惑，所以这里有一个例子：对于代码片段  / tokens sold 应该为 class="tokens-sold" 部分插入值，而 class="tokens-available" 这些值应该从 [=67= 插入] 文件，但它不起作用，因此没有显示在网站上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cino Coin ICO Sale</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container" style="width: 650px;">
      <div class="row">
        <div class="col-lg-12">
            <h1 class="text-center">CINO COIN ICO SALE</h1>
            <hr/>
            <br/>
        </div>
        <div id="loader">
          <p class="text-center">Loading...</p>
        </div>
        <div id="content" class="text-center" style="display: none;">
          <p>
            Introducing "Cino Coin" (CC)!
            Token price is <span class="token-price"></span> Ether. You currently have <span class="dapp-balance"></span>&nbsp;CC's.
          </p>
          <br/>
          <form onSubmit="App.buyTokens(); return false;" role="form">
            <div class="form-group">
              <div class="input-group">
                <input id="numberOfTokens" class="form-control input-lg" type="number" name="number" value="1" min="1" pattern="[0-9]">
                </input>
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary btn-lg">Buy Tokens</button>
                </span>
              </div>
            </div>
          </form>
          <br>
           <div class="progress">
              <div id="progress" class="progress-bar progress-bar-striped active" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          <p><span class="tokens-sold"></span> / <span class="tokens-available"></span> tokens sold</p>
          <hr>
          <p id="accountAddress"></p>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> .</script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

如果能找到解决方案，我将不胜感激。如果您需要更多关于问题的详细信息，或者您不理解问题，请直接说出来，我会尝试以不同的方式进行解释。

此外，here是我正在使用的视频。我卡在插入代币价格的时间 11:48。我已经完成了视频系列的其余部分，我的代码到目前为止也能正常工作。

再次非常感谢你，我真的很感激:)

这里是项目文件夹

This is a snapshot of the folder

编辑

我做了更多研究，发现 App.contracts.CinoCoinSale.deployed().then(function(instance) { 下的任何内容都不起作用。即使我输入 console.log("hi"); 它也不会打印到控制台。我仍然不知道如何解决这个问题，但也许有帮助。就像出于某种原因忽略了该功能

Answer 1

检查 App.contracts 下的内容，可能没有正确加载。它无法与可用的合同对象一起使用。最坏的情况是它应该打印出您正在尝试的简单控制台。尝试console.log(App.contracts);

我的 javascript 代码无法连接到我的 HTML 代码（它只是没有出现在我的 html 网站上）

My javascript code will not connect to my HTML code (it just does not appear on my html website)

javascript

html

ethereum

solidity

truffle