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 class="h1"> hmm...</h1>
<div class="changing_content">Im changing!</div>
<button class="btn">Click me!</button>
</body>
</html>>Solution :
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 class="h1"> hmm...</h1>
<div class="changing_content">Im changing!</div>
<button class="btn">Click me!</button>