我和 Javascript 一样绿色,但我只是希望下面的页面更改照片(它确实如此)更新文本(它确实如此)并在按下鸟名后播放鸟的歌曲。我让它使用“播放”按钮播放一首歌曲,然后我尝试将其中的一部分移动到每个功能中,没有乐趣。我试过另一个 getelementbyid(音频),但没有用,当我试图让它从每个函数中运行时我被卡住了。
我希望这很清楚,并提前感谢您的任何帮助。
<html>
<head>
</head>
<body>
<p>
<h2>Click the button to change the bird image.</h2>
</p>
<img id="myImg" src="http://www.outgrabe.net/bird04.jpg" width="207" height="198">
<p id="p1">Rose Robin by JJ Harrison (CC-by-SA)</p>
<BR></BR>
<button onclick="myFunction_1()">Pardalote</button>
<button onclick="myFunction_2()">Purple Swamp Hen</button>
<button onclick="myFunction_3()">White-headed Stilt</button>
<button onclick="myFunction_4()">Inland Thornbill</button>
<button onclick="myFunction_5()">Rose Robin</button>
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Pardalote.mp3"></audio>
<script>
function myFunction_1() {
document.getElementById("myImg").src = "http://www.outgrabe.net/bird00.jpg";
document.getElementById("p1").innerHTML = "Pardalote by fir0002 (CC-by-NC)";
}
function play() {
var audio = document.getElementById("audio");
audio.play();
}
function myFunction_2() {
document.getElementById("myImg").src = "http://www.outgrabe.net/bird01.jpg";
document.getElementById("p1").innerHTML = "Purple swamp hen by Toby Hudson (CC-by-SA)";
}
function myFunction_3() {
document.getElementById("myImg").src = "http://www.outgrabe.net/bird02.jpg";
document.getElementById("p1").innerHTML = "White-headed Stilt by JJ Harrison (CC-by-SA)";
}
function myFunction_4() {
document.getElementById("myImg").src = "http://www.outgrabe.net/bird03.jpg";
document.getElementById("p1").innerHTML = "Inland Thornbill by Peter Jacobs (CC-by-SA)";
}
function myFunction_5() {
document.getElementById("myImg").src = "http://www.outgrabe.net/bird04.jpg"
document.getElementById("p1").innerHTML = "Rose Robin by JJ Harrison (CC-by-SA)";;
}
/* The links to the MP3 flies
Pardalote
https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Pardalote.mp3
Purple Swamp Hen
https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Purple-Swamphen.mp3
White-headed Stilt
https://amitylabradoodles.com.au/wp-content/uploads/2021/07/White-backed-Stilt-bird-sounds.mp3
Inland Thornbill
https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Inland-Thornbill.mp3
Rose Robin
https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Rose-Robin.mp3 */
}
</script>
</body>
</html>