JavaScript不适用于所有HTML页面

Question

我正在平板电脑上显示Pepper机器人；我有一个功能齐全的HTML索引页面，其中包含一个问题列表-每个问题在单击时都会重定向到其相应的HTML-2个音量按钮和2个其他按钮-一个弹出指令说明图像，另一个关闭索引页面，返回到初始屏幕，单击该初始屏幕将显示索引页面。到目前为止，一切正常。问题是，当我单击一个问题时-我被重定向到其HTML页面，但随后我被卡在那里，因为这两个音量按钮或其他两个按钮都不起作用；

我确保在每个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页面能够像index.html一样响应音量以及←和X按钮，因为它们使用的是完全相同的Javascript。

Answer 1

我能够找到一些解决方法：为每个HTML页面创建一个JavaScript文件，这是多余的而且不是最佳的，但是至少它可以工作。

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

如果有人有其他建议，我会为之

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