Как сделать следующую и предыдущую кнопку в монокле для чтения электронных книг, используя эти коды?

Question

Я создал эту функцию для кнопки "Следующая" и "Предыдущая", другими словами, на моей html-странице есть 2 кнопки, и когда я нажимаю кнопку "Следующая" или "Предыдущая", страницы в монокле также перемещаются соответствующим образом. Я прочитал, что мне нужно использовать пользовательский флиппер страницы для это, но они не предоставили пример того, как его создать.

это то, что я пытался и терпит неудачу:

function fileSelected(event,str) {

    var thefile = document.getElementById('file');
    var tval = thefile.value;
    var ext = tval.split('.').pop();
    var files = event.target.files;
    var fname = tval.split(/(\\|\/)/g).pop();


   if (ext == "epub" || ext == "EPUB"){
        function createReader(bookData) {
            Monocle.Reader("reader", bookData);
        }
        new Epub(files[0], createReader);

   }else if(ext == "htm" || ext == "htm" || ext == "html" || ext == "HTML"){

        var bookData = {
            getComponents: function () {
                return [
                    fname
                    ];
            },
            getContents: function () {
                return [
                    {title: "test", src: fname}
                    ]
            },
            getComponent: function (componentId) {
                return {url:componentId};
            },
            getMetaData: function(key) {
                return {
                    title: "Test documents",
                    creator: "Aron Woost"
                    }[key];
            }
        }
                window.reader = Monocle.Reader('reader', bookData);

   }else{
        return false;
   }


}
function next(){    
    Monocle.Reader('reader', {}, {}, function (reader) {
      reader.moveTo({ direction: 1 });
    });
}

при нажатии на кнопку выдаст неопределенную ошибку в моей консоли.

Любая идея, как реализовать пользовательский флиппер страницы?

https://github.com/joseph/Monocle/wiki/Page-flippers

Я не настолько подкован в JS. Извини:(

Answer 1

Я думаю, что проблема в этом блоке объявления переменных:

var thefile = document.getElementById('file');
var tval = thefile.value;
var ext = tval.split('.').pop();
var files = event.target.files;
var fname = tval.split(/(\\|\/)/g).pop();

Есть ли поле ввода со свойством value, например <input type="text" id="file">?

Вы уверены, что имя файла будет иметь точку, то есть расширение?

Также event.target.files выглядит подозрительно

Если в этом нет ничего плохого, пожалуйста, укажите, в какой строке отображается ошибка консоли. Вы можете дважды щелкнуть по ошибке, чтобы выделить ошибочную строку.