Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Javascript access text element on another file



  • 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



  • @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...")
        }
    }
    
    


  • 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.



  • @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


Log in to reply