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

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()
}
}
}

Answer 1

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()
}
}
}