J'essaie de changer la façon dont la valeur affichée à l'aide du curseur. J'ai fait une étiquette qui affiche la valeur comme ci-dessous.

Durée du cours: 1 jour

La valeur affichée ici change en fonction de la valeur du curseur.

Ainsi, lorsque la valeur du curseur est à 1, elle doit être affichée comme "jour" et lorsque la valeur du curseur est supérieure à 1, elle doit être affichée comme "jours".

J'ai utilisé l'instruction if / else dans mon javascript pour changer le nom affiché en fonction de la valeur du curseur. Le codage que j'ai utilisé comme ci-dessous.

Fichier JS:

// method used to get value from slider and display. 

function slider_value() {

    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");

    output.innerHTML = slider.value;

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

// method used to change name according to slider value

function value_name() {

    var count = document.getElementById("myRange");
    var outname = document.getElementById("dname"); 

    if (parseInt(count.value) == 1) {
        outname.innerHTML = "Day";
    }
    else {
        outname.innerHTML = "Days";
    }
}

Fichier HTML:

<label for="duration">

    Course Duration :

    <span id="demo"></span>
    <span id="dname"></span>

</label>

<div class="slidecontainer">

    <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

</div>

J'ai appelé les fonctions à la vue comme ci-dessous:

<script> 
    slider_value();
    value_name();
</script>

Le codage n'affichera aucune erreur lors du débogage, mais il n'affiche que le ou les jours et ne changera pas en fonction de la valeur du curseur. j'attends donc de l'aide et des idées pour y remédier.

Merci beaucoup.

0
hahaha514 19 juin 2019 à 14:22

3 réponses

Meilleure réponse

Vous devez utiliser les événements oninput et onchange de l'élément d'entrée, tels que: oninput="slider_value(this.value)" onchange="slider_value(this.value)".

Utilisez les deux pour une compatibilité totale, car oninput n'est pas pris en charge dans IE10.

Petit exemple ici, pour commencer: https://codepen.io/anon/pen/ewBNGj

Notez que la fonction qui définit la chaîne jour / jours (value_name()) est appelée à partir de la fonction slider_value().

0
ASCE 19 juin 2019 à 11:36

Envelopper la mise en forme du texte du curseur dans une fonction

  function updateSlider(e) {
    if (parseInt(e.value) == 1) {
      output.innerHTML = parseInt(e.value) + " Day";
    } else {
      output.innerHTML = parseInt(e.value) + " Days";
    }
  }

De cette façon, vous pouvez l'appeler une fois au départ et remplir correctement le texte. Pour mettre à jour le contenu du curseur à mesure que quelque chose change, ajoutez l'écouteur d'événement entrée et appelez cette fonction à partir de là.

Voici un exemple:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

slider.oninput = function(e) {
  updateSlider(e.target);
}

function updateSlider(e) {
  if (parseInt(e.value) == 1) {
    output.innerHTML = parseInt(e.value) + " Day";
  } else {
    output.innerHTML = parseInt(e.value) + " Days";
  }
}

updateSlider(slider);
<label for="duration">
                Course Duration :
                <span id="demo"></span>
                <span id="dname"></span>
            </label>

<div class="slidecontainer">

  <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

</div>
0
obscure 19 juin 2019 à 11:44

Pas besoin de calculs js complexes, vous pouvez facilement le faire avec l'événement change. ajouter un écouteur d'événements au input, puis y ajouter votre logique, extraire l'extrait de code

var el = document.getElementById('myRange');
el.addEventListener('change', function(event){
  var value = event.target.value;
  var _container = document.getElementById('demo');
  value == 1 ? _container.innerText = value+' Day' : _container.innerText = value+' Days'
})
<label for="duration">
                Course Duration :
                <span id="demo"></span>
                <span id="dname"></span>
            </label>

            <div class="slidecontainer">

                <input type="range" min="1" max="15" value="1" class="slider" id="myRange">

            </div>
0
Akhil Aravind 19 juin 2019 à 11:37