Hide label on buttonclick nativescript - nativescript

Question

I am trying to make a simple text clicking game to gain a better understanding of Nativescript.
I first have a label with intro text and a question. Then I have 3 buttons to give an answer to the question.
Once the user clicks one of the buttons I want the first label and the 3 buttons to disappear and the next label to appear.
Here is my code:
This is my home-page.js
var frameModule = require("tns-core-modules/ui/frame");
var HomeViewModel = require("./home-view-model");
var homeViewModel = new HomeViewModel();
exports.loaded = function (args) {
var page = args.object;
page.actionBarHidden = true;
page.bindingContext = homeViewModel;
};
exports.SwordButton = function () {
Display1 = false;
Display2 = true;
console.log("The Sword button was pressed");
};
exports.BowButton = function () {
Display1 = false;
Display2 = true;
console.log("The Bow button was pressed");
};
exports.ShieldButton = function () {
Display1 = false;
Display2 = true;
console.log("The Shield button was pressed");
};
This is my home-page.xml:
<ActionBar title="Home" class="action-bar">
</ActionBar>
<StackLayout class="home-panel">
<Label textWrap="true" text="Text game" class="h2 description-label" />
<Label id="text1" textWrap="true" visibility="{{ Display1 ? 'visible' : 'collapsed' }}"
text="It's a zombie apocalypse! You are looting a store when suddenly a zombie bursts in through the door. You frantically search for a weapon. You find a box containing a sword, a bow and a shield. Which one do you choose?"
class="h2 description-label" />
<Label id="text2" textWrap="true" visibility="{{ Display2 ? 'visible' : 'collapsed' }}" text="You chose poorly." />
<Button text="Sword" tap="SwordButton" />
<Button text="Bow" tap="BowButton" />
<Button text="Shield" tap="ShieldButton" />
</StackLayout>
Here is my home-view-model.js:
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var weapon;
var viewModel = observableModule.fromObject({
Display1: true,
Display2: false,
textFieldValue: "",
});
return viewModel;
}
module.exports = HomeViewModel;
I hope I have given enough information for you to help, if not please let me know.
Hope you can help.

Answer 1

I fixed it. Turns out I forgot to set the new value of the Display variables.
This is what my new SwordButton function looks like.
exports.SwordButton = function () {
Display1 = false;
Display2 = true;
console.log("The Sword button was pressed");
homeViewModel.set("Display1", Display1);
homeViewModel.set("Display2", Display2);
};
I did the same thing for the BowButton and the ShieldButton functions.