Как получить значение из output?

349

12 марта 2017, 06:58

<form action="return false" oninput="work.value=inp_work.valueAsNumber">
<div class='inp_relax'><output for='inp_relax' name='work'>30</output></div>
<input id='relax_range' name='inp_work' type="range" min='1' max='60' 
value='30'/>
</form>

Как получить значение из тега Output?Это ползунок. Как можно реализовать получение значения. Функция $().text получает только данное значение в теге, а при передвижении ползунка значение не получает.

Данное чудо творю тут

Answer 1

Потому что надо событие change отслеживать инпута

function changeOutput(range) { 
    $("[for='relax_range']").text(range); 
 
} 
 
$(document).ready(function() { 
  $('#relax_range').on("change", function() { 
       var  range = $(this).val(); 
       changeOutput(range); 
       console.log(range); 
  }); 
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="return false" > 
   <div class='inp_relax'><output for='relax_range' name='work'>30</output></div> 
   <input id='relax_range' name='inp_work' type="range" min='1' max='60' value='30'/> 
</form>

Answer 2

Зачем брать значение из тега output, если его можно взять из input?

function getvalue() { 
  console.log(document.getElementById("relax_range").value); 
}

<form action="return false" oninput="work.value=inp_work.valueAsNumber"> 
  <div class='inp_relax'><output for='inp_relax' name='work'>30</output></div> 
  <input id='relax_range' name='inp_work' type="range" min='1' max='60' value='30' /> 
</form> 
<button onclick="getvalue()">Get Value</button>