javascript - 检查输入文本是否已填充并显示不同的div

Question

我有 3 个输入文本，如果填充了 3 个以上的文本，我想显示一个 div，如果填充了 3 个以上的 2 个输入，我想显示一个不同的 div，依此类推。我怎样才能用 javascript 做到这一点？

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

我试过了，还是不行

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';
}