KidsTextArea2 Example

KidsTextArea2 Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- KidsTextArea2 Example -->

<html lang="en">
    <head>
        <script src="kidsdata.js"></script>
        <script src="script.js"></script>
        <style>
        textarea { overflow-y:scroll; 
                   resize: none;
                   height: 100px;
                   width: 200px;  }
         </style>
     </head>
     <body>
         <h2>KidsTextArea2 Example</h2>
             <label for="kname">Enter desired name:</label><br>
             <input type="input" id="kname"><br><br>

             <button id="btn1">Get Kid Info</button><br><br>

             <p id="output1"></p>

             <label for="kname">Enter gender:</label><br>
             <input type="input" id="kgender"><br><br>

             <button id="btn2">Get by Gender</button><br><br>

             <textarea id="output2"></textarea>
    </body>
</html>

Script File -- script.js

 // KidsTextArea2 Example

// Display gender and age, given the name.
function getByName( ) {
    var kidsArray = JSON.parse(kids);
    var requestedName = 
        document.getElementById("kname").value;
    var para = document.getElementById("output1");
    for (let k of kidsArray) {
        var n = k.name;
        var g = k.gender;
        var a = k.age;
        if (n == requestedName) {
            para.innerHTML = `${n} ${g} ${a}<br>`;
        }
    }
}

// Display name and age given the gender.
function getByGender( ) {
    var kidsArray = JSON.parse(kids);
    var requestedGender = 
    document.getElementById("kgender").value;
    var output2 = document.getElementById("output2");
    var display = "";
    for (let k of kidsArray) {
        var n = k.name;
        var g = k.gender;
        a = k.age;
        if (g == requestedGender) {
            display += `${n} ${g} ${a}\n`;
        }
    }
    output2.value = display;
}

// Attach event handlers
function init( ) {
    var button1 = document.getElementById("btn1");
    button1.addEventListener("click", getByName);
    var button2 = document.getElementById("btn2");
    button2.addEventListener("click", getByGender);
}

// Invoke init method
window.addEventListener("load", init);

Data File -- kidsdata.js

kidsdata.js