Saya baru mengenal pemrograman dan saat ini sedang bereksperimen pada proyek mini pertama saya - permainan definisi kata.

Saya memiliki pendengar acara di bidang input, yang mengubah gambar latar belakang setiap kali skor tertentu tercapai. Masalah saya adalah bahwa setiap kali gambar latar belakang diubah, ia kehilangan properti gaya CSS-nya, yaitu backgroundSize = cover;.

Saya membuat fungsi untuk mengubah nilai backgroundSize menjadi cover, dan ini hanya berfungsi jika saya memanggilnya di konsol. Saya juga telah mencoba gaya sebaris, tidak berpengaruh.

Saya tidak bisa membuatnya bekerja melalui file javascript (baik eventListener atau pernyataan if).

Gambar yang dimuat selalu disetel ke auto, saya ingin ini menjadi "penutup".

Bantuan apa pun akan sangat dihargai.

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 Oktober 2019, 12:39

1 menjawab

Jawaban Terbaik

Gunakan backgroundImage alih-alih background saat Anda memanggil jalur gambar.

1
Fahim Khan 30 Oktober 2019, 11:04