मैं प्रोग्रामिंग में नया हूं और वर्तमान में अपने पहले मिनी-प्रोजेक्ट पर प्रयोग कर रहा हूं - एक शब्द परिभाषा गेम।

मेरे पास एक इनपुट फ़ील्ड पर एक ईवेंट श्रोता है, जो हर बार एक निश्चित स्कोर तक पहुंचने पर पृष्ठभूमि की छवि को बदल देता है। मेरी समस्या यह है कि हर बार जब पृष्ठभूमि की छवि बदली जाती है, तो वह अपनी सीएसएस शैली के गुणों को खो देती है, अर्थात् 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);

}});
0
hubbleduzz 30 अक्टूबर 2019, 12:39

1 उत्तर

सबसे बढ़िया उत्तर

जब आप किसी छवि पथ को कॉल करते हैं तो background के बजाय backgroundImage का उपयोग करें।

1
Fahim Khan 30 अक्टूबर 2019, 11:04