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



  • 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?



  • 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:-

    0_1560485712589_708381a1-7811-42f4-8bbe-1135d2378508-image.png

    Cyan Color Rect Click:-

    0_1560485764117_2d8c5c09-98d9-4ad4-abe0-c86b16ab5973-image.png

    Other Color Rect Click:-

    0_1560485805291_ea1a052b-ab0d-4811-b07f-0209adc329b8-image.png



  • 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.
      0_1560485864421_29ba1347-8ef1-45ac-afce-16ab8fe2882e-image.png

    • 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.