<body>
<input type="text" id="inp"><input type="button" value="切换" id="btn"><br>
<img src="img/1.jpg" alt="" id="pic">
<p id="txt">显示的是img/1.jpg</p>
<script>
var oInp = document.getElementById('inp'),
oBtn = document.getElementById('btn'),
oPic = document.getElementById('pic'),
oTxt = document.getElementById('txt');
oBtn.onclick = function () {
var val = oInp.value;
oPic.src = 'img/' + val + '.jpg';
oTxt.innerHTML = '显示的是img/' + val + '.jpg';
}
</script>
</body>

实现效果如下

本文介绍了一个简单的网页示例,通过按钮点击事件,实现输入框中值对应的图片源切换,并动态更新文本描述。使用了HTML、CSS和JavaScript基本语法,展示了事件监听和DOM操作的基本应用。

被折叠的 条评论
为什么被折叠?



