Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Javascript access text element on another file

Javascript access text element on another file

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 330 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    dev_x
    wrote on last edited by
    #1

    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ïO 1 Reply Last reply
    0
    • D 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ïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by
      #2

      @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...")
          }
      }
      
      
      1 Reply Last reply
      0
      • D Offline
        D Offline
        dev_x
        wrote on last edited by
        #3

        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ïO 1 Reply Last reply
        0
        • D 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ïO Offline
          ODБOïO Offline
          ODБOï
          wrote on last edited by ODБOï
          #4

          @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

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved