Как отобразить значение диапазона ползунка диапазона для каждого показанного ползунка диапазона.

Я пытаюсь отобразить значение ползунка диапазона для каждого ползунка диапазона, распечатанного циклом for, однако значение ползунка диапазона не отображается. Кто-нибудь знает, что я делаю неправильно?

Часть моего кода, которая отображает ползунок диапазона с использованием HTML и Javascript, включена.

    <center id="list-posts">
      <!--
          list of posts 
          <li>
              <H3>Title
              <p>Content

      -->

</center>


<script type="text/javascript">

 function getPosts(){
        var query = new Parse.Query(Post);
        query.find({
          success: function(results){
              var output = "";
              for(var i in results){
                var title = results[i].get("title");
                var content = results[i].get("content");
                var change = remove.html;

                output += '<li>';
                output += '<h3><font face="verdana"><strong>MAC Address: </strong>'+title+'</h3>';

                output += '<p><font face="verdana"><strong>Location: </strong>'+content+'</p>';
                output += '<p></p>';
                output += "<p><div class='row'><div class='large-4'>";
                output += "<input type='range' id='rangeInput' name='rangeInput' min='0' max='100' step='25' value='100' oninput='amount.value=rangeInput.value'></input>";
               output += "<output id='amount' name='amount' for='rangeInput'>100</output>";     //this is the part used to output value of range slider. When I try it by itself, it works, but when this is put in within Javascript, it does not work. What am I doing incorrectly?

               output += "</div></div></p>";

                output += '</li>';

              }
              $("#list-posts").html(output);
          }, error: function(error){
              console.log("Query Error:"+error.message);
          }
      });
    }

    getPosts();

javascript html rangeslider
person Nilim    schedule 16.11.2015    source источник
comment
Возможно, вы обнаружите, что вам лучше помогают с настройкой jsFiddle для людей. Я запустил для вас один на jsfiddle.net/yd316xxm, но, конечно, чего-то не хватает. Кроме того, хотя я не могу запустить ваш пример из-за отсутствия материала, похоже, что вы создаете несколько элементов с одним и тем же идентификатором, что не будет работать должным образом (rangeInput). Вы можете назвать их rangeInput + c, где c увеличивается на 1 в каждом цикле.   -  person Ed Bayiates    schedule 17.11.2015
comment
Спасибо за помощь. Я попробую то, что вы предложили.   -  person Nilim    schedule 17.11.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать этот код для отображения значения ползунка диапазона. Это пример, поэтому, пожалуйста, отредактируйте для ваших нужд.

 function range() {
      var x = document.getElementById("myRange").value;
      document.getElementById("demo").innerHTML = x;
    }
<input type="range" id="myRange" value="90" onchange="range()">

    <p id="demo"></p>

person Adarsh M    schedule 19.07.2019