Basic js: constantly update w/o forever looping?

trying to clone a majority of the google font website, and I am currently stuck on how to update the tile text to the default text, when the input / array is empty.

I can’t use a while loop or it crashes my browser, and it’s not an event so I don’t think I can a listener either.

The very last block of this code is where the challenge lies, any help/tips/suggestions would be greatly appreciated!

Here is the pen I created for this question: my pen
–note: until I create a clever refactor of my keycodes code, only ‘a’ ‘b’ ‘c’ and ‘d’ work within the ‘type something’ input field

var tString = [];
var iTrigger0 = document.querySelector(".iTrigger0");
var fonText = document.getElementsByClassName("fonText");
iTrigger0.addEventListener("keydown", function(e) {
  console.log("hello" + e.keyCode);
  // REFACTOR THIS!!!
  if(e.keyCode == 65){
    tString.push('a');
  } else if(e.keyCode == 66){
    tString.push('b');
  } else if(e.keyCode == 67){
    tString.push('c');
  } else if(e.keyCode == 68){
    tString.push('d');
  } else if(e.keyCode == 8) {
    tString.pop();
  }
  for(var i = 0; i < fonText.length; i++){
    fonText[i].innerHTML = tString.join('');
  }
});

if(tString.length < 1){
  console.log("empty tString");
  for(var i = 0; i < fonText.length; i++){
  fonText[i].innerHTML = "should should show when nothing is typed / nothing in the input field";
  }
}

It’s an input, so on “change”, for each font card on the page, set the text to what it is in the input. If you want it to show the default text when the input is empty, you set whatever the default is when the value is an empty string.

1 Like

thought outside the box and this kinda works as a solution, but not really

document.querySelector("body").onmousedown = function() {mouseDown()};

function mouseDown() {
  if(tString.length < 1){
    console.log("empty tString");
    for(var i = 0; i < fonText.length; i++){
    fonText[i].innerHTML = "should should show when nothing is typed / nothing in the input field";
    }
  }  
}

That is a much easier and more sensible approach. Thank you.

1 Like

Just to expand.on my answer: when the page opens, the text for the card should be default (also, adding a data attribute, eg data-defaulttext= to each card would help). When the input is set, it has events fired on each change to it, and that event holds the current value. So it will either have a value of a nonempty string (which is rendered as the text for each card), or an empty string (render the default).

There definitely should be no need for the keycode check at all: the text in the input is used to test fonts, so any possible character should be allowed. You should just render whatever the value in the input is directly.

1 Like

I DID IT!!!

It took me all day and I felt like an idiot for the entirety of the struggle but I did it, and it’s pretty darn dry if I do say so myself.

*-- .onchange only takes effect when the input field looses focus / click outside the field

So, I instead used .oninput which takes effect immediately

However, that alone would not change the font card text if the input was empty.

I somehow managed to get it to work with an if statement inside a foreach statement…

which I tried multiple times before but would not work – which I think was do to my use of an event listener.

You were instrumental in my success, so thanks again.

var iTrigger = document.querySelector("#iTrigger");
var fonText = document.querySelectorAll(".fonText");
var defaultT = fonText[0].getAttribute("data-defaulttext"); 
var iValue;

fonText.forEach(fontCard => {
  fontCard.innerHTML = defaultT;
});

iTrigger.oninput = function() {
  iValue = document.querySelector('#iTrigger').value
  fonText.forEach(fontCard => {
    fontCard.innerHTML = iValue;
    if(fontCard.innerHTML == ""){
      fontCard.innerHTML = defaultT;
    }
  });
}

updated pen

1 Like