On Mouse area not able to trigger java script function in qml

Question

I have two function update() and fun(). I have a MouseArea in a Rectangle, when I trigger update() on onEntered it is working, but when I use fun() for same on onEntered it is throwing the following error:

ReferenceError: fun is not defined

Here is my code:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480

    Rectangle {
        width: 100
        height: 100
        color: "orange"

        function update() {
            console.log(x + " x " + y)
            idText.text = Math.round(x) + " x " + Math.round(y)
        }

        function fun() {
            console.log("check is called")
        }

        Text {
            id: idText
            text: qsTr("text")
            anchors.centerIn: parent
        }

        Component.onCompleted: update()
        onXChanged: update()

        MouseArea {
            anchors.fill: parent
            drag.target: parent
            onEntered: fun()
            //onEntered: update()
        }
    }
}

please show your code as text. Try add id to Rectangle: Rectangle{ id: rectangle // ... and then use rectangle.fun() — eyllanesc

iam_peter iam_peter · Accepted Answer · 2021-02-26T09:19:27

As eyllanesc already mentioned be as specific as possible. Always use id for calling functions or referencing properties especially if outside of the scope of the item to which the property/function belongs.

That said the onEntered signal won't trigger in your example, because the MouseArea is missing the hoverEnabled: true.

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480

    Rectangle {
        id: myRectangle
        width: 100
        height: 100
        color: "orange"

        function update() {
            console.log(myRectangle.x + " x " + myRectangle.y)
            myText.text = Math.round(myRectangle.x) + " x " + Math.round(myRectangle.y)
        }

        function fun() {
            console.log("check is called")
        }

        Text {
            id: myText
            text: qsTr("text")
            anchors.centerIn: parent
        }

        Component.onCompleted: myRectangle.update()
        onXChanged: myRectangle.update()

        MouseArea {
            hoverEnabled: true
            anchors.fill: parent
            drag.target: parent
            onEntered: myRectangle.fun()
        }
    }
}

You could also use bindings instead of calling a function and assigning the string to text. In your example you won't call the function if only y changes.

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480

    Rectangle {
        id: myRectangle
        width: 100
        height: 100
        color: "orange"

        function fun() {
            console.log("check is called")
        }

        Text {
            id: myText
            text: Math.round(myRectangle.x) + " x " + Math.round(myRectangle.y)
            anchors.centerIn: parent
        }

        MouseArea {
            hoverEnabled: true
            anchors.fill: parent
            drag.target: parent
            onEntered: myRectangle.fun()
        }
    }
}

On Mouse area not able to trigger java script function in qml

1 Answers