javascript - HTML 输出元素不报告值

Question

输出元素正在监听 HTML5 范围 slider 。

无法报告范围值:

 var outputElement = document.createElement('output');
  outputElement.setAttribute('for', 'myRange');
  outputElement.setAttribute('name', 'x');
  document.body.appendChild(outputElement);

Plnk 在这里: http://plnkr.co/edit/PlygAYJpxfzQIB5ywW2I?p=preview

Answer 1

您的输入和输出元素需要采用表单。然后，当您修改表单中的输入元素时，您将更改输出元素:

rangeCreator.addEventListener('click', function(){
  var form = document.createElement("form");
  form.id = 'form1';
  form.oninput = function () {
    x.value = myRange.value;
  }
  document.body.appendChild(form);
  var rangeInput = document.createElement('input');
  rangeInput.setAttribute('type', 'range');
  rangeInput.setAttribute('min', '0');
  rangeInput.setAttribute('max', '100');
  rangeInput.setAttribute('id', 'myRange');
  rangeInput.setAttribute('name', 'myRange');

  //rangeInput.addEventListener('input', displayValue);

  form.appendChild(rangeInput);


  var outputElement = document.createElement('output');
  outputElement.setAttribute('for', 'myRange');
  outputElement.setAttribute('name', 'x');
  outputElement.id = "x";
  form.appendChild(outputElement);
});

我还更新了您的示例 here .