如何让我的代码更改弹出窗口中的值？答案

【问题标题】：How can I get my code to change the value in the popup?如何让我的代码更改弹出窗口中的值？
【发布时间】：2020-02-22 19:47:40
【问题描述】：

我正在构建或尝试构建 Firefox 扩展。当您单击工具栏上的按钮时，弹出窗口会打开并且用户输入一个数字，然后弹出窗口会从该数字开始倒计时。但是弹出窗口没有显示任何值。

Manifest.json 文件：

{

    "manifest_version": 2,
    "name": "Timer",
    "version": "1.0",

    "description": "",
    "homepage_url": "",
    "icons": {
      "48": "icons/border-48.png"
    },

    "permissions": [
      "activeTab"
    ],

    "browser_action": {
      "default_icon": "icons/border-48.png",
      "default_title": "Timer",
      "default_popup": "popup/pro.html"
    }

  }

JavaScript：

    function timeInMinutesLeft(time){
      let timeSetByUser=(time*60);//converting to seconds
      let start=Date.now();  
      let elapsed = (Date.now() - start)/1000;//time elapsed in seconds
      let timeLeft = Math.round(timeSetByUser - elapsed)
      document.getElementById("timeLeft").innerHTML = timeLeft;
      return timeLeft;
    }
    function set(tabs) {
      let timesUp=False;
      let timeInput=document.getElementById('timerValue');
      let timeInputValue=timeInput.value();
      timeLeft = setInterval(timeInMinutesLeft(timeInputValue), 1000);
    }

HTML：

<div id="popup-content">
        <h6 id=title></h6>
        <input type="number" name="quantity" min="1" max="60" id="timerValue">
        <p id="timeLeft"></p>
        <div class="set button">Timer</div>
    </div>

timeOutput.value=timeLeft;似乎没有将剩余时间输出到工具栏中的弹出窗口。

【问题讨论】：

你试过timeOutput.innerHTML=
请edit 成为主题的问题：包括一个minimal reproducible example 重复问题。对于 Chrome 扩展程序或 Firefox WebExtensions，您几乎总是需要包含您的 manifest.json 和一些背景、内容和/或弹出脚本/HTML，通常是网页 HTML/脚本。寻求调试帮助的问题（“为什么我的代码没有按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定的问题或错误以及（3）重现它所需的最短代码在问题本身中。另请参阅：What topics can I ask about here? 和 How to Ask。

标签： javascript html firefox firefox-addon

【解决方案1】：

问题是 elementSelector 在更改值后重新创建时会失去其绑定，这就是 DOM 的操作方式。您需要让您的作用域元素可以从您的间隔中访问，如下所示：

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("timeLeft").innerHTML = t;
}

    
    
    <!DOCTYPE html>
<html>
<body>

<div id="popup-content">
    <h6 id=title></h6>
    <input type="number" name="quantity" min="1" max="60" id="timerValue">
    <p id="timeLeft"></p>
    <div class="set button">Timer</div>
</div>

</body>
</html>

【讨论】：

我添加了这个：document.getElementById("timeLeft").innerHTML = timeLeft;到 timeInMinutesLeft 函数和 var myVar = setInterval(timeInMinutesLeft(), 1000);但它似乎并没有解决它。