Check if input text is filled and display different divs

Question

I have 3 input text and I want to display a div if one over 3 is filled, a different div if 2 input over 3 are filled and so on. How can I do it with javascript?

<input type="text" id="text1" name="text1" />
<input type="text" id="text2" name="text2" />
<input type="text" id="text3" name="text3" />

I tried this but it doesn't work

function display() {
    if ($('#text').val() != '') {
        document.getElementById('green').style.display = 'block';
    }   
}

Answer 1

CSS

#a, #b, #c {
    visibility:hidden;
}

HTML

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

JavaScript

var istext1filled = document.querySelector('input#text1').value.length>0;
var istext2filled = document.querySelector('input#text2').value.length>0;
var istext3filled = document.querySelector('input#text3').value.length>0;

if(istext1filled) {
    document.querySelector('div#a').style.visibility = 'visible';
}
if(istext2filled) {
    document.querySelector('div#b').style.visibility = 'visible';
}
if(istext3filled) {
    document.querySelector('div#c').style.visibility = 'visible';
}

Answer 2

I think there's a misunderstanding here. @Domenico asked

I have 3 input text and I want to display a div if one over 3 is filled, a different div if 2 input over 3 are filled and so on.

If I am not misunderstanding his statement: I think he is talking about the number of inputs that were filled and not necessarily the particular input that was filled.

Hence JSFiddle :

#div_1, #div_2, #div_3{
    display: none;
}


<input type="text" id="text_1" name="text1" value="" />
<input type="text" id="text_2" name="text2" value=""/>
<input type="text" id="text_3" name="text3" value="" />

<div id="div_1">Only ONE input is filled</div>
<div id="div_2">Only TWO inputs are filled</div>
<div id="div_3">All THREE inputs are filled</div>


$(document).ready(function() {
    $("input[id*='text']").blur(function() {
        var counter=0;
        $("input[id*='text']").each(function(ind, val){
            if($(val).val().trim()!==""){
                counter++;
            }
        });

        $("#div_1, #div_2, #div_3").hide();

        $("#div_"+counter).show(); 
    });
});

But if you want it the other way round, here is the solution too:

#div_1, #div_2, #div_3{
    display: none;
}


<input type="text" id="text_1" name="text1" value="" />
<input type="text" id="text_2" name="text2" value=""/>
<input type="text" id="text_3" name="text3" value="" />

<div id="div_1">Input ONE is filled</div>
<div id="div_2">Input TWO is filled</div>
<div id="div_3">Input THREE is filled</div>


$(document).ready(function() {
    $("input[id*='text']").blur(function() {

        $("#div_1, #div_2, #div_3").hide();
        $("input[id*='text']").each(function(ind, val) {
            if ($(val).val().trim() !== "") {
                console.log("div_"+$(val).prop("id").split("_")[1])
                $("#div_"+$(val).prop("id").split("_")[1]).show();
            }
        });

    });
});