現在、Truffle と testrpc を使用して Ethereum 用の Dapp を作成しています。登録ページには、すべての情報を入力してユーザーを登録するためのボタンがあります。ただし、ボタンがクリックされると、app.js javascript ファイル内の登録関数が呼び出されますが、実行されませんvar regi = Register.deployed();。以下に示すように、Web ページのコンソールにエラーが表示されます。これを何時間もデバッグしようとしましたが、成功しませんでした。
これは app.js ファイルです。レジスタ関数は、入力されたデータを受け取り、それをレジスタ コントラクトに送信する関数です。
その下のコードは index.html ファイルです。タグは、クリックされた<button id="confirmsignup" onclick="register()">Sign Up</button>ときに app.js で register() を呼び出すボタンです。
最後の 1 つは、ユーザーのアカウントを設定する Contract Register のコードです。
var accounts;
var account;
var balance;
var logged;
function setStatus(message) {
var status = document.getElementById("status");
status.innerHTML = message;
};
function refreshBalance() {
var meta = MetaCoin.deployed();
meta.getBalance.call(account, {from: account}).then(function(value) {
var balance_element = document.getElementById("balance");
balance_element.innerHTML = value.valueOf();
}).catch(function(e) {
console.log(e);
setStatus("Error getting balance; see log.");
});
};
function sendCoin() {
var meta = MetaCoin.deployed();
var amount = parseInt(document.getElementById("amount").value);
var receiver = document.getElementById("receiver").value;
setStatus("Initiating transaction... (please wait)");
meta.sendCoin(receiver, amount, {from: account}).then(function() {
setStatus("Transaction complete!");
refreshBalance();
}).catch(function(e) {
console.log(e);
setStatus("Error sending coin; see log.");
});
getAccountBalance();
};
function getAccountBalance() {
var meta = MetaCoin.deployed();
var balance = meta.getBalance(msg.sender);
}
function register() {
var nickname = document.getElementById("userid").value;
var email = document.getElementById("Email").value;
var password = document.getElementById("password").value;
var rePassword = document.getElementById("reenterpassword").value;
var addr = document.getElementById("ethereumAddress").value;
logged = true;
var regi = Register.deployed();
web3.eth.defaultAccount = addr;
if (password == rePassword) {
regi.setAccountInfo(nickname, email, password, addr).then(function() {
console.log("The account was setup with the appropriate details");
}).catch(function(e) {
console.log(e);
});
alert("Congratulations! You registered an account with Cogitaire!");
} else {
alert("The passwords do not match!");
}
};
function displayInfo() {
var display = Register.deployed();
var idCheck = document.getElementById("idForCheck").value;
if (logged) {
console.log("The user is logged: " + logged);
display.getNickname.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('nickshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
display.getEmail.call(web3.eth.defaultAccount).then(function(value) {
document.getElementById('emailshow').innerHTML = value;
}).catch(function(e) {
console.log(e);
});
} else {
alert("You are not logged in! Please log in to see your user information or enter address to see someone elses user information");
}
};
function logOff() {
var log = Register.deployed();
logged = false;
alert("You are now logged off!");
web3.eth.defaultAccount = '0xda9c209aafee487d729866bc0d58223a62bfe383';
};
function showLogin() {
registerSection.style.display = 'none';
loginSection.style.display = 'block';
};
function showRegister() {
registerSection.style.display = 'block';
loginSection.style.display = 'nice';
};
window.onload = function() {
var Web3 = require([web3]);
// create an instance of web3 using the HTTP provider.
// in mist web3 is already available, so check first if its available before instantiating
if (typeof web3 !== 'undefined') {
var web3 = new Web3(web3.currentProvider);
} else {
// set the provider you want from Web3.providers
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
}
//var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8080"));
web3.eth.getAccounts(function(err, accs) {
if (err != null) {
alert("There was an error fetching your accounts.");
return;
}
if (accs.length == 0) {
alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
return;
}
getAddress.call().then(function(value) {
web3.eth.defaultAccount = value;
});
accounts = accs;
account = accounts[0];
refreshBalance();
});
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Cogitare</title>
<!-- jQuery -->
<script src="/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/bundle.js"></script>
<script src="javascripts/require.js"></script>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="navbar-brand topnav" src="img/BIRD2thin.jpg" alt="can't display rn">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a style="color:white;" href="./newProjectInfo.html">Submit An Idea</a>
</li>
<li>
<a style="color:white;" href="#">Services</a>
</li>
<li>
<a style="color:white;" href="#contact">Contact</a>
</li>
<li>
<a style="color:white;" href="#signup" data-toggle="modal" data-target=".bs-modal-lg">Sign In/Register</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="about"></a>
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Where ideas take flight</h1>
<h3>ejofaojwefojwejoaewoj</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="google.com" class="btn btn-default btn-lg"></i> <span class="network-name">Discover Projects</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
<a href="#" style="color:#777">Home</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#about" style="color:#777">About</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#services" style="color:#777">Services</a>
</li>
<li class="footer-menu-divider">⋅</li>
<li>
<a href="#contact" style="color:#777">Contact</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright © Your Company 2014. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<div class="modal fade bs-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a style="color:black" href="#signin" data-toggle="tab">Sign In</a></li>
<li class=""><a style="color:black" href="#signup" data-toggle="tab">Register</a></li>
<li class=""><a style="color:black" href="#why" data-toggle="tab">Show User Information</a></li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>Click this button to show information about you!</p>
<!--<p></p><br> Please contact <a mailto:href="theoluan@gmail.com"></a>theoluan@gmail.com</a> with questions.</p>-->
<button id="display" onclick="displayInfo()">Display Information</button>
<br><label id="nickshow">test</label></br>
<br><label id="emailshow">test</label></br>
</div>
<div class="tab-pane fade active in" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo@theo.com" class="input-medium" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="passwordinput">Password</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
<!--Register-->
<div class="tab-pane fade" id="signup">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="reenterpassword">Ethereum Address</label>
<div class="controls">
<input id="ethereumAddress" class="form-control" name="ethid" type="text" placeholder="2309482309" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="theo@theo.com" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="userid">Nickname:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="theo" class="input-large" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
<em>1-8 Characters</em>
</div>
</div>
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<!-- Multiple Radios (inline) -->
<br>
<!-- Button -->
<!--<button id="confirmsignup" class="btn btn-success" onclick="register()">Sign Up</button>-->
<button id="confirmsignup" onclick="register()">Sign Up</button>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
contract Register {
//address public userAddr;
struct User {
address userAddress;
string nickname;
string email;
string password;
bool isLoggedIn;
}
mapping(address => User) users;
address public creator;
//bool public isLoggedIn;
function Register() {
creator = msg.sender;
}
function setAccountInfo(string nickname, string email, string password, address addr) {
users[addr].nickname = nickname;
users[addr].email = email;
users[addr].password = password;
}
function getNickname(address addr) returns (string) {
return users[addr].nickname;
}
function getEmail(address addr) returns (string) {
return users[addr].email;
}
function getAddress() constant returns (address) {
return creator;
}
function setLoggedStatus(address addr, bool condition) {
users[addr].isLoggedIn = condition;
}
function getLoggedStatus(address addr) constant returns (bool success) {
return users[addr].isLoggedIn;
}
}
javascript 行 Register.deployed() の後にコードが実行されない理由がわかりません。私を正しい方向に導く可能性のある助けは役に立ちます。どうもありがとう！