Change component's child propery from javascript file

[behruz montazeri]

I have this error :

qrc:/ColorFunc.js:3: ReferenceError: rectId is not defined

My qml file is Rect50.qml :

import "ColorFunc.js" as MyColor
............

onPressed: MyColor.changeColor(colorM)

My extrnal javascript file ColorFunc.js :

function changeColor(param1) {

        rectId.color = param1;
}

[rweickelt]

Hard to see what is wrong in your code. If you could post a minimal, but still complete example, then it is more likely that you will get an answer.

[behruz montazeri]

@rweickelt

Component{
            id:mComponent
           Item {
                width:parent.width
                height: rectId.height
                Rectangle{
                    id:rectId
                    width: parent.width

[Diracsbracket]

@behruz-montazeri
Is that supposed to be complete code? Minimal effort from your side will result in minimal efforts from others trying to help.
Cheers.

[behruz montazeri]

@Diracsbracket

The complete qml file :

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Window 2.2
import "ColorFunc.js" as MyColor

Item {
    visible: true
    width: 640
    height: 480



    ListModel{
        id:mModel

        ListElement{
            name:"chery"
            number:"1850"
            colorM:"khaki"
            msource:"qrc:/chery.png"
        }
        ListElement{
            name:"banana"
            number:"15829"
            colorM:"yellowgreen"
            msource:"qrc:/banana.png"
        }
        ListElement{
            name:"grep"
            number:"1500"
            colorM:"lightblue"
            msource:"qrc:/grep.png"

        }
        ListElement{
            name:"chery"
            number:"1850"
            colorM:"khaki"
            msource:"qrc:/chery.png"
        }
        ListElement{
            name:"banana"
            number:"15829"
            colorM:"yellowgreen"
            msource:"qrc:/banana.png"
        }
        ListElement{
            name:"grep"
            number:"1500"
            colorM:"lightblue"
            msource:"qrc:/grep.png"

        }

    }
    ListView{
        anchors.fill: parent
        model: mModel
        delegate: mComponent
        highlight: Rectangle{
            width: parent.width
            color: "red"
        }



        Component{
            id:mComponent
           Item {
                width:parent.width
                height: rectId.height
                Rectangle{
                    id:rectId
                    width: parent.width
                    height: 80
                    border.width: 6
                    border.color: "black"

                    property color mColor: "firebrick"

                    Text {
 
                        anchors.verticalCenter: parent.verticalCenter
                        x:30

                        id: txt1
                        text: name
                        font.pixelSize: 25
                    }
                    Image {
                        anchors.centerIn: parent
                        width:70
                        height: width
                        id: mPic
                        source: msource
                    }
                    ItemDelegate{
                        anchors.fill: parent
                        onClicked: console.log(name)
                        onPressed: MyColor.changeColor(colorM)

                    }
                }
                property alias rect5: rectId.color
            }
        }
    }

}

[Diracsbracket]

Hi @behruz-montazeri
With the full code, that was so much easier to understand and to test ...

Change the following:

onPressed: MyColor.changeColor(rectId, colorM)

and

function changeColor(rectId, param1) {
    rectId.color = param1;
}

The reason your code does not work is that the ID you define inside a Component's Item has no meaning in the context after it is created.

[behruz montazeri]

@Diracsbracket
Thanks it works. I want to make a same game ,when player click on each list element check with last click
and if it's same fruit as current click do something. Do you know what's the name of this kinda game ?
is there any example to learn from ?

[Diracsbracket]

@behruz-montazeri
You mean a Matching Game like this one:
https://www.youtube.com/watch?v=QsLG-1CbfTQ
I think you are well on your way to succeed.

However, the use of an extra ItemDelegate in your Component definition is somewhat redundant. You could it improve it by doing e.g.:

            Component{
                id:mComponent

               MouseArea {
                    id: mouseArea
                    width:parent.width
                    height: rectId.height

                    Rectangle{
                        id:rectId
                        width: parent.width
                        height: 80
                        border.width: 6
                        border.color: "black"

                        color: mouseArea.containsPress ? colorM : "firebrick"

                        Text {

                            anchors.verticalCenter: parent.verticalCenter
                            x:30

                            id: txt1
                            text: name
                            font.pixelSize: 25
                        }
                        Image {
                            anchors.centerIn: parent
                            width:70
                            height: width
                            id: mPic
                            source: msource
                        }
                    }
                }
            }

[behruz montazeri]

How to make a variable static inside java script each time i click lastColor get the same value.
How can i prevent that ?

function changeColor(rectId, param1) {

    var   lastColor ="#ffffff"
    console.log("last Color: "+lastColor)
    console.log("ColorM: "+param1)

    if(lastColor === param1 ){
        console.log("Second");
         rectId.color = param1
        lastColor = "#ffffff";
        return
    }
    if(lastColor == "#ffffff"){
        rectId.color = param1
        lastColor = param1;

        console.log("First");

    }

    else console.log(lastColor)

}

[Diracsbracket]

@behruz-montazeri
Do a Google search for that: JavaScript + static local variable.
e.g. https://stackoverflow.com/questions/1535631/static-variables-in-javascript

[behruz montazeri]

@Diracsbracket
I did one. I changed my function. But here's another problem it work for only one qml file and if we call it from another qml file counter is Zero.

function changeColor(rectId, param1) {
    if( typeof changeColor.counter == 'undefined' ) {
        changeColor.counter  = 0;
    }
    changeColor.counter++
}

[Diracsbracket]

@behruz-montazeri
Then use a global JS variable.

[behruz montazeri]

@Diracsbracket
Yes that's the case.

 property int counter: 0

[Diracsbracket]

@behruz-montazeri
that's not a JS variable. That's a QML object property.

[behruz montazeri]

@Diracsbracket
Where can i declare a javascript global variable ?

[Diracsbracket]

@behruz-montazeri said in Change component's child propery from javascript file:

@Diracsbracket
Where can i declare a javascript global variable ?

In a javascript file. Otherwise create a property at a top-level QML object, e.g. your main window, which exists for the duration of your app.

[behruz montazeri]

@Diracsbracket
I guess creating property make seance in my situation. making a Javascript file variable doesn't keep track of increasing despite the several calls from different QML files.

[Diracsbracket]

@behruz-montazeri said in Change component's child propery from javascript file:

I guess creating property make seance in my situation.

That's usually the best way indeed.

making a Javascript file variable doesn't keep track of increasing despite the several calls from different QML files.

You can do it, if you really need it:
http://doc.qt.io/qt-5/qtqml-javascript-resources.html#shared-javascript-resources-libraries

[behruz montazeri]

@Diracsbracket

I have a list view i want to change the color of all rectangle inside of component with Javascript.

    ListView{
        id:fruitList
        anchors.fill: parent
        model: mModel
        delegate: mComponent
        highlight: Rectangle{
            width: parent.width
            color: "red"
        }
        Component{
            id:mComponent
           Item {
                width:parent.width
                height: rectId.height
                Rectangle{
                    id:rectId
                    width: parent.width
                    height: 80
                    border.width: 6
                    border.color: "black"

                    Image {
                        anchors.centerIn: parent
                        width:70
                        height: width
                        id: mPic
                        source: msource
                    }
                    ItemDelegate{
                        anchors.fill: parent
                        onClicked: {
                            MyColor.changeColor(rectId,colorM)
                            mText =  MyColor.textReturn("page1")
                       } 

                    }
                }

            }
        }

in Javascript :

function resetList()
{
    for (var entry = 0; entry < fruitList.count; ++entry) {
        
         // rectId.color = "white'
    }
}

[Diracsbracket]

@behruz-montazeri
I think this thread is closed. Thanks.