JavaScript 不适用于所有 HTML 页面

Question

我正在研究 Pepper 机器人的平板显示器；我有一个功能性 HTML 索引页面，其中包含一个问题列表——每个问题在单击时都会重定向到其各自的 HTML——、2 个音量按钮和 2 个其他按钮——一个会弹出说明图像，另一个会关闭索引页面和回到启动画面，点击后会显示索引页面。到目前为止，一切正常。问题是，当我点击一个问题时，我会被重定向到它的 HTML 页面，然后我就卡在那里了，因为 2 个音量按钮和其他 2 个按钮都不起作用；

我确保在每个 HTML 页面中包含以下内容：

<script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
<script type="text/javascript" src="faq.js"></script>

我还重用了用于索引页面的相同 JavaScript 函数。

我注释掉了一些行：

btnPrevious.addEventListener('click', goToPreviousPage);

因为我注意到它阻止了启动屏幕在单击时消失 - 即可见性属性保持在 visible 而不是切换到 hidden 从而显示索引页面，但仍然，剩下的 3 个按钮没有无论如何工作。

这是我的 faq.js 代码：

/* global QiSession */

var serviceName = 'ADFAQ';
var volumeUpEvent = serviceName + '/VolumeUp';
var volumeDownEvent = serviceName + '/VolumeDown';
var volumeData = serviceName + '/Volume';

/* Clickable buttons */
var btnReturn = document.getElementById('return');
var btnHelp = document.getElementById('call_help');
var btnPrevious = document.getElementById('previous_page');
var btnVolUp = document.getElementById('volume-up');
var btnVolDown = document.getElementById('volume-down');

/* Help image and splash screen */ 
var helper = document.getElementById('helper');
var img = document.getElementById('click_on_me');
var memory;
var volume;
var audioDevice;

QiSession(connected, disconnected);

function connected (s) {
    console.log('QiSession connected');
    var questions = document.getElementById('questions');

    /* Associating buttons to their respective functions */
    btnHelp.addEventListener('click', showHelper);
    btnReturn.addEventListener('click', closeQuestions);
    //btnPrevious.addEventListener('click', goToPreviousPage);

    btnVolUp.addEventListener('click', raiseVolume);
    btnVolDown.addEventListener('click', lowerVolume);
    img.addEventListener('click', loadQuestions);
    questions.addEventListener('click', clickOnQuestion);


    s.service('ALMemory').then(function (m) {
        m.subscriber(serviceName + '/DialogEnded').then(function (subscriber) {
            subscriber.signal.connect(hideQuestions);
        });

        m.subscriber(serviceName + '/Pepper').then(function (subscriber) {
            subscriber.signal.connect(displayPepperHTML)
        });


        m.subscriber(serviceName + '/RaiseVolume').then(function (subscriber) {
            subscriber.signal.connect(raiseVolume);
        });
        m.subscriber(serviceName + '/LowerVolume').then(function (subscriber) {
            subscriber.signal.connect(lowerVolume);
        });

        memory = m;
    });

    s.service('ALAudioDevice').then(function (a) {

        a.getOutputVolume().then(assignVolume);
        audioDevice = a
    });
}

function disconnected () {
    console.log('QiSession disconnected');
}


function assignVolume(value){
    volume = value;
}

function raiseVolume (event) {

    var changed = 0;
    if(volume < 100) {
        volume =  Math.min(volume + 5, 100);
        audioDevice.setOutputVolume(volume);
        changed = 1;
    }
    memory.insertData(volumeData, volume);
    memory.raiseEvent(volumeUpEvent, changed);

}

function lowerVolume (event) {

    var changed = 0;
    if(volume > 30) {
        volume =  Math.max(volume - 5, 0);
        audioDevice.setOutputVolume(volume);
        changed = 1;
    }
    memory.insertData(volumeData, volume);
    memory.raiseEvent(volumeDownEvent, changed);

}

function showHelper (event) {
    if (btnHelp.innerHTML === '?') {
        helper.style.opacity = '1';
        helper.style.zIndex = '1';
        btnHelp.innerHTML = '←';
    } else {
        helper.style.opacity = '0';
        helper.style.zIndex = '-1';
        btnHelp.innerHTML = '?';
    }
    btnHelp.blur();
}

function loadQuestions (event) {
    memory.raiseEvent(serviceName + '/LoadQuestions', 1);
    img.style.visibility = 'hidden';
}

function goToPreviousPage () {
    window.location.href = "index.html";

}

function displayPepperHTML() {
    window.location.href = "pepper.html";
}


function closeQuestions (event) {
    if(location.href != "index.html")
    {window.location.href = "index.html";}
    memory.raiseEvent(serviceName + '/CloseQuestions', 1);
    btnReturn.blur();
}

function hideQuestions (data) {
    if (data !== 0) {
        img.style.visibility = 'visible';
        helper.style.opacity = '0';
        btnHelp.innerHTML = '?';
    }
}

function clickOnQuestion (event) {
    memory.raiseEvent(serviceName + '/' + event.target.id, 1);
}

这是我无法正常工作的 pepper.html 代码：

<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Pepper</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=1280, user-scalable=no" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <link type="text/css" rel="stylesheet" href="css/faq.css" />
</head>

<body>

    <header>
        <h1>Bla bla bla</h1>
        <span class="buttons">
            <button id="previous_page" class="button-help"> ← </button>
            <button id="return" class="button-return">X</button>
        </span>

        <div id="helper" class="pop-up">
            <img src="img/interactionscreen_frf.png" alt="Bla bla bla">
        </div>
    </header>


    <ul id="questions">
        <p>
             Bla bla bla
        </p>

        <div class="volume-part">
            <div id="volume-up" class="Click-me">+</div>
            <img src="img/speaker.png" alt="Bla bla bla" style="vertical-align: middle;">
            <div id="volume-down" class="Click-me">-</div>
        </div>

    </ul>

    <script type="text/javascript" src="/libs/qimessaging/2/qimessaging.js"></script>
    <script type="text/javascript" src="faq.js"></script>

</body>

</html>

感谢您的帮助。

我希望 pepper.html 页面能够响应音量和 ← 和 X 按钮，就像 index.html 应该的那样，因为它们使用完全相同的 Javascript。

Answer 1

我能够找到一些解决方法：为每个 HTML 页面创建一个 JavaScript 文件，我知道这是多余且非最佳的，但至少它有效。

这也让我意识到注释掉的行阻塞了程序，因为index.html 页面不使用previous_page 按钮，这就是导致我为每个 HTML 页面制作一个 JS 文件的原因。

如果有人有任何其他建议，我会全力以赴。

编辑：我将 JS 脚本的数量减少到只有 2 个。一个用于index.html，另一个用于其他问题的结构相同的 html 页面。