मैं प्रोग्रामिंग में नया हूं और वर्तमान में अपने पहले मिनी-प्रोजेक्ट पर प्रयोग कर रहा हूं - एक शब्द परिभाषा गेम।
मेरे पास एक इनपुट फ़ील्ड पर एक ईवेंट श्रोता है, जो हर बार एक निश्चित स्कोर तक पहुंचने पर पृष्ठभूमि की छवि को बदल देता है। मेरी समस्या यह है कि हर बार जब पृष्ठभूमि की छवि बदली जाती है, तो वह अपनी सीएसएस शैली के गुणों को खो देती है, अर्थात् backgroundSize = cover;
।
मैंने backgroundSize
मान को cover
में बदलने के लिए एक फ़ंक्शन बनाया है, और यह केवल तभी काम करता है जब मैं इसे कंसोल में कॉल करता हूं। मैंने बिना किसी प्रभाव के इनलाइन शैलियों की भी कोशिश की है।
मैं इसे जावास्क्रिप्ट फ़ाइल के माध्यम से काम नहीं कर सकता (न तो eventListener
और न ही कोई कथन)।
लोड की गई छवि हमेशा auto
पर सेट होती है, मुझे इसे "कवर" करने की आवश्यकता होती है।
किसी भी सहायता की बहुत सराहना की जाएगी।
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", () => {
// document.body.style.backgroundSize = "cover";
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);
}});
1 उत्तर
जब आप किसी छवि पथ को कॉल करते हैं तो background
के बजाय backgroundImage
का उपयोग करें।