<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 200px;
}
</style>
</head>
<body>
<input type="text" id="inp"><button id="btn">切换</button><br>
<img src="./img/1.jpg" alt="" id="img"><br>
<p id="txt">当前显示的是./img/1.jpg</p>
<script>
// 效果描述: 点击切换按钮, 图片根据输入的数字切换
// 1. 获取元素
var btn = document.getElementById('btn');
console.log(btn);
var inp = document.getElementById('inp');
var img = document.getElementById('img');
console.log(img);
var txt = document.getElementById('txt');
// 2. 添加事件
btn.onclick = function(){
// 3. 具体操作
// 1. 获取输入框的内容
console.log(inp.value);
// 2. 图片切换
img.src = './img/' + inp.value + '.jpg'; // 相对地址
// 3. 改变p标签的内容
txt.innerHTML = '当前显示的是./img/' + inp.value + '.jpg';
// 4. 清空输入框
inp.value = '';
}
</script>
</body>
</html>