Tunjukkan butang tersembunyi hanya apabila syarat tertentu dipenuhi

Question

Saya mempunyai permainan kecil di mana apabila semua hati hilang, butang set semula akan muncul. Saya tidak boleh untuk seumur hidup saya memikirkan mengapa ia tidak muncul. Saya menulis semula 3 kali tertanya-tanya sama ada ini adalah cara saya menetapkan nilainya, tetapi tiada satu pun daripada mereka yang berfungsi. Apabila saya mengalih keluar pernyataan yang menyembunyikan butang, butang itu muncul, tetapi harus ada pernyataan pengesahan untuk membuatnya muncul semula.

const resetButton = document.getElementById('reset');

function reset() {
  location.reload();
}

resetButton.addEventListener('click', reset);

// Hide reset button until no hearts left
function hideReset() {
  if (foodHeart1.src.match("images/emptyheart.png" && playHeart1.src.match("images/emptyheart.png"))) {
    resetButton.style.display = "visible";
  } else {
    resetButton.style.display = "none";
  }
}

hideReset();

Saya telah cuba mengalihkannya, meletakkannya di kawasan baru, tetapi tidak berjaya. Saya tidak tahu bagaimana lagi untuk menulis ini.

Answer 1

Apakah yang memanggil fungsi hideReset()? Jika ia tidak dipanggil dalam gelung kemas kini utama atau apabila berlaku perlanggaran, tiada apa yang akan sampai ke sana. Menggunakan imej untuk bertanya sama ada pemain mati adalah idea yang menarik, tetapi lebih cekap menggunakan pembolehubah sahaja.

//way up at the top
const resetButton = getElementById('reset');
resetButton.setAttribute('display', 'none');
//way up at the top


//in the player class   
processDamage(hitVal){
    this.HP -= hitVal;
    if(this.HP <= 0){
        resetButton.setAttribuute('display', 'block');
        //----other death state code---
    }
}

Saya rasa saya mungkin perlu menambah lebih banyak kod untuk menjawab sepenuhnya...Saya harap ini membantu!

Answer 2

Berikut ialah beberapa kod yang nampaknya melakukan perkara yang anda perlukan:

    
        
        
        
    
    
              
              
       
       Change to empty Heart
       Reset

    
    sssccc

const resetButton = document.getElementById("reset");
const foodHeart1 = document.getElementById("foodHeart1");
const playHeart1 = document.getElementById("playHeart1");

function reset() {
    location.reload();
}

resetButton.addEventListener("click", reset);

// Hide reset button until no hearts left
function hideReset() {
    const foodHeartMatch = foodHeart1.src.match("images/emptyheart.png");
    const foodHeartEmpty = foodHeartMatch && foodHeartMatch.length === 1;
    const playHeartMatch = playHeart1.src.match("images/emptyheart.png");
    const playHeartEmpty = playHeartMatch && playHeartMatch.length === 1;

    console.log(`${foodHeartEmpty} : ${playHeartEmpty}`);

    if (foodHeartEmpty && playHeartEmpty) {
        resetButton.style.display = "inline";
    } else {
        resetButton.style.display = "none";
    }
}

hideReset();

// Change the images to empytyHear
function changeImage() {
    foodHeart1.src = "images/emptyheart.png";
    playHeart1.src = "images/emptyheart.png";

    hideReset();
}

Saya tidak percaya ada style.display = "kelihatan", tetapi saya harap seseorang boleh membetulkan saya jika ini salah. (Lihat pantas di MDN. Saya telah menyediakannya sebaris di sini, tetapi anda boleh menggunakan sebarang nilai yang sesuai untuk memaparkan butang.

Saya juga menggunakan operator panjang pada fungsi padanan kerana ia mengembalikan tatasusunan (untuk pernyataan bersyarat anda).

Seperti yang James sebutkan dalam ulasan, fungsi hideReset() kemungkinan besar akan dipanggil apabila anda mengemas kini nilai jantung. Dalam kes ini saya meletakkannya ke dalam fungsi yang mengubah imej.

Terdapat banyak cara untuk memperbaiki perkara ini, tetapi saya harap ia membantu anda mengatasi kesukaran awal yang anda hadapi