I am a beginner in the world of programming and currently working on my very first mini-project - a word definition game.
One of the challenges I am facing is related to an event listener on an input field, where I aim to change the background image every time a certain score is achieved. The issue I am encountering is that whenever the background image is changed, it seems to lose its CSS style properties, specifically backgroundSize = cover;.
I attempted to resolve this by creating a function to set the backgroundSize value to cover. However, this solution only seems to work when executed in the console. I also tried using inline styles, but that did not have the desired effect either.
My efforts to implement this change through the javascript file, whether through the eventListener or an if statement, have all been unsuccessful. The loaded image always defaults to auto, but I require it to be set to "cover".
Any guidance or support on this matter would be greatly appreciated.
body {
background: url("/IMG/moebius.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
let changeBackground = () => {
document.body.style.backgroundSize = "cover";
return document.body.style.backgroundSize;
}
defInputField.addEventListener("keyup", () => {
setTimeout(userScore, scoreInterval);
if (splitInputWords.length < 2) {
correct.style.display = "none";
incorrect.style.display = "none";
displayScore.style.display = "none";
};
if (totalScore > 5) {
document.body.style.background = "url('/IMG/moebius3.jpg')";
};
if (totalScore > 10) {
document.body.style.background = "url('/IMG/moebius.jpg')";
};
if (userScore() >= 3 || userScore() >= splitDisplayedDef().length) {
correct.style.display = "block";
incorrect.style.display = "none"
displayScore.textContent = userScore();
displayScore.style.display = "block";
} else {
incorrect.style.display = "none";
correct.style.display = "none";
displayScore.display ="none";
};
});
defInputField.addEventListener("keydown", (e) => {
if (e.keyCode === 13 && userScore() >= 1) {
totalScore += userScore();
totalScore--;
currentLevel++;
newDefButton.textContent = "Definition"
let newWordObject = newWordObjectGenerator();
displayNewDef.style.display = "none";
correct.style.display = "none";
incorrect.style.display = "none";
displayScore.style.display = "none";
defInputField.value = "";
displayNewWord.textContent = newWordObject.word;
displayNewDef.textContent = newWordObject.definition;
scoreTracker.textContent = "Total Score = " + " " + totalScore;
levelTracker.textContent = "Level = " + " " + currentLevel;
console.log(currentLevel);
console.log(totalScore);
}});