I'm a newbie to JavaScript and I'm trying to shorten my code by declaring a function for code that I use it repeatedly within another function, but that new inner function doesn't work.
This program is intended to increase the number by 1 upon each press of the button, and then output to the HTML based on the "FizzBuzz" rules: Numbers divisible by 3 are replaced with "Fizz", numbers divisible by 5 are replaced with "Buzz", and numbers divisible by both are replaced with "FizzBuzz".
Here is my original code, which functions as intended:
const fuzzCont = document.getElementById("fizzbuzz-cont")
const fuzzPlusButton = document.getElementById("plus-button")
fuzzPlusButton.addEventListener("click", fuzzPlus)
let fuzzCount = {
Numb: 0,
Fizz: 3,
Buzz: 5,
}
fuzzCont.innerText = fuzzCount.Numb
function fuzzPlus() {
fuzzCount.Numb = fuzzCount.Numb + 1
if (fuzzCount.Numb % fuzzCount.Fizz === 0 && fuzzCount.Numb % fuzzCount.Buzz === 0) {
fuzzCont.innerText = "FizzBuzz"
} else if (fuzzCount.Numb % fuzzCount.Fizz === 0){
fuzzCont.innerText = "Fizz"
} else if (fuzzCount.Numb % fuzzCount.Buzz === 0){
fuzzCont.innerText = "Buzz"
} else {
fuzzCont.innerText = fuzzCount.Numb
}
}<div id="fizzbuzz-cont">Placeholder Text</div>
<button id="plus-button">+1</button>The above code includes the same calculation multiple times, which I'm trying to eliminate by creating a function for that calculation that would replace said calculation in the subsequent code, but with this new function implemented the code isn't actually replacing any of the numbers with "Fizz"/"Buzz"/"FizzBuzz"... and I have no idea why.
Here's the code with this issue:
const fuzzCont = document.getElementById("fizzbuzz-cont")
const fuzzPlusButton = document.getElementById("plus-button")
fuzzPlusButton.addEventListener("click", fuzzPlus)
let fuzzCount = {
Numb: 0,
Fizz: 3,
Buzz: 5,
}
fuzzCont.innerText = fuzzCount.Numb
function fuzzCalcDivide(fuzzCheck) {
fuzzCount.Numb % fuzzCheck === 0
}
function fuzzPlus() {
fuzzCount.Numb = fuzzCount.Numb + 1
if (fuzzCalcDivide(fuzzCount.Fizz) && fuzzCalcDivide(fuzzCount.Buzz)) {
fuzzCont.innerText = "FizzBuzz"
} else if (fuzzCalcDivide(fuzzCount.Fizz)){
fuzzCont.innerText = "Fizz"
} else if (fuzzCalcDivide(fuzzCount.Buzz)){
fuzzCont.innerText = "Buzz"
} else {
fuzzCont.innerText = fuzzCount.Numb
}
}<div id="fizzbuzz-cont">Placeholder Text</div>
<button id="plus-button">+1</button>I tried declaring the fuzzCalcDivide function within the fuzzPlus function, didn't fix the issue.
I tried declaring variables for Fizz and Buzz which aren't object properties and replacing the object properties in the if-else statements with those variables (e.g let fuzzFive = 5& else if (fuzzCalcDivide(fuzzFive))), didn't fix the issue.
I tried looking up previous posts on Stack Overflow for a solution, and couldn't find any applicable question/answer (but apologies if I missed such question/answer).
fuzzCalcDividedoesn't return anything