オブジェクトが正しく解釈されないJavaScript

オブジェクト内の値が変更されたことをコンソールログに示しても、divの高さは正しく変更されません。これは何の結果ですか？私はそれがオブジェクトの内部の0の数に応じて変更されることを期待しています。たとえば、1つの0がある場合は25ピクセルに減少し、0の場合は0ピクセルに減少します。ただし、すべての入力が満たされても常に50pxに減少します。どうして？オブジェクトが正しく解釈されないJavaScript

https://jsfiddle.net/r4gf716f/

$(document).ready(function() { 

    var obj = { 
    userLength: 0, 
    passLength: 0, 
    }; 

    $('#username').on('change', function() { 
    if ($('#username').val().length < 6) { 
     $('#para').html('too short - user'); 
     obj.userLength = 0; 
     console.log('failed user'); 
    } else { 
     $('#para').html(''); 
     obj.userLength = 1; 
     console.log('WORKINGUSER'); 
    } 
    }) 

    $('#password').on('change', function() { 
    if ($('#password').val().length < 6) { 
     $('#para').html('too short - pass'); 
     obj.passLength = 0; 
     console.log('failed pass'); 
    } else { 
     $('#para').html(''); 
     obj.passLength = 1; 
     console.log('passed user'); 
    } 
    }) 


    var errorCount = Object.keys(obj).filter(function(key) { 
    return (obj[key] === 0); 
    }).length; 

    if (errorCount > 0) { 

    $('.color').css("height", +errorCount * 25 + "px"); 
    console.log(errorCount); 
    } 

})

HTML

<body> 
    <p id='para'> 

    </p> 

    <input type='text' id='username' placeholder='u'> 
    <input type='text' id='password' placeholder='p'> 

    <div class='color'> 

    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

</body>

CSS apsillers同様

.color { 
    background-color: black; 
    height: 200px; 
    width: 100px; 
    transition: all ease-in-out 2s; 
}

出典

2017-12-16 Kizaki Shabuto

あなたの '$ CSS（。 "height"、...） '$（document）.ready'コールバックが一度しか実行されないので、これまでに一度だけ実行されます。おそらく 'change'ハンドラの中で実行したいでしょうか？ – apsillers

@apsillersはい、これにループを使用しますか？何を指示してるんですか？ –

次のようなコールバック関数を使用してonchangeを使用します。 –

は、それが一度だけ実行されますと言います。私は、あなたがチェックを行うための関数を作成しました。最初とエラーをチェックしたいときに呼び出すだけです。

$(document).ready(function() { 

    var obj = { 
    userLength: 0, 
    passLength: 0, 
    }; 
checkErrors(); 
    $('#username').on('change', function() { 
    if ($('#username').val().length < 6) { 
     $('#para').html('too short - user'); 
     obj.userLength = 0; 
     console.log('failed user'); 
    } else { 
     $('#para').html(''); 
     obj.userLength = 1; 
     console.log('WORKINGUSER'); 
    } 
    checkErrors(); 
    }) 

    $('#password').on('change', function() { 
    if ($('#password').val().length < 6) { 
     $('#para').html('too short - pass'); 
     obj.passLength = 0; 
     console.log('failed pass'); 
    } else { 
     $('#para').html(''); 
     obj.passLength = 1; 
     console.log('passed user'); 
    } 
    checkErrors(); 
    }) 

function checkErrors(){ 
    var errorCount = Object.keys(obj).filter(function(key) { 
     return (obj[key] === 0); 
    }).length; 

    if (errorCount > 0) { 

     $('.color').css("height", errorCount * 25 + "px"); 
     console.log(errorCount); 
    } 
} 
})

編集：

したい場合は、この0PXすべき.color divのコードのようになります。（ '色'）

$(document).ready(function() { 

    var obj = { 
    userLength: 0, 
    passLength: 0, 
    }; 
checkErrors(); 
    $('#username').on('change', function() { 
    if ($('#username').val().length < 6) { 
     $('#para').html('too short - user'); 
     obj.userLength = 0; 
     console.log('failed user'); 
    } else { 
     $('#para').html(''); 
     obj.userLength = 1; 
     console.log('WORKINGUSER'); 
    } 
    checkErrors(); 
    }) 

    $('#password').on('change', function() { 
    if ($('#password').val().length < 6) { 
     $('#para').html('too short - pass'); 
     obj.passLength = 0; 
     console.log('failed pass'); 
    } else { 
     $('#para').html(''); 
     obj.passLength = 1; 
     console.log('passed user'); 
    } 
    checkErrors(); 
    }) 

function checkErrors(){ 
    var errorCount = Object.keys(obj).filter(function(key) { 
     return (obj[key] === 0); 
    }).length; 


     $('.color').css("height", errorCount * 25 + "px"); 
     console.log(errorCount); 
} 
})

出典

2017-12-16 02:00:17

エラーがなければ '.color'を0pxにして、' if（errorrCount> 0） 'を取り除くか、else文を追加してください。あなたの好み。 –

長さが決して0にならないのはなぜですか？ある時点で、両方の入力が満たされている場合、var obj内の両方のキーの値は1で、長さが0である必要がありますか？いいえ？ –

@KizakiShabuto私は自分の答えを編集しました。元の理由は 'error.length'が0の場合、' if'演算がコードの実行を中止するからです。 –

オブジェクトが正しく解釈されないJavaScript

答えて

関連する問題