我正在构建或试图构建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;似乎没有将剩余时间输出到工具栏中的弹出窗口。
问题是，每次更改值重新创建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>