<!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.0">
<title>Document</title>
<script src="./script.js"></script>
</head>
<body>
<h1>
<input type="text" id="name">
<button onclick="search_name()">output to console</button>
</h1>
<table>
<thead>
<tr>
<th>Add animals</th>
</tr>
</thead>
<tr>
<th>Name</th>
<td><input type="text" id="names"></td>
</tr>
<tr>
<th>Age</th>
<td><input type="text" id="age"></td>
</tr>
<tr>
<th>Weight</th>
<td><input type="text" id="weight"></td>
</tr>
<tr>
<th>Height</th>
<td><input type="text" id="height"></td>
</tr>
<tr>
<th>Birth</th>
<td><input type="text" id="birth"></td>
</tr>
<table>
</table>
<td>
<select type="text" id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><button onclick="save()">Save</button></td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
const baeakSom = [{
"name": "Beaksul",
"age": "1",
"weight":"13kg",
"height": "50",
"birth": "10.1",
"sex": "female"
},
{
"name": "Som",
"age": "5",
"weight": "6kg",
"height": "30",
"birth": "2.14",
"sex": "female"
}]
function search_name(){
let name = document.getElementById('name').value;
for(let i = 0; i < beakSom.length;i++){
if(BSS[i].name===name){
console.log(beakSom[i].name);
console.log(beakSom[i].age);
console.log(beakSom[i].weight);
console.log(beakSom[i].height);
console.log(beakSom[i].birth);
console.log(beakSom[i].sex);
}
}
}
function save(){
let names = document.getElementById('names').value;
let age = document.getElementById('age').value;
let weight = document.getElementById('weight').value;
let height = document.getElementById('height').value;
let birth = document.getElementById('birth').value;
let sex = document.getElementById('sex').value;
beakSom.push({name:names,age:age,weight:weight,height:height,birth:birth,sex:sex});
}
console.log(BSS[1]);
</script>