javascript value属性问题 上全部代码

代码如下:

   <a href='javascript:void(0);' class="useCard" id="useCard">使用礼品卡</a>
    <div class="card" id="cardInfo" style="display:none">
        <form >
            <input type="hidden" name="card_use" id="card_use" value='false'>
            卡号:<input type="text"   name="card_code" id="card_code" value=""><br/><br/>
            密码:<input type="text"   name="card_passwd" id="card_passwd" value=""><br/><br/>
                 <input type="button" id="confirmUseCard" value="确认使用">
        </form>
    </div>



    window.onload=function()
    {

        var userCardButton       = document.getElementById('useCard');
        var cardBox              = document.getElementById('cardInfo');
        var confirmUseCardButton = document.getElementById('confirmUseCard');

        userCardButton.onclick=function()
        {   
            if(cardBox.style.display=='none')
            {
                cardBox.style.display='block';
            }
            else
            {
                cardBox.style.display='none';
            }   
        }   


        confirmUseCardButton.onclick=function()
        {   
            var card_code = document.getElementById('card_code').value;

            var card_pass = document.getElementById('card_pass').value;

            if(card_code.length<=0 || card_code=='')
            {

                layer.alert('请填写卡号');
                return 
            }
            else if(card_pass.length<=0 || card_pass=='')
            {
                layer.alert('请填写卡密码');
                return 
            }
            else
            {


            }   

        }


    }

执行后报错信息
Uncaught TypeError: Cannot read property 'value' of null ，请问我错在什么地方？

---

var card_pass = document.getElementById('card_passwd').value;

---

/* var card_code = document.getElementById('card_code').value;

    var card_pass = document.getElementById('card_pass').value;*///报错
    var card_code = $('#card_code').val();
    var card_pass = $('#card_pass').val();//运行正确

煞笔的原生JS