Question

我需要将值输出到在输入ID号中输入的span类输出中。这是我的代码，它不起作用：

var btn = document.querySelector('.add-val');
btn.addEventListener('click', change_progress);

function change_progress() {
  var elem = document.getElementById("myBar");
  val = parseInt(document.getElementById("number").value);
  var message = document.querySelector('.output');
  var width = 0;
  var id = setInterval(frame, val);

  function frame() {
    if (width >= val) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';

    }
    message.innerHTML = val + '%';
  }

}

<div class="form-group">
  <label for="number">Введите число и нажмите кнопку "применить"!</label>
  <input type="text" class="form-control" id="number" min="0" max="100" required>
</div>


<button type="button" class="btn btn-primary add-val">Применить</button>

<div class="progress-wrap">
  <div class="progress-mess">Ваша форма заполнена на <span class="output">___</span></div>
  <progress max="100" value="0" id="myBar" class="progress"></progress>
</div>

Answer 1

请检查此示例，它将使用插入的数字填充输出。

   <div class="form-group">
        <label for="number">Введите число и нажмите кнопку "применить"!</label>
        <input type="text" class="form-control" id="number" min="0" max="100" required>
    </div>


   <button type="button" onclick="change_progress();" class="btn btn-primary add-val">Применить</button>

   <div class="progress-wrap">
         <div class="progress-mess">Ваша форма заполнена на <span class="output">___</span></div>  
        <progress max="100" value="0" id="myBar" class="progress"></progress>
    </div>
<script>



function change_progress() {
        var elem = document.getElementById("myBar");
        var val = parseInt(document.getElementById("number").value);
        var message = document.querySelector('.output'); 
        var width = 0;
        var id = setInterval(frame, val);
        function frame() {
            if (width >= val) {
                clearInterval(id);
            } else {
                width++; 
                elem.style.width = width + '%';
                elem.innerHTML = width * 1  + '%';

            }
              message.innerHTML = val + '%';
        }  

    }
</script>

Answer 2

您只需将setInterval的第二个参数更改为毫秒，然后将宽度设置为消息跨度，如：

message.innerHTML = width + '%';

var btn = document.querySelector('.add-val');
btn.addEventListener('click', change_progress);

function change_progress() {
  var elem = document.getElementById("myBar");
  val = parseInt(document.getElementById("number").value);
  var message = document.querySelector('.output');
  var width = 0;
  var id = setInterval(frame, 1000);

  function frame() {
    if (width >= val) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';

      message.innerHTML = width + '%';
    }
  }

}

<div class="form-group">
  <label for="number">Введите число и нажмите кнопку "применить"!</label>
  <input type="text" class="form-control" id="number" min="0" max="100" required>
</div>
<button type="button" class="btn btn-primary add-val">Применить</button>

<div class="progress-wrap">
  <div class="progress-mess">Ваша форма заполнена на <span class="output">___</span></div>
  <progress max="100" value="0" id="myBar" class="progress"></progress>
</div>

如何从输入输出值

2 个答案: