Question

我试图获取范围滑块的值，所以我决定使用javascript在span id = demo中显示滑块的值。有什么想法如何将javascript的值转移到文本框中，以便我可以调节该值。

我的PHP和HTML

<input id="mySlider" type="range" min="1" max="6" name="rangee" step="1" value="1" onchange="resizeImage();" style="width:510px;">
    <p>Width: <span id="demo"> </span> <input name="num" type="text" value="<?php  ?>" />

      <?php

        $_POST["rangee"] = $_POST["num"];
        $ranger = $_POST["rangee"];

        if($ranger == "1"){
          echo "39 inches";
        }else if($ranger == "2"){
          echo "39 inches";
        }else if($ranger == "3"){
          echo "54 inches";
        }else if($ranger == "4"){
          echo "60 inches";
        }else if($ranger == "5"){
          echo "76 inches";
        }else if($ranger == "6"){
          echo "72 inches";
        }

      ?>

我的Javascript

  var slider = document.getElementById("mySlider");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value;
  }

  function resizeImage() {
  var image = document.getElementById('img-wrapper'),
      ranger = document.getElementById('mySlider');
  image.style.width = 120*(mySlider.value / 1)+'px';
  }

非常感谢您的帮助。预先感谢。

Answer 1

如果您希望根据滑块值设置文本框值，则可以使用它。

function resizeImage(value) {
  var image = document.getElementById('img-wrapper'),
    ranger = document.getElementById('mySlider'),
    newvalue = value;
  //image.style.width = 120 * (mySlider.value / 1) + 'px';

  //uncommand this part if you looking for inches value
  /*if (value == 1) {
    newvalue = '39 inches';
  }else if (value == 2) {
    newvalue = '41 inches';
  }*/
  
  
  $('#num').val(newvalue);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input id="mySlider" type="range" min="1" max="6" name="rangee" step="1" value="1" onchange="resizeImage(this.value);" style="width:510px;">
<p>Width: <span id="demo"> </span>
  <input id="num" name="num" type="text" />

但是，如果您要根据滑块值寻找英寸值，则需要取消命令该部分

    /*if (value == 1) {
     newvalue = '39 inches';
    }else if (value == 2) {
     newvalue = '41 inches';
    }*/

如何将id demo的值转移到文本框值

1 个答案: