I´m working on an epub in InDesign. I created a button on the Master page of the document and an element who covers some text. If the button is clicked, the Element should disappear to display the content beneath. I would like to achieve, that by clicking the button the state of the button is saved, so when turning the page its the same (covered or uncovered) as on the page before, till the user clicks again. I wrote a JavaScript, because I thought with that I could "manipulate" all pages of the epub at once to achieve this. Unfortunately my method has two issues, which may be related so I post them together:
1) I add the js-file in the export window and InDesign automatically puts the script-tag to import the js-file it in the head-section of every xhtml-file. When I open a xhtml-file I get an "Uncaught TypeError: Cannot read property 'style' of undefined" error. But the script works, when I manually put it at the end of the body-section.
var cover = document.getElementsByClassName("cover")[0];
var button_none = document.getElementsByClassName("button_none")[0];
var button_inline = document.getElementsByClassName("button_inline")[0];
// var button_status = 1;
if (button_status ==1){
button_none.style.display ="inline";
button_inline.style.display ="none";
cover.style.display = "inline";
}
else{
button_none.style.display ="none";
button_inline.style.display ="inline";
cover.style.display = "none";
}
button_none.onclick = function() {
cover.style.display ="none";
button_none.style.display ="none";
button_inline.style.display = "inline";
// button_status = 0;
// return button_status;
}
button_inline.onclick = function() {
cover.style.display ="inline";
button_none.style.display ="inline";
button_inline.style.display = "none";
// button_status = 1;
// return button_status;
}
Because every page of the epub is an individual xhtml-file it´s time-consuming to change it in every file. Maybe there´s a better way to make this work or maybe this is even connected to the second issue?
2) Because every page is an individual xhtml-file, my approach of using a variable for "saving" the buttons state is not working, because its not the same on the next page. I never worked with passing variables between different files that´s why I don´t know if my approach could even work like I think it could when I figure out how to pass the variable?
Another idea was to set a "data-value" which saves the buttons state, but with this I also don´t know how to pass it in my 100+ pages epub. I did some research about it but only found get-methodes for forms, but nothing I could use in my case.
I'd be happy if someone could help me with this, cause with trying by myself I'm not getting anywhere. Maybe my whole approach is not good from the beginning?
On Desktop I use AZARDI for opening the epubs, on mobile Kobo Books or Infinity reader and Chrome to inspect the xhtml files.
EPUB3 viewers operate in a limited browser environment. They have much of the same functionality as a full web browser, but not all. You mentioned that you opened one of the generated XHTML files, but you didn't say how. If you used Firefox, or Google Chrome, you aren't testing the file correctly.
Bulk edits to multiple pages in an EPUB3 can be done, but you'll likely have better luck using Calibre to do so. https://calibre-ebook.com/
Calibre can help you diagnose and repair the style error you encountered too.
Some, but certainly not all, EPUB3 viewers support the localStorage API. You should try that to store information that needs to be accessible between pages. I found an example repo that demonstrates the technique: https://github.com/AnadoluUniversity/Localstorage-with-EPUB3-master