javascript - document.getElementById().value 未返回正确的值

Question

我正在尝试在 Pepper 机器人的平板电脑上创建一个输入字段，允许用户通过语音输入他们的电子邮件地址。我使用语音识别框来获取用户所说的字母并引发一个事件，以便 Javascript 可以捕获它并修改文本。但似乎“document.getElementById("abc").value”永远不会获取当前屏幕上的内容，而是默认值。

示例:我说“1”，它显示“hello1”(完全好)。然后我说“2”，它显示“hello2”(期待“hello12”)

这是我的 JS 代码:

var session = new QiSession(function(session) {
            // "Connection esterblished!";
          }, function() {
            // "Could not connect to the robot";
          });

// Subscribe to ALMemory Service   
session.service("ALMemory").then(function(ALMemory) {
  // "ALMemory proxy subscription successful!";  
  ALMemory.getData('voice_input').then(function(voice_input){  
        document.getElementById("abc").value += voice_input;        
  });

});

HTML 代码:

<input type="text" name="email" id="abc" value="hello">

与“ session ”有什么关系吗？因为即使我使用全局变量来存储语音输入，我也只能修改该变量的值，而无法获取该变量在函数内部的当前值(我能获取的是初始化值)。

Answer 1

不幸的是，我无法找到有关 JavaScript API 的正确公共(public)文档。不过，这是我能找到的。

看来您正在使用 Promise 作为事件监听器。 promise 触发一次，而事件监听器重复触发。您正在使用他们所说的调用( promise )而不是信号(事件)。如果您有关于信号的文档，我会使用它们，因为它们更接近您想要做的事情。否则，你可以这样做:

var session = new QiSession(function(session) {
    // "Connection esterblished!";
    // Subscribe to ALMemory Service
    session.service("ALMemory").then(function(ALMemory) {
        // "ALMemory proxy subscription successful!";
        function getVoice() {
            ALMemory.getData('voice_input').then(function(voice_input){
                document.getElementById("abc").value += voice_input;
                getVoice();
            });
        }
        getVoice();
    });
}, function() {
    // "Could not connect to the robot";
});

首先，我将服务订阅者移至 QiSession 成功连接的回调中，因为这通常是在异步函数调用中定义 session 的位置。当 ALMemory 被订阅时，它定义并调用 getVoice，它检索用户的语音，附加到字段，然后再次运行 getVoice 以对另一个监听进行排队。您可能需要添加一个条件来最终停止它。如果 Pepper 支持 async/await 的话，也可能值得研究一下，因为这样你就可以用 while 循环轻松地做到这一点。