Javascript 创建对象和对象数组
我有点困在javascript作业上了。以下是要求Javascript 创建对象和对象数组,javascript,html,arrays,string,Javascript,Html,Arrays,String,我有点困在javascript作业上了。以下是要求 创建一个新的JavaScript文件。在这个文件中创建一个创建动物对象的构造函数。动物对象应存储以下属性： 名称–动物的名称 性别–动物的性别 物种–动物的物种 创建一个全局数组，该数组将存储未知数量的动物对象 创建addAnimal（）函数，该函数在单击“添加动物”按钮时运行。此函数应执行以下操作： 从用户输入字段中确定动物的名称、性别和种类 根据用户信息创建动物对象 将动物对象推到阵列上 更新输出/显示 创建一个函数，将数组中存储的
- 名称–动物的名称
- 性别–动物的性别
- 物种–动物的物种
- 从用户输入字段中确定动物的名称、性别和种类
- 根据用户信息创建动物对象
- 将动物对象推到阵列上
- 更新输出/显示
<!DOCTYPE HTML 5.13.14>
<html>
<head>
<link type="text/css" rel="stylesheet"
href="ex12.js">
<title> Alleluia CPSC 1045 Exersize 12 </title>
<script>
function addAnimal(name, type, gender) {
this.name = name,
this.type = type,
this.gender = gender,
this.result = function addAnimal() {
onclick return this.name + this.type + this.gender;
}
}
</script>
</head>
<body>
<h1> Welcome to the CPSC 1045 Zoo!</h1>
<br>
<p> Please add an animal to the zoo by filling out the following feilds</p>
<br>
<p> Animal Name: <input type="text" id="name" name="inputname"></p>
<p> Animal Type: <input type="text" id="type" name="inputtype"></p>
<!--- radio input --->
<p> Animal Gender:
<input type="radio" name="gender" value="Male" id="genderm"> Male
<input type="radio" name="gender" value="Female" id="genderf"> Female
</p>
<!--- end--->
<button type="button" onclick='addAnimal()' id="result"><b>Add Animal</b></button>
</body>
</html>
Alleluia CPSC 1045第12号
功能添加动物（名称、类型、性别）{
this.name=name，
this.type=type，
这个。性别=性别，
this.result=函数addAnimal（）{
单击返回this.name+this.type+this.gender；
}
}
欢迎来到CPSC 1045动物园！
请填写以下字段将动物添加到动物园
动物名称：
动物类型：
动物性别：
男性
女性
加动物
文件
动物
姓名：
性别
男性
女性
种类：
加动物
名称
性别
种
//创建一个全局数组，该数组将存储未知数量的动物对象。
var animalStore=[]；
//创建一个新的JavaScript文件。在这个文件中创建一个创建动物对象的构造函数。动物对象应存储以下属性：
//名称–动物的名称
//性别–动物的性别
//物种–动物的物种
功能动物（名称、性别、种类）{
this.name=名称；
这个。性别=性别；
这个物种=物种；
}
//根据用户信息创建动物对象
//创建addAnimal（）函数，该函数在单击“添加动物”按钮时运行。此函数应执行以下操作：
函数addAnimal（）{
让name=document.getElementById（'name'）.value；
让gender=Array.from（document.getElementsByName（'gender'））.filter（o=>o.checked）[0]。值；
让species=document.getElementById（'species'）.value；
让animalInstance=新动物（名称、性别、物种）；
动物商店。推（动物立场）；
显示动物主义者（）；
resetInputFields（）；//提交后重置输入字段
}
//创建一个函数，将数组中存储的所有动物显示为页面上的无序列表。
函数displayAnimalList（）{
让模板=“”；
for（让index=0；indexo.checked=false）；
document.getElementById（'species'）。value=“”；
}
文件
动物
姓名：
性别
男性
女性
种类：
加动物
名称
性别
种
//创建一个全局数组，该数组将存储未知数量的动物对象。
var animalStore=[]；
//创建一个新的JavaScript文件。在这个文件中创建一个创建动物对象的构造函数。动物对象应存储以下属性：
//名称–动物的名称
//性别–动物的性别
//物种–动物的物种
功能动物（名称、性别、种类）{
this.name=名称；
这个。性别=性别；
这个物种=物种；
}
//根据用户信息创建动物对象
//创建addAnimal（）函数，该函数在单击“添加动物”按钮时运行。此函数应执行以下操作：
函数addAnimal（）{
让name=document.getElementById（'name'）.value；
让gender=Array.from（document.getElementsByName（'gender'））.filter（o=>o.checked）[0]。值；
让species=document.getElementById（'species'）.value；
让animalInstance=新动物（名称、性别、物种）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- from the user input fields -->
<fieldset>
<legend>Animal</legend>
<div>
<label for="name">Name: </label>
<input type="text" id="name">
</div>
<div>
<label>Gender</label>
<input type="radio" id="male" name="gender" value="Male">
<label for="kraken">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br />
</div>
<div>
<label for="species">Species: </label>
<input type="text" id="species">
</div>
<button onclick="addAnimal()"> Add Animal</button>
</fieldset>
<hr>
<hr>
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Species</th>
</tr>
</thead>
<tbody id="animal-list">
</tbody>
</table>
<script>
//Create a global array that will store an unknown number of animal objects.
var animalStore = [];
// Create a new JavaScript file. Inside this file create a constructor that creates animal objects. An animal object should store the following properties:
// Name – the name of the animal
// Gender – the gender of the animal
// Species – the species of the animal
function Animal(name, gender, species) {
this.name = name;
this.gender = gender;
this.species = species;
}
// Create an animal object from the user information
//Create an addAnimal() functions that runs when the Add Animal button is clicked. This function should do the following things:
function addAnimal() {
let name = document.getElementById('name').value;
let gender = Array.from(document.getElementsByName('gender')).filter(o => o.checked)[0].value;
let species = document.getElementById('species').value;
let animalInstance = new Animal(name, gender, species);
animalStore.push(animalInstance);
displayAnimalList();
resetInputFields(); // reset the input fields after submit
}
//Create a function that will display all of the animals stored in the array as an unordered list on the page.
function displayAnimalList() {
let template = '';
for (let index = 0; index < animalStore.length; index++) {
const animal = animalStore[index];
template += `<tr><td>${animal.name}</td><td>${animal.gender}</td><td>${animal.species}</td></tr>`;
}
document.getElementById("animal-list").innerHTML = template; // you can optimize it to not render whole list again and again- only newly animal added
}
function resetInputFields() {
document.getElementById('name').value = "";
Array.from(document.getElementsByName('gender')).map(o => o.checked = false);
document.getElementById('species').value = "";
}
</script>
</body>
</html>
animals.push({
id: animals.length + 1,
name: animal_name.value,
gender: animal_gender.value,
species: animal_species.value
});
let animals = [];
function addAnimal() {
var animal_name = document.getElementById('name');
var animal_gender = document.getElementById('gender');
var animal_species = document.getElementById('species');
animals.push({
id: animals.length + 1,
name: animal_name.value,
gender: animal_gender.value,
species: animal_species.value
});
}
function updateDisplay(identifier) {
var animal = animals.find(obj => {
return obj.id === identifier
});
var table = document.getElementById('animals').getElementsByTagName('tbody')[0];
var newRow = table.insertRow();
//Col 1
var newCell = newRow.insertCell(0);
var newText = document.createTextNode(animal.name);
newCell.appendChild(newText);
//Col 2
newCell = newRow.insertCell(1);
var newText = document.createTextNode(animal.gender);
newCell.appendChild(newText);
//Col 3
newCell = newRow.insertCell(2);
var newText = document.createTextNode(animal.species);
newCell.appendChild(newText);
}
function handleErrors(name, gender, species) {
var error = document.getElementById('error');
var errorText = "";
if (name == null || name.value == '') {
errorText += "Name cannot be blank. ";
}
if (gender == null || gender.value == '') {
errorText += "Gender cannot be blank. ";
}
if (species == null || species.value == '') {
errorText += "Species cannot be blank. ";
}
if (errorText != "") {
error.classList.remove("hidden");
error.innerText = errorText;
return true;
} else {
return false;
}
}