时间戳

首页 > 解决方案 > 如何让我的代码更改弹出窗口中的值？

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

问题描述

我正在构建或尝试构建 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; 似乎没有将剩余时间输出到工具栏中的弹出窗口。

标签： javascripthtmlfirefoxfirefox-addon

解决方案

问题是 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>

推荐阅读