javascript - 如何使用此代码在单片眼镜电子书阅读器中制作下一个和上一个按钮？

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

我认为问题出在这个变量声明 block 中:

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();

是否有任何具有适用“值”属性的输入字段，例如<input type="text" id="file"> ？

你确定文件名中肯定有一个点，即扩展名？

还有 event.target.files看起来很可疑。

如果没有问题，请告诉控制台在哪一行显示错误。您可以双击错误以突出显示错误行。