addEventListener auserhalb der function

[bosko]

Moin,

ich versuche bei meinem addEventListener in mein slider den Wert auserhalb der Funktion aufzurufen:

var slider = document.querySelector('#slider');
function range_change_events() {
   return slider.value;
}
var test = slider.addEventListener('input', range_change_events);
console.log(test);

den Wert 'test' möchte ich in einer anderen überprüfung verwenden, wie z.B.:

if(test < '50') {

In diesem Beispiel Funktioniert der Slider mit der JS nicht da der Event nicht live arbeiten kann
wie kann ich dies einstellen...

Gruß

 

[Dormilich]

Dir ist bewußt, das der Rückgabewert von addEventListener() komplett unabhängig vom Rückgabewert von range_change_events() ist, da das Event-System asynchron arbeitet?

Deswegen kann

ich versuche bei meinem addEventListener in mein slider den Wert auserhalb der Funktion aufzurufen

gar nicht funktionieren (du versuchst synchrone und asynchrone Verarbeitung zu mischen)

Es gibt Möglichkeiten mit solchen asynchronen Daten zu arbeiten, aber um etwas empfehlen zu können, fehlt uns das Wissen über den konkreten Anwendungsfall.

 

[bosko]

hoi

ich möchte von mein Range Silder den value Wert in JS übertragen:

<input type="range" id="slider" class="myRange" min="0" max="100" name="fuel" orient="vertical" value="75">

in der JS möchte ich das eine Funktion erst aufgerufen wird wenn diese einen Bestimmten Value Wert erreicht hat, z.B.:

if(silder.value == '25') {
// andere JS Funktion
}

diese darf aber nicht im "slider.addEventListener('input', range_change_event);" laufen...

function range_change_event() {
....
....
}

 

[kkapsner]

Warum darf das nicht in dem range_change_event laufen? Wann soll dann geprüft werden?

 

[bosko]

Guten Morgen,

zusammengefasst sieht mein Script zur Zeit so aus:

<script type="text/javascript">
  var slider = document.querySelector('#slider');
  var lbl = document.querySelector(".lbl"); 
  function range_change_event() {
    lbl.textContent = slider.value + '%';
  }
  slider.addEventListener('input', range_change_event);
   
if(slider.value > '<?=$wert;?>') {
  $(document).ready(function() {
    $('#forms').click(function(e) {
      $.ajax({
        ...
        ...
        ...
      });
    });
  });
}  
</script>
<input type="range" id="slider" class="myRange" min="0" max="100" name="fuel" orient="vertical" value="75">
<span class="lbl"></span>
<a href="#" id="forms" class="forms"></a>

ich hoffe es ist so verständlich was ich will

 

[kkapsner]

OK - so wird das nie funktionieren. Du musst die if-Abfrage innerhalb des .click() machen.

PS: globale Variablen solltest du wirklich vermeiden. V.a. wenn sie, wie bei dir hier, komplett durch lokale ausgetauscht werden können.

 

[bosko]

wie könnte ich diese vermeiden?

was mich auch stört ist, das ich 7 mal hintereinander:

var wert1 = document.querySelector('#wert1');
var wert2 = document.querySelector('#wert2');
....

zu stehen habe, gibt es nicht eine möglichkeit zusammen zufassen?

 

[kkapsner]

$(document).ready(function() {
  $('#forms').click(function(e) {
    if (parseInt(document.getElementById("slider").value, 10) > <?=$wert;?>){
      $.ajax({
        ...
        ...
        ...
      });
    }
  });
});

Ich habe auch mal deinen String-Vergleich da entfernt, da sonst z.B. "2" > "10" ist.

Zu deinem wertX-Problem: da gibt es sicherlich Wege, aber dafür müssen wir wissen, was du danach mit den Variablen machst.