我检查了很多帖子，但是要么
a) 他们对我不起作用
b) 或者我不理解他们
我已经将教科书的所有页面上传到一个网站，我正在从网站上一张一张地提取图像到一个 html 文件中，完成后我将上传到学校服务器。
我有通过 Next 和 Previous 按钮的页面导航系统。我现在正在尝试创建一种基于输入的方式来通过输入页面编号来访问页面。我尝试了一些我认为理论上应该可行
下面是我当前“网站”的代码片段。
function PlusPage() {
a = a + 1
b = "example.com/" + a + ".png"
document.getElementById("page").src = b
}
var a = 1;
var b
function RemPage() {
a = a - 1
document.getElementById("demo").innerHTML = a
b = "example.com/" + a + ".png"
document.getElementById("page").src = b
}
function doStuff() {
var nameElement = document.getElementById("someInput");
a = nameElement.value
b = "example.com/" + a + ".png"
}<!DOCTYPE html>
<html>
<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>最佳答案
您只是遗漏了 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 = "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>编辑2
这就是我个人的做法，使用 onclick 或 onchange 等 HTML 属性被认为是不好的做法，因为您可以轻松做到在 JS 中。我知道这只是一个基本的 JS 应用程序，并没有真正需要争论什么是最好的方法，但作为一个有效且可靠的快速脚本，这就是我个人的做法。
注意，如果您的页面上有任何其他脚本，分离您的代码可能是个不错的主意，这很糟糕，在任何规模的项目中都需要在全局范围内处理，使用自调用函数允许代码运行就好像它只是放在全局范围内，但是您不能访问自调用函数之外的变量，例如添加控制台.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 = "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>关于javascript - 如何从用户输入字段更改 JavaScript 变量(在 HTML 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49253605/