Javascript получить и использовать входное значение

привет, мне просто интересно, есть ли способ получить входное значение, чтобы изменить / использовать его для 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">

javascript

26.09.2018 16:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

HTML

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

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

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

РЕДАКТИРОВАТЬ

Обновлено, чтобы изменение входного значения обновляло healLevel.

Чтобы значение изменилось с вводом, вы должны просто добавить событие onchange в компонент HTML, чтобы при изменении пользователем этого ввода запускался код, который обновит healLevel.

работает, но не обновляется, если я изменяю значение на входе? кстати спасибо за помощь!

— 26.09.2018 16:57

@crowfish Я обновил свой ответ, и это должно сработать для вас.

— 26.09.2018 17:04

Большое спасибо, это просто желание, которое мне нужно! и работает

— 26.09.2018 17:10

@crowfish Совсем не беспокойтесь, рад, что это помогло!

— 26.09.2018 17:11

26.09.2018 16:49