You were just missing one simple line of code from the doStuff function:
document.getElementById("page").src = b;. Plus as mentioned, there was no element with the ID demo.
Edit
I've also included some validation for you, the user should be unable to go to page anything less than 1 with this implementation and they shouldn't be able to go past 355 either. If you like you could include some error feedback, i.e. invalid number, or too low, or too high, etc.
var a = 1;
var b;
var minPage = 1;
// change this to the last relevant page if you like
var maxPage = 355; // got this from the Acknowledgements page
function PlusPage() {
// validation
if (a >= maxPage) { return; }
a = a + 1
b = "example.com/" + a + ".png"
document.getElementById("page").src = b
}
function RemPage() {
// validation
if (a <= minPage) { return; }
a = a - 1
b = "example.com/" + a + ".png"
document.getElementById("page").src = b
}
function doStuff() {
var nameElement = document.getElementById("someInput");
// validation
if (nameElement.value > maxPage) { return; }
if (nameElement.value < minPage) { return; }
a = nameElement.value;
b = "example.com/" + a + ".png";
document.getElementById("page").src = b;
}
<!DOCTYPE html>
<html>
<head>
<title>Book Navigation</title>
</head>
<body>
<button class="button button1" onclick="PlusPage()">Next Page </button>
<button class="button button1" onclick="RemPage()">Previous Page </button>
<br>
<br>
<img id="page" src="example.com/1.png" alt="">
<br>
The below textbox should alter the page. but instead, the whole thing stops functioning.
<input id="someInput" type="text">
<input type="button" value="Go to Page" onClick="doStuff()">
</body>
</html>
Edit 2
This is how I'd personally do it, it's considered bad practice to use HTML attributes such as onclick or onchange, etc, seeing as you can easily do it in JS. I know this is only a basic JS application and there's no real need to get into a debate over what's the best way to do it, but as a quick script that works and is reliable, this is how I'd personally do it.
Note, if you have any other scripts on your page, it can be a pretty good idea to separate your code, it's awful, on any scale of project to have things delcared on the global scope, using a self invoked function allows the code to run as if it 's just placed on the global scope, however you cannot access the variables outside of the self invoked function, example being adding console.log(a); to the end of the JS, that will cause an error as the variable a is undefined on the global scope.
Plus, if you do add console.log(a); to the last line, while it'll cause console errors, it won't actually affect the application itself at all. So it allows the code itself to be more reliable too, in addition to much easier to manage.
/**
* @description this is a self invoked function, the purpose of
* making this code into a self invoked function is to ensure that
* this code does not interfere with any other potential code that
* you may have on the page, i.e. other js scripts/libs/framworks
*/
!function () {
// change this to the last relevant page if you like
var maxPage = 355; // got this from the Acknowledgments page
var a = 1;
var b = null;
var minPage = 1;
var $ = function(x) { return document.querySelector(x); };
var events = function(x, y, fnc) {
var list = x.split(" ");
for (var i = 0; i < list.length; i ++) {
y.addEventListener(list[i], fnc);
}
return void 0;
};
events("click", $('#nextPage'), PlusPage);
events("click", $('#prevPage'), RemPage);
events("keypress keyup keydown", $('#someInput'), doStuff);
function goTo(p) {
var start = "example.com/",
end = ".png";
$("#page").src = start + p + end;
}
function PlusPage() {
// validation
if (a >= maxPage) { return; }
goTo(++a);
}
function RemPage() {
// validation
if (a <= minPage) { return; }
goTo(--a);
}
function doStuff() {
var val = this.value;
var firstPage = function () {
b = "example.com/" + 1 + ".png";
$("#page").src = b;
return;
};
// validation
if (val == '') { return firstPage(); }
if (isNaN(val)) { return; } // isNaN = is not a number
if (val > maxPage) { return; }
if (val < minPage) { return; }
a = val;
b = "example.com/" + a + ".png";
$("#page").src = b;
}
}();
<!DOCTYPE html>
<html>
<head>
<title>Book Navigation</title>
</head>
<body>
<button class="button button1" id="nextPage">Next Page </button>
<button class="button button1" id="prevPage">Previous Page </button>
<br>
<br>
<img id="page" src="example.com/1.png" alt="">
<br>
<p>
The below textbox should alter the page.
But instead, the whole thing stops functioning.
</p>
<input id="someInput" type="text">
</body>
</html>
document.getElementById("page").src = bAlso,RemPagecauses a null pointer error since there's no element withid="demo". Remove that line. On an unrelated note, what about creating a PDF...?