我的Javascript和HTML之間的表單提交按鈕鏈接出現問題
[英]Having trouble with form submit button link between my Javascript and HTML
問題描述
這是我的代碼：
我收到一條錯誤消息，提示createBug（）不是函數（在我的onclick所在的位置）。 我試圖使提交按鈕在單擊時執行createBug（）函數，將所有數據存儲到我的主構造函數中。 我在搜索中找不到答案，因此將其發布。 這是我的第一個問題，我是Java的初學者。 感謝您的任何幫助！
<!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>
2 個解決方案
解決方案1
0 2016-04-24 01:59:17
不是Bug.prototype.createBug 。
用某些實例fireBug.createBug(), waterBug.createBug() ...調用它或總體上更改代碼
解決方案2
0 2016-04-24 02:04:14
在onclick中，“ this”是元素，這就是為什么您不能使用它的原因。 您可以將其包裝在另一個函數中：
<... onclick="newBugWrapper()" ...>
function newBugWrapper(){
var bug = new Bug(....)
bug.createBug(..., ..., ..., )
}
JavaScript表單提交和包含提交按鈕的表單之間的區別
[英]Difference between JavaScript form submit and a form containing a submit button
遇到問題 javascript 文件不響應 html 表單
[英]Having trouble with the javascript file does not respond to html form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.