Как я могу получить свой код для изменения значения во всплывающем окне? - PullRequest
0 голосов
/ 27 октября 2019

Я строю, вернее, пытаюсь создать расширение для 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;похоже, не выводится время, оставшееся до появления всплывающего окна на панели инструментов.

1 Ответ

0 голосов
/ 27 октября 2019

Проблема в том, что 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>
...