经典面试题4

接上文,相对于前几次的面试题,这一到面试题更具实际性,话不多说,上题目:给定三张已知图片,要求根据下拉列表图片动态变化;假定函数名为: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值,当事件被触发后,页面就会进行渲染.下图为运行的结果图:

原图

切换效果

到这里基本上功能就全部实现了.希望对大家有学习作用,喜欢的还请大家点个赞哦~

本文纯属原创;

分类:经典面试题经历;