Javascript 在屏幕底部播放歌曲并更改图像的单击

我创建了一个简单的音乐播放器，可以播放三首歌曲。点击一首歌，我希望改变屏幕底部的图像。这是我的html和js。任何帮助都将不胜感激。我对这件事还不太熟悉。最好执行两个函数，例如onclick changeSong（）；changePic（）

弹性时间：

---

图像来源是什么？图像标签在哪里？这可能很简单，比如当歌曲发生变化时动态更新图像标签的来源，但是你需要有一些我们可以处理的东西。查看其他动态加载图像的解决方案，看看哪些方案适合您。当你喜欢一个实现时，把它添加到你的代码中，我们就可以从中开始工作。不需要为一行代码创建一个新函数。只需在现有函数中设置图像的新

src

值。另外，

a

元素是不必要的，并且语义不正确。只需将

li

元素设置为具有

click

事件处理程序的元素，并完全删除

a

元素。只需添加img标记。是的，我想我明白斯科特指的是什么了。我只使用了去年教我的前几本书中的一些元素。所以我会改变这个习惯。当我添加到现有函数时，我一直没有定义.src。不幸的是，由于HTML、CSS和JavaScript多年来的发展，许多（我的意思是很多）陈旧、过时和不正确的web开发技术至今仍然存在。更糟糕的是，其中许多仍然被教授，仅仅是因为一小部分web开发人员真正理解web语言的用途以及如何正确地集成它们。大学里的学生（为这种教育买单的人）经常被教授错误的标准。祝你好运，感觉好多了感谢斯科特的祝愿。是的，这是事实。我将继续努力解决这个问题。谢谢你的建议。

<div id="container">
    <audio id="player">
        <source src="assets/Beethoven-Symphony5-1.mp3">
    </audio>
    <button id = "btnPlay">Play</button>
    <button id = "btnPause">Pause</button>
    <button id = "btnStop">Stop</button>
    <label for="rngVolume">Volume</label>
    <input type="range" id="rngVolume" min="0" max="1" step=".01" value=".5" data-highlight="true" onchange="changeVolume()" />
    <ul data-role="listview" data-inset="true">
        <li data-role = "list-divider">Songs</li>
        <li><a href="#" onclick="changeSong('Beethoven-Symphony5-1')">01 Symphony 5</a></li>
        <li><a href="#" onclick="changeSong('Beethoven-violin-sonata1-1')">02 Sonata 1</a></li>
        <li><a href="#" onclick="changeSong('bizet-jeux-d-enfants-poupee')">03 Bizet</a>     
    </ul>
    <img src="img/Beethoven2.jpg">
    <div data-role="footer" data-position="fixed">
    <output id="timeOut">Elasped Time:</output>
</div>