在我的Javascript和HTML之间的表单提交按钮链接中遇到问题
Having trouble with form submit button link between my Javascript and HTML
这是我的代码：
我收到一条错误消息，说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>
这不是
Bug.prototype.createBug。
使用某些实例调用它fireBug.createBug(), waterBug.createBug() ...或更改代码
在onclick中，"this"是元素，这就是为什么你不能使用它。你可以把它包装在另一个函数中：
<... onclick="newBugWrapper()" ...>
function newBugWrapper(){
var bug = new Bug(....)
bug.createBug(..., ..., ..., )
}
相关文章：
- 链接/按钮从子文件夹下载文件--浏览器只是浏览
- 如何通过Javascript启用链接按钮最初设置为Enable=false
- 当我添加JavaScript时，链接按钮停止工作
- 我的链接按钮的OnClick事件永远不会被触发
- 如何使链接/按钮可下载
- 在visualforce中为更新字段分配HTML链接/按钮
- 如何检查是否单击了链接按钮
- 文件上传don'单击链接按钮时无法打开
- 将链接CSS复制到非链接按钮
- 在IE9中单击带有javascript的链接按钮
- 用javascript隐藏一个中继器链接按钮
- 如何在链接按钮中使用 <%= %>
- 将“登录以发布主题”按钮更改为登录链接按钮
- ASP.net 链接按钮“onclick”如果用作UpdatePanel中的AsyncPostBackTrigger触发
- 中继器详细信息部分中的链接按钮
- JavaScript链接按钮以更改颜色
- 动作脚本3中的链接按钮 + jQuery 集成中的淡出
- 如何在网格视图中链接按钮的客户端单击事件上显示动态消息
- 单击链接按钮时打开新选项卡
- 链接按钮与 url 中的数据
