I made an html file. What I wanted to do was:
- show image, name, description of character
- make two buttons(previous, next) that changes the page shown, which disappears if the current page is the first or last.
- make href on the image if the page is available, which I decide on manual
and the following accomplishes all that.
maxNum = 3 //number of pages-1
pgNum = 0 //page number-1
chara = [
{
name: "A",
aspect: "apple",
description: "sweet"
},
{
name: "B",
aspect: "banana",
description: "soft"
},
{
name: "C",
aspect: "creativity",
description: "shiny",
},
{
name: "D",
aspect: "dog",
description: "loud",
},
]
update();
toggleVisible();
function toggleVisible() {
if(pgNum==maxNum) {
document.getElementById("next").style.visibility = "hidden";
}
else{
document.getElementById("next").style.visibility = "visible";
}
if(pgNum==0) {
document.getElementById("prev").style.visibility = "hidden";
}
else{
document.getElementById("prev").style.visibility = "visible";
}
}
function update() {
image = document.getElementById("img");
image.src = "../profile/" + chara[pgNum].aspect+ ".png";
image.alt = "image of " + chara[pgNum].name
document.getElementById("charaName").innerHTML = chara[pgNum].name + ", <br>the " + chara[pgNum].aspect + " chara";
document.getElementById("charaDes").innerHTML = chara[pgNum].description;
document.getElementById("page").innerHTML = (pgNum + 1) + "/" + (maxNum + 1);
document.getElementById("charaPage").innerHTML = "../page/" + chara[pgNum].aspect + ".html";
}
function imgRedirect(){
if(pgNum==5){
window.open("../page/"+chara[pgNum].aspect+".html");
}
}
//buttons
function previous() {
if(pgNum >0) {
pgNum--;
}
update();
toggleVisible();
}
function next() {
if(pgNum < maxNum) {
pgNum++;
}
update();
toggleVisible();
} <p id="charaName"></p>
<p id="charaDes"></p>
<p id="page"></p>
<img id="img" onclick="imgRedirect()">
<button id="prev" onclick="previous()">previous</button>
<button id="next" onclick="next()">next</button>however the following doesn’t show the page number or the buttons.
maxNum = 3 //number of pages-1
pgNum = 0 //page number-1
chara = [
{
name: "A",
aspect: "apple",
description: "sweet"
},
{
name: "B",
aspect: "banana",
description: "soft"
},
{
name: "C",
aspect: "creativity",
description: "shiny",
},
{
name: "D",
aspect: "dog",
description: "loud",
},
]
update();
toggleVisible();
function toggleVisible() {
if(pgNum==maxNum) {
document.getElementById("next").style.visibility = "hidden";
}
else{
document.getElementById("next").style.visibility = "visible";
}
if(pgNum==0) {
document.getElementById("prev").style.visibility = "hidden";
}
else{
document.getElementById("prev").style.visibility = "visible";
}
}
function update() {
image = document.getElementById("img");
image.src = "../profile/" + chara[pgNum].aspect+ ".png";
image.alt = "image of " + chara[pgNum].name
document.getElementById("charaName").innerHTML = chara[pgNum].name + ", <br>the " + chara[pgNum].aspect + " chara";
document.getElementById("charaDes").innerHTML = chara[pgNum].description;
document.getElementById("charaPage").innerHTML = "../page/" + chara[pgNum].aspect + ".html";
document.getElementById("page").innerHTML = (pgNum + 1) + "/" + (maxNum + 1);
}
function imgRedirect(){
if(pgNum==5){
window.open("../page/"+chara[pgNum].aspect+".html");
}
}
//buttons
function previous() {
if(pgNum >0) {
pgNum--;
}
update();
toggleVisible();
}
function next() {
if(pgNum < maxNum) {
pgNum++;
}
update();
toggleVisible();
} <p id="charaName"></p>
<p id="charaDes"></p>
<p id="page"></p>
<img id="img" onclick="imgRedirect()">
<button id="prev" onclick="previous()">previous</button>
<button id="next" onclick="next()">next</button>the only differences were order of “page” and “charaPage”. what is going on?