Screen Change

[Acrux]

Sure this is something simple as I believe I've narrowed it down to something in the index.view

Working on testing screen changes with icons which works to a point... 

The Calorie Screen will show, and allow me to go back to Main Screen, the Heart Screen will show, however not allow me back to the Main Screen. If I flip the order of the two in the SVG then it flips and Heart works, but Calorie will not. 

index.js

const calorieLabel = document.getElementById("calorieLabel");
const heartLabel = document.getElementById("heartLabel");

//Screen Change Functionality

const mainScreen = document.getElementById("mainScreen");
const calorieData = document.getElementById("calorieData");
const heartData = document.getElementById("heartData");

const calorieIcon = document.getElementById("calorieIcon");
const heartIcon = document.getElementById("heartIcon");
const trgt = document.getElementById("trgt");

function showMain() {
  console.log("Show Main Screen");
  mainScreen.style.display = "inline";
  calorieData.style.display = "none";
  heartData.style.display = "none";
}

function showCalorieScreen() {
  console.log("Show Calorie Screen");
  mainScreen.style.display = "none";
  calorieData.style.display = "inline"; 
}

function showHeartScreen() {
  console.log("Show Heart Screen");
  mainScreen.style.display = "none";
  heartData.style.display = "inline"; 
}


calorieIcon.onclick = function() {
  showCalorieScreen();
}

heartIcon.onclick = function() {
  showHeartScreen();
}

trgt.onclick = function () {
  showMain();
}

index.view

<svg>  
  <svg id="mainScreen">
    <image id="calorieIcon" pointer-events="all" />
    <image id="heartIcon" pointer-events="all" />
  </svg>
  <svg id="calorieData" display="none">
    <image id="trgt" pointer-events="all" />
    <text id="calorieLabel" />    
  </svg> 
  <svg id="heartData" display="none">
    <image id="trgt" pointer-events="all" />
    <text id="heartLabel" />    
  </svg>  
</svg>

style.css

/* global */
#trgt {
  href:"img/btn.png";
  width: 100%;
  height: 100%;
  fill: white;
}

/*heart style */
#heartIcon {
  href:"img/heart_rate_36px.png";
  width: 36;
  height: 36;
  x: 100;
  y: 100;
  fill: white;
}

#heartLabel{
  text-anchor:end;
  text-length: 36;
  fill: white;
  font-family: Colfax-Bold;
  font-size: 25;
  x: 280;
  y: 88;
}

/*calories style */
#calorieLabel{
  text-anchor:end;
  text-length: 36;
  fill: white;
  font-family: Colfax-Bold;
  font-size: 25;
  x: 280;
  y: 88;
}

#calorieIcon {
  href: "img/calories_36px.png";
  width: 36;
  height: 36;
  fill: white;
  x: 185; 
  y: 162; 
}

Thoughts?

Thanks.

[Gondwana · Accepted solution]

I suspect that

   document.getElementById("trgt")

will only get the first instance that uses that id.

In theory, ids should be unique. There are ways around that, but one must take care.

[Acrux]

Well that worked, thought I had tried that but maybe I didn't all the way through..

Not the biggest fan of this method so may play around and work on some other ways to change things to be more dynamic.

Thanks!