JavaScript: Cannot properly re-run for loop function w/ if statements

First of all thanks for your help.

I have a JSFiddle here https://jsfiddle.net/tonegzup/zvf0xgev/

Problem: When first running the page, you will be able to submit "software1" in the text field and get back 3 results, these 3 results are part of an array of objects. You can then run another submit with "aast" and you will get back 1 result. Now if you run a submit for "software1" you will only get back 1 result, instead of the original 3.

Band-aid: It is not in the jdFiddle, but right now I have this setup with a "clear" button that just refreshes the page so the user can successfully run the tool again, but there has to be a way for me to get this done right.

Also I have tried using jQuery but my jQuery does not run, when I try to use anything with "$" in my .js it just never does anything and I have included jquery-1.11.3.min.js. So I've been trying to stick with javascript.

  <body>
<section class="page-header">
  <h1 class="project-name">PocTool</h1>
  <!--<h2 class="project-tagline">poctool</h2>-->

    <input class="button" id="app" type="string" onkeypress="enterKey(event)">
    <button type="button" onclick="myFunction();">Submit</button>


    <div id="anal">
    <p>
    <ul id="analy1" style="list-style-type:none">
        <img id="glyphu"</img>
        <li id="name"></li>
        <li id="lastname"></li>
        <li id="homenum"></li>
        <li id="busnum"></li>
        <li id="ex"></li>
        <li id="cellnum"></li>
        <img id="glyphe"</img>
        <li id="email"></li>
        <li id="company"></li>
    </ul>  


    <p>
    <ul id="analy2" style="list-style-type:none">
        <img id="glyphu"</img>
        <li id="name2"></li>
        <li id="lastname2"></li>
        <li id="homenum2"></li>
        <li id="busnum2"></li>
        <li id="ex2"></li>
        <li id="cellnum2"></li>
        <img id="glyphe"</img>
        <li id="email2"></li>
        <li id="company2"></li>
    </ul>  

    <p>
    <ul id="analy3" style="list-style-type:none">
        <img id="glyphu"</img>
        <li id="name3"></li>
        <li id="lastname3"></li>
        <li id="homenum3"></li>
        <li id="busnum3"></li>
        <li id="ex3"></li>
        <li id="cellnum3"></li>
        <img id="glyphe"</img>
        <li id="email3"></li>
        <li id="company3"></li>
    </ul>   
    <p>
    <ul id="analy4" style="list-style-type:none">
        <img id="glyphu"</img>
        <li id="name4"></li>
        <li id="lastname4"></li>
        <li id="homenum4"></li>
        <li id="busnum4"></li>
        <li id="ex4"></li>
        <li id="cellnum4"></li>
        <img id="glyphe"</img>
        <li id="email4"></li>
        <li id="company4"></li>
    </ul>   
    <p>
    <ul id="analy5" style="list-style-type:none">
        <img id="glyphu"</img>
        <li id="name5"></li>
        <li id="lastname5"></li>
        <li id="homenum5"></li>
        <li id="busnum5"></li>
        <li id="ex5"></li>
        <li id="cellnum5"></li>
        <img id="glyphe"</img>
        <li id="email5"></li>
        <li id="company5"></li>
    </ul>
    </div>

</section>

var arr0 = [
{lou: {
    firstname: 'Lou ',
    lastname: 'Steve',
    name: 'Lou Steve',
    homenum: '',
    busnum: '782-887-7836',
    ex: '52484',
    cellnum: '553-552-6908',
    email: 'Lou.Steve@123.com',
    company: ''
}
    }, {
    perkeisha: {
        firstname: 'Perkaisha',
        lastname: 'pants',
        name: 'Perkeisha pants',
        homenum: '754-366-6908',
        busnum: '586-727-7834',
        ex: '37569',
        cellnum: '754-366-6908',
        email: 'Perkeisha.pants@123.com',
        company: ''
    }
}, {
    tom: {
        firstname: 'Tom ',
        lastname: 'Tiny',
        name: 'Tom Tiny',
        homenum: '859-823-1155',
        busnum: '963-553-7837',
        ex: '37837',
        cellnum: '547-224-5045',
        email: 'Tom.Tiny@123.com',
        company: ''
    }
}
];



var arr =    [{
    appl: 'software1',
    anal1: arr0[1].perkeisha, 
    anal2: arr0[2].tom, 
    anal3: arr0[0].lou
},


    {
        appl: 'aast',
        anal1: arr0[1].perkeisha
    },


    {
        appl: 'accent health',
        anal1: arr0[1].perkeisha
    },
    {
        appl: 'accudose',
        anal1: arr0[2].tom
    }
          ];





var app, arrLength = arr.length;



function myFunction() {



var x, analystSupport, app;


// Get the value of the input field with id="app"
x = document.getElementById("app").value;
app = x.toLowerCase();



for (var i = 0; i < arrLength; i++){
if (app === arr[i].appl) {



console.log(arr[i].anal1.firstname);
console.log(arr[i].anal1.lastname);


var arr1 = [

    {analy1 : arr[i].anal1},
    {analy2 : arr[i].anal2},
    {analy3 : arr[i].anal3},     
    {analy4 : arr[i].anal4},         
    {analy5 : arr[i].anal5}              
];


if (arr1[0].analy1 === undefined) {
        document.getElementById("analy1").innerHTML = " ";
} else if (arr1[0].analy1 !== undefined) {

            document.getElementById("glyphu").src= "glyph/glyphicons-4-user.png";
            document.getElementById("name").innerHTML = arr1[0].analy1.name;
            document.getElementById("homenum").innerHTML = arr1[0].analy1.homenum;
            document.getElementById("busnum").innerHTML = arr1[0].analy1.busnum;
            document.getElementById("ex").innerHTML = arr1[0].analy1.ex;
            document.getElementById("cellnum").innerHTML = arr1[0].analy1.cellnum;
            document.getElementById("glyphe").src= "glyph/glyphicons-11-envelope.png";
            document.getElementById("email").innerHTML = arr1[0].analy1.email;
            document.getElementById("company").innerHTML = arr1[0].analy1.company;

    }
if (arr1[1].analy2 === undefined){
            document.getElementById("analy2").innerHTML = " ";
} else if (arr1[1].analy2 !== undefined) {
            document.getElementById("glyphu").src= "glyph/glyphicons-4-user.png";
            document.getElementById("name2").innerHTML = arr1[1].analy2.name;
            document.getElementById("homenum2").innerHTML = arr1[1].analy2.homenum;
            document.getElementById("busnum2").innerHTML = arr1[1].analy2.busnum;
            document.getElementById("ex2").innerHTML = arr1[1].analy2.ex;
            document.getElementById("cellnum2").innerHTML = arr1[1].analy2.cellnum;
            document.getElementById("email2").innerHTML = arr1[1].analy2.email;
            document.getElementById("company2").innerHTML = arr1[1].analy2.company;
    }
if (arr1[2].analy3 === undefined){
            document.getElementById("analy3").innerHTML = " ";
} else if (arr1[2].analy3 !== undefined) {
            document.getElementById("glyphu").src= "glyph/glyphicons-4-user.png";
            document.getElementById("name3").innerHTML = arr1[2].analy3.name;
            document.getElementById("homenum3").innerHTML = arr1[2].analy3.homenum;
            document.getElementById("busnum3").innerHTML = arr1[2].analy3.busnum;
            document.getElementById("ex3").innerHTML = arr1[2].analy3.ex;
            document.getElementById("cellnum3").innerHTML = arr1[2].analy3.cellnum;
            document.getElementById("email3").innerHTML = arr1[2].analy3.email;
            document.getElementById("company3").innerHTML = arr1[2].analy3.company;
    }
if (arr1[3].analy4 === undefined){
            document.getElementById("analy4").innerHTML = " ";
} else if (arr1[3].analy4 !== undefined) {
            document.getElementById("glyphu").src= "glyph/glyphicons-4-user.png";
            document.getElementById("name4").innerHTML = arr1[3].analy4.name;
            document.getElementById("homenum4").innerHTML = arr1[3].analy4.homenum;
            document.getElementById("busnum4").innerHTML = arr1[3].analy4.busnum;
            document.getElementById("ex4").innerHTML = arr1[3].analy4.ex;
            document.getElementById("cellnum4").innerHTML = arr1[3].analy4.cellnum;
            document.getElementById("email4").innerHTML = arr1[3].analy4.email;
            document.getElementById("company4").innerHTML = arr1[3].analy4.company;
    }
if (arr1[4].analy5 === undefined){
            document.getElementById("analy5").innerHTML = " ";
} else if (arr1[4].analy5 !== undefined) {
            document.getElementById("glyphu").src= "glyph/glyphicons-4-user.png";
            document.getElementById("name5").innerHTML = arr1[4].analy5.name;
            document.getElementById("homenum5").innerHTML = arr1[4].analy5.homenum;
            document.getElementById("busnum5").innerHTML = arr1[4].analy5.busnum;
            document.getElementById("ex5").innerHTML = arr1[4].analy5.ex;
            document.getElementById("cellnum5").innerHTML = arr1[4].analy5.cellnum;
            document.getElementById("email5").innerHTML = arr1[4].analy5.email;
            document.getElementById("company5").innerHTML = arr1[4].analy5.company;
    }




    }
    } //end of iterate through 'arr' array

    }



    function enterKey(e){
    var key=e.keyCode || e.which;
    if (key==13){
        myFunction();
    }
    }

Answers


I figured this out...

when I was doing this

document.getElementById("analy1").innerHTML = " ";

I was creating the problem. Setting the code to

document.getElementById("analy1").style.display = "none";

Would fix the problem by ensuring the IDs are still available, but make sure they just are not displayed.


Need Your Help

How to backup a database by pyodbc

python database backup pyodbc

The backup statement can't be used in a transaction when it execute with pyodbc cursor. It seems that the pyodbc execute the query inside a default transaction.

How to filter mails using received time using vba

vba outlook-vba

I am trying to find a way to filter email based on multiple criteria however i while running the below code i am getting an error "Cannot Parse Condition.Error at"09". The ReceivedDate is 8/24/200...