这是我的代码：
我收到一条错误消息，指出createBug（）不是一个函数（我的onclick所在的位置）。我试图让提交按钮在单击时执行createBug（）函数，将所有数据存储到我的主构造函数中。我在搜索中找不到答案，所以我发布了这个。这是我在这里的第一个问题，我是Javascript的初学者。谢谢你的帮助！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Battle Bugs</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Dhurjati);
#newBug {
text-align: center;
}
h5 {
font-family: 'Dhurjati', sans-serif !important;
font-size: 24px !important;
margin: 0 !important;
font-weight: 200 !important;
}
#newBug {
background-image: linear-gradient(to bottom, #eeeeee 0, #f4d2fe 100%) !important;
border-color: none;
}
#newBug.btn-primary {
background-image: linear-gradient(to bottom, #eeeeee 0, #f4d2fe 100%) !important;
border-color: white !important;
background-color: #f4d2fe !important;
color: #b845d9 !important;
font-family: 'Dhurjati', sans-serif !important;
font-size: 24px;
}
.jumbotron {
background-image: linear-gradient(to bottom, #eeeeee 0, #f4d2fe 100%) !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
</script>
</head>
<body>
<div class='container'>
<div class='jumbotron'>
<form>
<div id="petInfo"></div>
<h5>Choose a name for your bug:</h5>
<br>
<input type='text' id='newBugName' placeholder='Name your bug!'>
<br>
<br>
<div>
<h5>Choose an element type for your bug:</h5>
<br>
<label class="radio-inline" id='newBugType'>
<input type="radio" name='newBugType'>Fire</label>
<label class="radio-inline">
<input type="radio" name=newBugType>Water</label>
<label class="radio-inline">
<input type="radio" name='newBugType'>Lightning</label>
<label class="radio-inline">
<input type="radio" name='newBugType'>Wind</label>
<label class="radio-inline">
<input type="radio" name='newBugType'>Earth</label>
<br>
<br>
</div>
<div>
<h5>Choose an elemental weakness for your bug:</h5>
<br>
<label class="radio-inline" id='newBugWeakness'>
<input type="radio" name="newBugWeakness">Earth</label>
<label class="radio-inline">
<input type="radio" name="newBugWeakness">Wind</label>
<label class="radio-inline">
<input type="radio" name="newBugWeakness">Lightning</label>
<label class="radio-inline">
<input type="radio" name="newBugWeakness">Water</label>
<label class="radio-inline">
<input type="radio" name="newBugWeakness">Fire</label>
<br>
<br>
</div>
<div>
<h5>What would you like to name your pet's special ability?</h5>
<br>
<input type='text' id='newBugAbility' placeholder='Spell name'>
<br>
<br>
</div>
<div id='submitButton'>
<button type="button" class="btn btn-primary btn-lg" id='newBug' onclick="createBug()">Create Bug!</button>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Browse Battle Bugs!
</div>
<div class="span10">
All Battle Bugs!
</div>
</div>
</div>
<script>
function Bug(name, type, ability, weakness) {
this.name = name;
this.type = type;
this.ability = ability;
this.weakness = weakness;
}
// Put shared methods in a prototype to increase efficiency, as each instance does not need its own methods (which can use quite a bit of memory in large programs) \\
Bug.prototype = {
constructor: Bug, // Makes sure the prototype points to Bug and not Object \\
createBug: function (name, type, ability, weakness) {
this.newBugName = new Bug(name);
this.newBugType = new Bug(type);
this.newBugAbility = new Bug(ability);
this.newBugWeakness = new Bug(weakness);
this.form = document.getElementById('newBug');
document.getElementById('newBug').addEventListener('click', function () {
form.submit();
}),
console.log("Clicked!");
},
displayInfo: function () {
console.log(this.name + ' is a ' + this.type + ' type bug.');
console.log(this.name + ' can cast ' + this.ability + ' as its special ability!!');
console.log(this.name + ' is weak against ' + this.weakness + ' attacks.\n\n');
},
};
var fireBug = new Bug('Firebug', 'fire', 'scorch', 'water');
var waterBug = new Bug('Aquabug', 'water', 'tsunami', 'lightning');
var lightningBug = new Bug('Thunderbug', 'lightning', 'flashbolt', 'wind');
var windBug = new Bug('Breezebug', 'wind', 'cyclone', 'earth');
var earthBug = new Bug('Boulderbug', 'earth', 'quake', 'water');
fireBug.displayInfo();
waterBug.displayInfo();
lightningBug.displayInfo();
windBug.displayInfo();
earthBug.displayInfo();
</script>
</body>
</html>
答案 0 :(得分：0)
不是Bug.prototype.createBug。
使用某些实例fireBug.createBug(), waterBug.createBug() ...调用它或更改一般的代码
答案 1 :(得分：0)
在onclick中“this”是元素，这就是为什么你不能使用它。您可以将其包装在另一个函数中：
<... onclick="newBugWrapper()" ...>
function newBugWrapper(){
var bug = new Bug(....)
bug.createBug(..., ..., ..., )
}