Able to get buttons on Ionic, but no text

[JoeSeaver]

I am able to get some buttons on my Ionic following the documentation.  However, I cannot get text to paint inside the buttons....  Any ideas?

Here is the code I am using:

Resources\index.gui:

<svg>

  <use id="mybutton2" href="#square-button" y="5" fill="fb-red">
    <set href="#text" attributeName="text-buffer" to="Click Me!" />
  </use>
 
    <use id="mybutton3" href="#square-button" y="75" fill="coral">
    <set href="#text"  attributeName="text-buffer" to="Steps" />
    <set href="#image" attributeName="href" to="steps.png" />
    <set href="#image" attributeName="display" to="inline" />
  </use>
 
</svg>

app/index.js:

import document from "document";

let mybutton = document.getElementById("mybutton2");
mybutton.onactivate = function(evt) {
  console.log("CLICKED!");
}

The buttons are displayed as empty rectangles with no text inside....

Any help greatly appreciated - coming from a Borland Delphi / Oracle PLSQL background trying to write some basic apps to get my feet wet again...

[SunsetRunner]

Here is the code of my square button: the only difference is that I have given a width.

<use id="scoreA" href="#square-button" x="220" y="30" width="100" fill="fb-white">
<set href="#text" attributeName="text-buffer" to="0" />
</use>

Also try to remove "mybutton3" for a first try.

[JonFitbit]

I think you need to apply some default styling to the text.

Try:

text {
  font-family: System-Regular;
}

[JoeSeaver]

Tried both solutions - maybe I did it wrong?

Trying to create two button and two text areas - the buttons and images show up, but NO TEXT shows up

Resources\index.gui:

<svg>

  <use id="mybutton2" href="#square-button" width = "100" y="180" fill="fb-red">
    <set href="#text" attributeName="text-buffer" to="Ball" />
    <set href="#image" attributeName="href" to="ball.png" />
    <set href="#image" attributeName="display" to="inline" />
  </use>
 
    <use id="mybutton3" href="#square-button" width = "100" x = "110" y="180" fill="coral">
    <set href="#text"  attributeName="text-buffer" to="Strike" />
    <set href="#image" attributeName="href" to="strike.png" />
    <set href="#image" attributeName="display" to="inline" />
  </use>
 
  <text id="BallCnt"  font-family="System-Regular">B       </text>
  <text id="StrikeCnt" font-family="System-Regular">S       </text>
   
</svg>

In app\index.js I put in code to code the button presses and the console shows me that the button presses are being counted properly with each button press, but I cannot get any display for buttons or text:

app\index.js

import document from "document";

var BallCount = 0;
var StrikeCount = 0;

var Ball = document.getElementById("BallCnt");
Ball.x = 10;
Ball.y = 10;

var Strike = document.getElementById("StrikeCnt");
Strike.x = 10;
Strike.y = 70;

let mybutton = document.getElementById("mybutton2");
mybutton.onactivate = function(evt) {
  BallCount=BallCount+1;
  Ball.innerText = "B: "+BallCount;
  Ball.style.display = "inline";
  console.log("Ball " +BallCount);
} 

let mybutton2 = document.getElementById("mybutton3");

mybutton2.onactivate = function(evt) {
  StrikeCount = StrikeCount+1;
  Strike.innerText = "B: "+StrikeCount;
  Strike.style.display = "inline";
  console.log("Strike "+StrikeCount);

}

Thanks for the two suggestions, Can't seem to make it work...  Something I must be missing to get text to display....

[JoeSeaver · Accepted solution]

The color was apparently defaulted to black - I changed the color and it is appearing:

  <text id="BallCnt"  font-family="System-Regular" fill="blue">B       </text>
  <text id="StrikeCnt" font-family="System-Regular" fill="blue">S       </text>

[JonFitbit]

Thanks for letting me know

[Fit2030]

deleted post to create new question.