How to change a JavaScript variable from user input field (in HTML)
Question
I have checked many posts, but either
a) They didn't work for me
b) or I don't understand them
I am a science teacher who doesn't want his class students to suffer from carrying a 1.9 Kilo Textbook around. I have gotten all the pages uploaded to a website, from which I am fetching the images 1 by 1 into a html file which i will upload to the school server once complete.
I have page navigation systems through Next and Previous Buttons. I am now trying to create an input-based way to get to a page by typing its number. I have tried something which I think should theoretically work
Below is a code snippet with my current "website".
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>
1 answers
solution1
2 ACCPTED 2018-03-13 10:26:55
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, ie 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 = "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>
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, 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.