如何从用户输入字段（在HTML中）更改JavaScript变量

Question

我检查了很多帖子，但是

a）他们没有为我工作
b）否则我听不懂

我是一位科学老师，他不希望他的班级学生随身携带1.9 Kilo教科书。 我已经将所有页面上载到网站，从中我将图像一一抓取到一个html文件中，一旦完成，我将其上载到学校服务器。

我具有通过“ Next和“ Previous按钮”的页面导航系统。 我现在正在尝试通过输入页面编号来创建一种基于输入的访问页面的方式。 我尝试了一些我认为在理论上应该可行的方法

下面是我当前的“网站”的代码片段。

 function 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" }

 <!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="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>

Answer 1

您只是从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>

编辑2

这是我个人的方式，使用HTML属性（如onclick或onchange等）被认为是不好的做法，因为您可以在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, ie 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>

如何从用户输入字段（在HTML中）更改JavaScript变量

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-03-13 10:26:55

编辑

编辑2

如何从用户输入字段（在HTML中）更改JavaScript变量

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-03-13 10:26:55

编辑

编辑2

解决方案1
2 已采纳 2018-03-13 10:26:55