Need Code Review

[JoeSeaver]

I am trying a simple app to learn the environment and how things work.  I am trying to make a simple interface for a pitch counter.  Used by a baseball coach, after each pitch the user clicks B for a pitch that is called a ball, S for a pitch that is called a strike.  The app needs to do three things:

1. Log the pitch type and increment a running total for that type

2. Increment the total pitches thrown

3. Display the percentage of each type

I have this working in HTML and JavaScript - I am having trouble making this work in the Ionic environment

The display has three rows:

Row 1: The counts for pitched balls and strikes

Row 2: the percentage for each pitch and the running total

Row 3: the buttons for Ball and Strike

I have been able to create the buttons, and pressing the ball or strike button properly increments the variables for each and the total.  I am able to update Row 1 with the new values

No matter what I do, I cannot update Row 2 (NOTE: I swapped the rows to see if it was positional and with the Rows swapped I was able to update Row 2 and not Row 1 - the percentages and total count).

I know the color is right because they get painted when the app starts.

The problem I have is that I cannot get the variable TotDisp to re-paint with the new values in my code below. 

If anyone wants to review my code and help me see if I have a syntax error I would be very grateful.  The console tells me that the totals are correct but I can only update Ball and Strike, TotDisp will not update....

Very Frustrated....

app\index.js

import document from "document";

var BallCount = 0;
var StrikeCount = 0;
var TotalCount = 0;

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

var Strike = document.getElementById("StrikeCnt");
Strike.x = 175;
Strike.y = 60;

var BPct = document.getElementById("BallPct");
BPct.x = 10;
BPct.y = 150;

var SPct = document.getElementById("StrikePct");
SPct.x = 150;
SPct.y = 150;

var TotDisp = document.getElementById("TotCnt");
TotDisp.x = 250;
TotDisp.y = 150;

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

mybuttonB.onactivate = function(evt) {
 
  BallCount=BallCount+1;
  TotalCount=TotalCount+1;
 
  TotDisp.innertext = " "+TotalCount;
  TotDisp.style.display = "inline";
 
  Ball.innerText = "B: "+BallCount;
  Ball.style.display = "inline";
  console.log("Ball " +BallCount);

  console.log("Total "+TotalCount);
} 

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

mybuttonS.onactivate = function(evt) {
  StrikeCount = StrikeCount+1;
  TotalCount=TotalCount+1;
 
  Strike.innerText = "S: "+StrikeCount;
  Strike.style.display = "inline";
 
  TotDisp.innertext = " "+TotalCount;
  TotDisp.style.display = "inline"; 
 
  console.log("Strike "+StrikeCount);

  console.log("Total "+TotalCount);
 
}

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" fill="fb-indigo" font-size="75" width="500">B:    </text>
  <text id="StrikeCnt" font-family="System-Regular" fill="fb-indigo" font-size="75" width="500">S:    </text>
 
  <text id="BallPct"   font-family="System-Regular" fill="fb-purple" font-size="60" width="130">0.0</text>
  <text id="StrikePct" font-family="System-Regular" fill="fb-purple" font-size="60" width="130">0.0</text>
  <text id="TotCnt"    font-family="System-Regular" fill="fb-cyan"   font-size="60" width="130">000</text>
 
</svg>

[JonFitbit · Accepted solution]

It looks like you've got innertext, instead of innerText  (it's case sensitive).

I'd recommend using Github to host your project source code, then you can easily provide nicely formatted code when you need assistance.

[JoeSeaver]

Awesome - syntax is so critical....

Will check GitHub....

[SunsetRunner]

Yes, i also tried your Code and found the same error as Jon.

Two time you wrote innertext instead of innerText.

But i have a problem with your app, same i had with mine.

If you touch on another place on the screen (no button), no button will work after that moment.

@Jondo you have any idea?

To prevent such errors, would like to have a Intelligent code completion . Is something like that planned?

[Anthoang]

Nice little app you got here.   Now if you can make an app that can steal baseball signs, you've got something that can go viral.