Dynamic number in condition

Help and Support
1

Hi all,
i would like to trigger only when the first selected element number is < 2% of a 2nd element number on the same page as the first one.
Is it possible?

I have tried to play with the actual conditions options but none seems to works for my usecase…
Any ideas please?

Thanks

2

Hello @jackijack, this is currently possible using JavaScript.

CSS selectors and XPath expressions are used to identify and select elements from a page. Similarly, JavaScript expressions can be used to select elements. But before an element is selected, its content can be modified too.

Here is a pseudocode using jQuery’s $ object:

// step 1: read values from 2 elements
let el1Value = parseInt($('#el1').text());
let el2Value = parseInt($('#el2').text());
// step 2: compare the values
let ratio = el1Value/el2Value;
// step 3: update el1 with text content that can be used to trigger change alert
$('#el1').text(ratio > .02 ? 'high' : 'low');
// step 4: return the element as the selected element
$('#el1')

Note that the “step 4” is not needed because “step 3” updates and returns the same element. But I wrote it for clarify.

Let me know if you have any questions or need any help. Cheers!

3

Thanks Ajit.
But where do you add this javascript code in Distill ?
Where do you add a condition based on that dynamic selected element in Disill?
Thanks

4

@jackijack - the shared script is a sample JavaScript that will have to customized for your use case. Do you understand basic JavaScript? If you don’t, don’t worry. You can share the URL with screenshots and I can help update it and share a JSON that you can easily import in your Watchlist.

5

Thanks Ajit well I can just vaguely understand it. Not sure but maybe I will to be able to custom it to my situation.
But what I don’t understand is where do you add the JavaScript code on Distill :thinking:
I am using the free cloud version for now.
Thanks

6

You can change type of an existing selector to JavaScript as shown below. It is a screenshot using extension’s Visual Selector:

image
image725×683 38.6 KB

Note that JS is used to change the value being monitored.

7

Thanks Ajit!
So I managed to select the 2 elements on the page with JavaScript.

image
image2708×900 234 KB

But where do i type the JS code?

Thanks again

// step 1: read values from 2 elements
let el1Value = parseInt($('#el1').text());
let el2Value = parseInt($('#el2').text());
// step 2: compare the values
let ratio = el1Value/el2Value;
// step 3: update el1 with text content that can be used to trigger change alert
$('#el1').text(ratio > .02 ? 'high' : 'low');
// step 4: return the element as the selected element
$('#el1')
8

@ajitk :slight_smile: have you seen that message?

9

Sorry, missed the last message. Checkout the screenshot in Dynamic number in condition - #6 by ajitk. Once you select the “JavaScript” option, you can edit the JS extension in the input box.

Note that you will need to edit the script shared earlier to replace the selectors with the ones that works in the page you are trying to monitor.