接上文,相对于前几次的面试题,这一到面试题更具实际性,话不多说,上题目:给定三张已知图片,要求根据下拉列表图片动态变化;假定函数名为:showImage(),请完成代码.
乍一看有点懵,但是你要分析几点问题:1.题目的几个元素是什么?分别是下拉列表,动态变化,那好很根据这几点来写:
下拉列表:<select>;动态变化:就是动态改变图片路径;代码来了:
html
<body>
<img id="image" src="img/biyezheng.png" width="200px" height="200px">
<br/>
<select id="select_image" onchange="showImage(this)">
<option value="biyezheng">毕业证</option>
<option value="xueweizheng">学位证</option>
<option value="xuexinwang">学信网</option>
</select>
</body>
javascript:
<script>
function showImg(oSelect_image) {
let str = oSelect_image .value;
let obj = document.getElementById("image");
obj.src = "img/" + str + ".png";
}
</script>
到这里运行的时候你就会发现:给下拉列表绑定一个dom事件:onchange(),而这里的this是指你在点击列表后获取到当前点击元素的value值,当事件被触发后,页面就会进行渲染.下图为运行的结果图:
到这里基本上功能就全部实现了.希望对大家有学习作用,喜欢的还请大家点个赞哦~
本文纯属原创;
分类:经典面试题经历;
