Day 12 "array 2"

Hector·2023년 3월 25일
0

Vanilla JavaScript

목록 보기
12/14
<!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(name){
//         for(const each of beakSom){
//             if(each.name===name){
//                 console.log(each.name);
//                 console.log(each.age);
//                 console.log(each.weight);
//                 console.log(each.height);
//                 console.log(each.birth);
//                 console.log(each.sex);
//                 break;
//             }
//         }
//     }
    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>
                                       
profile
I`m Studying Bankend

0개의 댓글