Change font size based on length of text inside an array-CodePudding

So, I was playing with my JS and I did a "random" phrase generator which replaces the text inside the div on each click of a button. But I want to change the font size of the text based on the length of the replaced text, but it doesn't work the way I intended. I'm new to JS and want to understand why my check function works only once and then get stuck. I'm definitely missing something important, but what?

let texts = [
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eius enim ut minus! Officia repellendus magni labore nulla repellat libero!",
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, velit.",
  "Lorem ipsum dolor sit amet consectetur."
]


const changeText = document.querySelector('.changing_content')
const btn = document.querySelector('.btn')

function getRandomElement(arr) {
  let randIndex = Math.floor(Math.random() * arr.length);
  return arr[randIndex];
}

function checkLength(e) {

  e.map(text => {
    if (text.length >= 60) {
      changeText.style.fontSize = "24px"
      changeText.style.color = "blue"
    } else if (text.length >= 144) {
      changeText.style.fontSize = "34px"
      changeText.style.color = "lightgreen"
    } else {
      changeText.style.fontSize = "14px"
      changeText.style.color = "black"
    }
  })
}


btn.addEventListener('click', function() {
  let randomElement = getRandomElement(texts)
  changeText.innerHTML = randomElement
  checkLength(texts);
})

.changing_content {
  font-size: 16px;
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="prob.js" defer></script>
</head>

<body>
  <h1 > hmm...</h1>
  <div >Im changing!</div>
  <button >Click me!</button>
</body>

</html>

CodePudding user response：

First problem:

if (text.length >= 60) {
  // A
} else if (text.length >= 144) {
  // B
} else {
  // C
}

... does the following:

if 60 or above: A
if 144 or above: still A (it's greater than 60, right?) => it never goes to else clause
if below 60: C

You might want to switch the first two clauses:

if (text.length >= 144) {
  // B
} else if (text.length >= 60) {
  // A
} else {
  // C
}

or you might want to use a switch:

switch(true) {
  case text.length >= 144:
    // B
    break;
  case text.length >= 60:
    // A
     break;
  default: 
    // C
}

Second problem

every time you're changing the text, you're running checkLength in a loop, on all the texts. On each iteration, the color gets changed according to current element in the array, overriding any change performed by the previous array items. You'll always end up with the color (and font size) of the last item in the array.

What you probably want is to only get the color (and font-size) of the current element (the randomElement).

Like this:

let texts = [
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eius enim ut minus! Officia repellendus magni labore nulla repellat libero!",
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, velit.",
  "Lorem ipsum dolor sit amet consectetur."
]

const changeText = document.querySelector('.changing_content')
const btn = document.querySelector('.btn')

function getRandomElement(arr) {
  let randIndex = Math.floor(Math.random() * arr.length);
  return arr[randIndex];
}

function checkLength(text) {
    if (text.length >= 144) {
      changeText.style.fontSize = "24px"
      changeText.style.color = "blue"
    } else if (text.length >= 60) {
      changeText.style.fontSize = "34px"
      changeText.style.color = "lightgreen"
    } else {
      changeText.style.fontSize = "14px"
      changeText.style.color = "black"
    }
}


btn.addEventListener('click', function() {
  let randomElement = getRandomElement(texts)
  changeText.innerHTML = randomElement
  checkLength(randomElement);
})

.changing_content {
  font-size: 16px;
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="prob.js" defer></script>
</head>

<body>
  <h1 > hmm...</h1>
  <div >Im changing!</div>
  <button >Click me!</button>
</body>

</html>

CodePudding user response：

A couple issues:

You need to pass randomElement to your checkLength function since that is the string that you are wanting to check the length of.

Also, you will want to use an AND statement in your FIRST if statement to get everything between 10 and 20.

Also, you don't have any strings that are shorter.

And you don't need the map loop in your checkLength function since you are only now passing the actual random string.

let texts = [
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eius enim ut minus! Officia repellendus magni labore nulla repellat libero!",
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, velit.",
  "Lorem ipsum dolor sit amet consectetur.",
  "characters"
]


const changeText = document.querySelector('.changing_content')
const btn = document.querySelector('.btn')

function getRandomElement(arr) {
  let randIndex = Math.floor(Math.random() * arr.length);
  return arr[randIndex];
}

function checkLength(text) {

    if (text.length >= 10 && text.length < 20) {
      changeText.style.fontSize = "24px"
      changeText.style.color = "blue"
    } else if (text.length >= 20) {
      changeText.style.fontSize = "34px"
      changeText.style.color = "lightgreen"
    } else {
      changeText.style.fontSize = "14px"
      changeText.style.color = "black"
    }
}


btn.addEventListener('click', function() {
  let randomElement = getRandomElement(texts)
  changeText.innerHTML = randomElement
  checkLength(randomElement);
})

.changing_content {
  font-size: 16px;
  color: red;
}

  <h1 > hmm...</h1>
  <div >Im changing!</div>
  <button >Click me!</button>