.js alert(); when text in span change

Question

I got this Code:

const odleglosc = parseFloat(document.getElementsByClassName("dystans")[0].innerText);

const daleko = "za daleko";

if (odleglosc > 200) {
  alert(daleko);
}

<span data-pafe-form-builder-live-preview="lechnarlok" class="dystans" id="dystans">500</span>

It runs fine, because at starting point there is number higher than 200 in it. But when i change it, alert don't trigger again..

How can i solve that? :(

What would cause a ``s content to change? Generally that will only happen if you do it in code. — DBS, Jul 01 '22 at 10:32
You need an onchange event handler or an onclick event to run the code multiple times. As written the code runs once on startup. So check the docs of the form builder you are using, since your code does not show at all how or why the spans value would change. — Shilly, Jul 01 '22 at 10:33
it's a little bit trickier because input which paste value into this span is not normal numer input it's input with google api, and code calculating distance and then put it into the span you can see it here on the website: https://lechnar.pl/#kontakt Field "Lokalizacja budowy:" is input for location and under it - there is this span with value.. :( — Robert Stem, Jul 01 '22 at 11:16

score 1 · Answer 1 · answered Jul 01 '22 at 10:46

Im not sure about how the span value will change, so this example works with an input. The same idea could also be applied to a span tho.

<input onchange="theFunction()" data-pafe-form-builder-live-preview="lechnarlok" class="dystans" id="dystans" value="500"></input>

<script>

    function theFunction() {
      var odleglosc = parseFloat(document.getElementsByClassName("dystans")[0].value);
      var daleko = "za daleko";

      if (odleglosc > 200)
      {
              alert(daleko);
      }
    }

</script>

Here, onChange calls the function whenever the value in the input field changes.

it's a little bit trickier because input which paste value into this span is not normal numer input it's input with google api, and code calculating distance and then put it into the span you can see it here on the website: https://lechnar.pl/#kontakt Field "Lokalizacja budowy:" is input for location and under it - there is this span with value.. :( — Robert Stem, Jul 01 '22 at 11:16

Dawid Wekwejt · Answer 2 · 2022-07-01T13:46:18.040

Do You want to show alert after each change of the value? If yes, use event listener for input (not for span).

Update: Use MutationObserver for this case.

let span = document.getElementById('dystans');

function updateValue(value) {
  var daleko = "za daleko";
  if (parseFloat(value) > 200)
  {
     alert(daleko);
  }
}

// create a new instance of 'MutationObserver' named 'observer', 
// passing it a callback function
observer = new MutationObserver(function(mutationsList, observer) {
  let value = mutationsList.filter(x => x.target.id =='dystans')[0].target.innerHTML;
  updateValue(value);
});

// call 'observe' on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(span, {characterData: true, childList: true, attributes: true});

span.innerHTML = '3000';

<span data-pafe-form-builder-live-preview="lechnarlok" class="dystans" id="dystans">500</span>

Source: Detect changes in the DOM https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

it's a little bit trickier because input which paste value into this span is not normal numer input it's input with google api, and code calculating distance and then put it into the span you can see it here on the website: https://lechnar.pl/#kontakt Field "Lokalizacja budowy:" is input for location and under it - there is this span with value.. :( — Robert Stem, Jul 01 '22 at 11:16

.js alert(); when text in span change

2 Answers2