Why can't I print the score in text feild?

[newbiSoso]

I have the score defined as below to be printed on screen

    property int score: 0

    Text {
        id: score1
        text: "Score: "+ score
        anchors.bottom: grid.top
        font.pointSize: 20
        color: "red"
    }

and this list model to access and change square colors and text values in the grid

    property variant colorArray: ["cyan","red","white"]
ListModel {
        id: dummyModel

        ListElement {
            squareColor: "white"
            txt: 0
        }
ListElement {
            squareColor: "white"
            txt: 0
        }
ListElement {
            squareColor: "white"
            txt: 0
        }
        ListElement {
            squareColor: "white"
            txt: 0
        }
}

Timer { //to change square colors randomly
        id: alfa
        interval: 2000; running: true; repeat: true
        onTriggered: {
            for (var i=0;i<dummyModel.count;i++) {                dummyModel.setProperty(i,"squareColor",colorArray[Math.floor(Math.random()*3)])
            }
        }
    }

Timer { //to change score values in grid element randomly
        id: beta
        interval: 2000; running: true; repeat: true
        onTriggered: {
            for (var i=0;i<dummyModel.count;i++) {
               var sc = Math.floor(Math.random()*20) //random value from 0 to 20
                dummyModel.setProperty(i,"txt",sc) //score in each square
            }
        }
    }

and this grid contains colored squares, when a square is clicked and color is cyan score should be updated by the number in the text field tttt

Grid{
        id: grid
        rows: 2
        columns:2
        spacing: 5
        anchors.centerIn: parent
        Repeater{
            id: gridRect
            model: dummyModel     //from a list element model 
            Rectangle{
                id: rect
                width: 50
                height: width
                color: "cyan" 
                radius: 10
                Text {
                    id: tttt
                    anchors.centerIn: parent
                    color: "lightBlue"
                    text : txt
                }
MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        if (rect.color == "cyan")
                            score = score + tttt.text
                        else if (rect.color == "red")
                            score = score - tttt.text
                    }
                }
}

but score can't be updated when squares are clicked instead I get this in the Application output:

<Unknown File>: Can't assign to existing role 'txt' of different type [Number -> String]

why is that?

[Shrinidhi Upadhyaya]

Hi @newbiSoso ,

• Assign squareColor to property color in rect.

• You cannot add a string to int, so as dummyModel has a integer property (txt) just add that to score.

• Do these changes to your code:-

  Rectangle{
  id: rect

            width: 50
            height: width
            //####Assign squareColor
            color: squareColor
            radius: 10
            
            Text {
                id: tttt
                
                anchors.centerIn: parent
                color: "lightBlue"
                text : txt
            }
            
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    //####Cannot use tttt.text as its a string so use txt from dummyModel
                    if (squareColor === 'cyan')
                        score = score + txt
                    else if (squareColor === 'red')
                        score = score - txt
                }
            }
        }
  

Sample Output:-

Default:-

Cyan Color Rect Click:-

Other Color Rect Click:-

[Pradeep P N]

Hi @newbiSoso

• There are some modifications in your code which i tried.

Rectangle{
    id: rect

    width: 50
    height: width
    color: squareColor
    radius: 10
}

• In QML you cant compare color with string as its HEX value
  So make these changes.

MouseArea{
    anchors.fill: parent

    onClicked: {
        if (squareColor === "cyan")
            root.score = root.score + tttt.text;
        else if (squareColor === "red")
            root.score = root.score - tttt.text;
    }
}

• You are doing root.score + tttt.text which will be considered as string concatenation so your score will be something like below image.
  

• I dint get error as you mentioned. but please avoid using string concatenation for int +/- functionality

• Please use the value from model txt from your code to avoid string concatenation

All the best.