js点击多个同类元素 只能点击一次 必须循环出来

//css

.duihuan{
display: flex;
justify-content:space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.coupon_list{
padding: 10px;
border-bottom: 2px solid yellow;
}
.coupon_list dl{
display: inline-block;
width: 49%;
text-align: center;
color:red;
}
.coupon_list dl dt img{
width: 100%;
}

//html

<div class="coupon_list" id="coupon_list">
    <dl>
    <dt><img src="../images/money5.png"></dt>
    <dd>需消耗：500积分</dd>
    </dl>
    <dl>
    <dt><img src="../images/money10.png"></dt>
    <dd>需消耗：1000积分</dd>
    </dl>
    <dl>
    <dt><img src="../images/money20.png"></dt>
    <dd>需消耗：2000积分</dd>
    </dl>
    <dl>
    <dt><img src="../images/money50.png"></dt>
    <dd>需消耗：5000积分</dd>
    </dl>
    </div>

//js

<script type="text/javascript">

var list=document.querySelector(".coupon_list");
var dl=list.getElementsByTagName("dl")
var len=dl.length;
for(var i=0;i<len; i++){   //循环出来
dl[i].onclick=function(){
alert(2)
}

}

//alert(this.className);弹出类名

</script>