Javascript access text element on another file

[dev_x]

hi everyone, I've been trying to find the solution for this and testing on and on to find a solution but without success.

I have a app with two qml files/pages and one JS file.
When clicking a button I want to trigger a countdown timer function (on JS file). This function should update the text on a element available in one of the qml files.

I don't know if this is the most correct way of doing it, feel free to guide my solution, but how can I change the text every second using the JS function?

Thank you

[ODБOï]

@dev_x hi

This is one solution, but the timer is not in the js file, i use the QML Timer type

import "Utils.js" as Utils

ApplicationWindow {
    width: 800
    height: 600
    visible: true

    Timer{
        id:timer
        interval: 1000
        repeat: true
        onTriggered: p2.txt.text = Utils.setText(textSource._txt)
        running: true
    }

    Page1{
        id: textSource
    }

    Page2{
        id: p2
    }
}


-----
// the js file 
function setText(t) {
    return t;
}


------
//Page1.qml
Item{
    property string  _txt : "some text"
}


------
//Page2.qml.
Item {
    property alias txt: display
    Text {
        id: display
        text: qsTr("text...")
    }
}

[dev_x]

Hi @LeLev

Thank you for your help!

I'm trying to shape your code to my case, but I'm having some questions/issues:

The timer is automatically triggered and goes on a infinite loop. This can be my fault because I'm missing some knowledge with the Timer element. What triggers it, and how can I control the repeats.

I also notice that I can have a 'global' property string _txt variable that is supposed to be available across files, and in this case it would be available on the JS file.

My goal with the JS function is to get a argument about the number of times the code inside it is going to run (loop) and inside that loop it will create a countdown. Everysecond the countdown updates de value (seconds) text on the other page.

[ODБOï]

@dev_x said in Javascript access text element on another file:

What triggers it, and how can I control the repeats.

see the 2 properties in my example

running: true
repeat: true

@dev_x said in Javascript access text element on another file:

Everysecond the countdown updates de value (seconds) text on the other page.

create a property int seconds variable in Page2 and increment it every second

onTriggered: p2.seconds ++

please take a look at Timer Documentation https://doc.qt.io/qt-5/qml-qtqml-timer.html