这是第一个脚本，它的效果和我想象的一样好
const maxNum = 4 //number of pages
pgNum = 1 //page number
chara = [{
name: "A",
aspect: "apple",
src: "https://files.catbox.moe/r0k1oc.png",
},
{
name: "B",
aspect: "banana",
src: "https://files.catbox.moe/82uq7t.png",
},
{
name: "C",
aspect: "creativity",
src: "https://files.catbox.moe/eiv3z6.png",
},
{
name: "D",
aspect: "dog",
src: "https://files.catbox.moe/stfuzk.png",
},
]
charaImage = document.getElementById("charaImg");
charaImage.src = chara[pgNum - 1].src
document.getElementById("charaName").innerHTML = chara[pgNum - 1].name + ", the " + chara[pgNum - 1].aspect + " object";
//BUTTONS to increase and decrease pgNum, thus changing shown character name, image, description on the page
function previous() {
if (pgNum > 1) {
pgNum--
} else {}
charaImage = document.getElementById("charaImg");
charaImage.src = chara[pgNum - 1].src
document.getElementById("charaName").innerHTML = chara[pgNum - 1].name + ", the " + chara[pgNum - 1].aspect + " object";
} //the last 3 lines seem to work regardless of pgNum after pressing the button.
function next() {
if (pgNum < maxNum) {
pgNum++
} else {}
charaImage = document.getElementById("charaImg");
charaImage.src = chara[pgNum - 1].src
document.getElementById("charaName").innerHTML = chara[pgNum - 1].name + ", the " + chara[pgNum - 1].aspect + " object";
}<main>
<h1 id="charaName"></h1>
<p id="charaDes"></p>
<button class="button" onclick="previous()">previous</button>
<button class="button" onclick="next()">next</button>
<img id="charaImg"></img>
</main>但是在第二个脚本中，它没有按预期工作
Num = 1
const maxNum = 2
document.getElementById("Num").innerHTML = Num
song = [{
title: "A",
src: "https://files.catbox.moe/c5zrzm.mp3"
},
{
title: "B",
src: "https://files.catbox.moe/jzu1ls.mp3"
},
]
document.getElementById("musicTitle").innerHTML = song[Num - 1].title
music = document.getElementById("music");
music.src = song[Num - 1].src;
function next() {
if (maxNum > Num) {
Num++;
} else {
Num = 1;
}
music = document.getElementById("music")
music.src = song[Num - 1].src //it doesn't seem to reflect the change despite its similarity of structure in the first script.
document.getElementById("Num").innerHTML = Num
document.getElementById("musicTitle").innerHTML = song[Num - 1].title;
}<h1 id="Num"></h1>
<h1 id="musicTitle"></h1>
<button onclick="next()">pipi</button>
<audio controls>
<source id="music" type="audio/mpeg">
</audio>我看到 Num 变量和 Song.title 变量都发生了变化，并在页面上正确应用，但 Song.src 没有变化。我想知道问题是什么。
在这两个脚本中，我希望页面中显示的图像/音频根据 pgNum/Num 变量进行更改，该变量随着单击按钮而更改。 另外，有没有办法避免在第一个脚本中重复这 3 行 3 次？
charaImage = document.getElementById("charaImg");
charaImage.src = chara[pgNum-1].src
document.getElementById("charaName").innerHTML = chara[pgNum-1].name + ", the " + chara[pgNum-1].aspect + " object";
它不会表现得像图像，您必须手动加载它们对媒体元素有限制（由于潜在的滥用或其他原因）
<html>
<h1 id="Num"></h1>
<h1 id="musicTitle"></h1>
<button onclick="next()">pipi</button>
<audio controls id="audio">
<source id="music" type="audio/mpeg">
</audio>
<script type="text/javascript">
Num = 1
const maxNum = 2
document.getElementById("Num").innerHTML = Num
song = [{
title: "A",
src: "https://files.catbox.moe/c5zrzm.mp3"
},
{
title: "B",
src: "https://files.catbox.moe/jzu1ls.mp3"
},
]
document.getElementById("musicTitle").innerHTML = song[Num - 1].title
music = document.getElementById("music");
music.src = song[Num - 1].src;
function next() {
if (maxNum > Num) {
Num++;
} else {
Num = 1;
}
music = document.getElementById("music")
music.src = song[Num - 1].src //it doesn't seem to reflect the change despite its similarity of structure in the first script.
audio = document.getElementById("audio");
audio.load()
audio.play()
document.getElementById("Num").innerHTML = Num
document.getElementById("musicTitle").innerHTML = song[Num - 1].title;
}
</script>
</html>