javascript 获取并使用输入值

Question

你好，我只是想知道是否有办法获取输入值来更改/将其用于healLevel = 70%，我尝试了一下，但我对此很陌生，但失败了。

(function() {
  var checkbox1 = document.getElementById("cb1");
  var checkbox2 = document.getElementById("cb2");

  heal = document.getElementsByClassName('hud-shop-item')[10];
  petHeal = document.getElementsByClassName('hud-shop-item')[11];
  useHeal = document.getElementsByClassName('hud-toolbar-item')[4];
  usePetHeal = document.getElementsByClassName('hud-toolbar-item')[5];
  healthBar = document.getElementsByClassName('hud-health-bar-inner')[0];
  up = new Event('mouseup');
  healLevel = 70;

  HEAL1 = function() {
    if (checkbox1.checked) {
      heal.attributes.class.value = 'hud-shop-item';
      useHeal.dispatchEvent(up);
      heal.click();
    }
  };

  HEAL2 = function() {
    if (checkbox2.checked) {
      petHeal.attributes.class.value = 'hud-shop-item';
      usePetHeal.dispatchEvent(up);
      petHeal.click();
    }
  };

  script = function(e) {
    if (e.keyCode == 82) {
      HEAL1();
      HEAL2();
    }
  };
  document.addEventListener('keydown', function(e) {
    script(e);
  });
  observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
      if (parseInt(mutations[0].target.style.width) < healLevel) {
        HEAL1();
        HEAL2();
      }
    });
  });
  observer.observe(healthBar, {
    attributes: true,
    attributeFilter: ['style']
  });
})();

<input type="number" min="1" max="100" value="70">

这就是我尝试过的方法，但没有看到任何想法，为什么我失败了？ 我尝试使用 document.querySelector 我做错了什么？

(function() {
  var checkbox1 = document.getElementById("cb1");
  var checkbox2 = document.getElementById("cb2");
  var elem = document.querySelector('input[type="number"]');

  heal = document.getElementsByClassName('hud-shop-item')[10];
  petHeal = document.getElementsByClassName('hud-shop-item')[11];
  useHeal = document.getElementsByClassName('hud-toolbar-item')[4];
  usePetHeal = document.getElementsByClassName('hud-toolbar-item')[5];
  healthBar = document.getElementsByClassName('hud-health-bar-inner')[0];
  up = new Event('mouseup');
  healLevel = elem.value;

 

<input type="number" min="1" max="100" value="70">

Answer 1

HTML

<input type="number" min="1" max="100" value="70" id="healRate" onchange="updateHealLevel()">

JS

var healLevel = document.getElementById("healRate").value;

function updateHealLevel(){
healLevel = document.getElementById("healRate").value;
}

编辑

已更新，以便对输入值的更改将更新治愈级别。

要使值随输入而变化，您必须简单地在 HTML 组件上添加一个 onchange 事件，以便当用户更改此输入时，它将运行更新healLevel 的代码。