我正在试图弄清楚如何在点击不同按钮来显示动物图片时更改图像源。我的JS代码是我的HTML文档头部中间的脚本标记。我把它贴在下面。我正在使用Safari。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
<link rel="stylesheet" href="styles.css">
<script>
function change (){
document.getElementById("pic").src="./images/lion.jpg";
}
</script>
</head>
<body>
<header>
<div class="container">
<h1>Choose an Animal</h1>
<hr>
</div>
</header>
<section>
<div class="container">
<img src="./images/image.jpg" id="pic">
</div>
</section>
<section id="animals">
<div class="container">
<button type="button" class="button1" onclick="change">Lion</button>
<button type="button" class="button1">Tiger</button>
<button type="button" class="button1">Bear</button>
</div>
</section>
</body>
</html>
让您入门的一个简单选择是将您的JavaScript更改为：
function change(index) {
var imageLookup = ["./images/lion.jpg", "./images/tiger.jpg", "./images/bear.jpg"];
document.getElementById("pic").src = imageLookup[index];
}如果将图像列表放在数组中，则可以从每个按钮传递更改函数索引。
如图所示，修改狮子的按钮功能改变（0），改变虎（1）和改变熊（2）。狮子，老虎和熊，哦，我的......如果您的图像路径正确，您应该看到一些切换。
如果你还在努力，请告诉我。
我可能尝试做的是将id分配给容器div并设置你的CSS，以便div的背景是你想要的图像，同样你可以用js改变CSS背景道具。
<section>
<div class="container" id="pic">
<!-- no img tag needed now -->
</div>
</section> 从这里你可以用js获取div并让你的click功能执行相同的更改图像的任务，但它将通过改变CSS中div的background-image属性来实现。
function myFunc () {
document.getElementById('pic').style.backgroundImage =
'url(path/to/image.jpg)';
}如果您使用的是JQuery，则可以更有效地编写代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>Choose an Animal</h1>
<hr>
</div>
</header>
<section>
<div class="container">
<img src="images/lion.jpg" id="pic">
</div>
</section>
<section id="animals">
<div class="container">
<button type="button" class="button1" data-img="lion.jpg">Lion</button>
<button type="button" class="button1" data-img="tiger.jpg">Tiger</button>
<button type="button" class="button1" data-img="bear.jpg">Bear</button>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$('.button1').on('click',function(){
var image = $(this).data('img');
$('.container #pic').attr('src','images/'+ image);
});
})
</script>