我查了很多帖子，但是
a）他们没有为我工作 b）或者我不理解他们
我是一名科学老师，并不希望他的班级学生能够携带一本1.9公斤的教科书。我已经将所有页面上传到一个网站，我将图像逐个1提取到一个html文件中，一旦完成，我将上传到学校服务器。
我有jQuery和Next按钮的页面导航系统。我现在正在尝试通过键入其编号来创建基于输入的方式来访问页面。我尝试了一些我认为理论上应该起作用的东西
以下是我当前＆＃34;网站＆＃34;。
的代码段
Previousfunction PlusPage() {
a = a + 1
b = "https://github.com/sudface/ps8/raw/master/" + a + ".png"
document.getElementById("page").src = b
}
var a = 1;
var b
function RemPage() {
a = a - 1
document.getElementById("demo").innerHTML = a
b = "https://github.com/sudface/ps8/raw/master/" + a + ".png"
document.getElementById("page").src = b
}
function doStuff() {
var nameElement = document.getElementById("someInput");
a = nameElement.value
b = "https://github.com/sudface/ps8/raw/master/" + a + ".png"
}
答案 0 :(得分：2)
您只是遗漏了doStuff函数中的一行简单代码：
document.getElementById("page").src = b;。另外，如上所述，没有ID为demo的元素。
我还为您提供了一些验证，用户应该无法使用此实施方式对少于1的任何内容进行分页，并且它们也不能超过355。如果您愿意，可以包含一些错误反馈，即无效数字，或者太低或太高等等。
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 = "https://github.com/sudface/ps8/raw/master/" + a + ".png"
document.getElementById("page").src = b
}
function RemPage() {
// validation
if (a <= minPage) { return; }
a = a - 1
b = "https://github.com/sudface/ps8/raw/master/" + 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 = "https://github.com/sudface/ps8/raw/master/" + 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="https://github.com/sudface/ps8/raw/master/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>
我个人这样做，使用onclick或onchange等HTML属性被视为不良做法，因为您可以轻松地执行此操作在JS中。我知道这只是一个基本的JS应用程序，并没有真正需要讨论什么是最好的方法，但作为一个有效且可靠的快速脚本，这就是如何我亲自去做。
注意，如果您的网页上有其他任何脚本，那么在任何规模的项目中分离您的代码都是一个非常好的主意，这很糟糕在全局范围内，使用自调用函数允许代码运行，好像它只是放在全局范围内，但是你无法访问自调用函数之外的变量，例如，将console.log(a);添加到JS的末尾，这将导致错误，因为变量a在全局范围内未定义。
加号，如果您确实将console.log(a);添加到最后一行，虽然它会导致控制台错误，但实际上它根本不会影响应用程序本身。因此，除了更易于管理之外，它还允许代码本身更可靠。
/**
* @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 = "https://github.com/sudface/ps8/raw/master/",
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 = "https://github.com/sudface/ps8/raw/master/" + 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 = "https://github.com/sudface/ps8/raw/master/" + 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="https://github.com/sudface/ps8/raw/master/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>