JavaScript按鈕在Chrome和IE中完美啓用，但在Firefox中不起作用

我確定標題看起來像之前被問過的內容，但是我已經搜索了這個答案並且找不到它。JavaScript按鈕在Chrome和IE中完美啓用，但在Firefox中不起作用

我真的很新的編碼，所以請原諒我所做的任何真正明顯的錯誤。

上下文到我正在處理的代碼：我在一個遊戲設計類，我決定接受一個製作HTML JS遊戲的個人項目。

我明白，代碼可能是粗糙/不好/絕對不是最好的方式做的事情，但它會一直如此，直到我提高我的技能（或提供建議如何改善它）。

我需要幫助：兩到三個星期，我無法弄清楚如何讓一個按鈕在if語句中實現時出現。

像這樣：

if(condition) 
{ 
    document.write("text"); 
    //desired button here 
} 
else 
{ 
    //Backup code 
}

最後我想通兩種方式來做到這一點（爲Chrome和Internet Explorer）。

第一種方式：

function myFunction() 
    { 
    document.close(); 
    document.write("text"); 
    /* There will be buttons in here 
    too when I get things working. */ 
    } 

//In separate script tags 
/* myFunction() dwells in the head of the 
page while the if statement is in the body 
and another function*/ 

if(condition) 
    { 
    document.write("text"); 
    var gameElement=document.createElement("BUTTON"); 
    var text=document.createTextNode("CLICK ME"); 
    gameElement.appendChild(text); 
    gameElement.onclick = myFunction; 
    document.body.appendChild(gameElement); 
    } 
else 
    { 
    //Backup code 
    }

第二種方式：

（同樣的功能，他們都在同一個地方）。

if(condition) 
    { 
    document.write("text"); 
    var gameElement; 
    gameElement = document.createElement('input'); 
    gameElement.id = 'gameButton'; 
    gameElement.type = 'button'; 
    gameElement.value='Continue'; 
    gameElement.onclick = myFunction; 
    document.body.appendChild(gameElement); 
    }

這對我很好。

儘管它在IE和Chrome中運行良好，但它在Firefox中不起作用。

經過多少時間和研究，我已經放入這個按鈕，我很想知道爲什麼它不會出現在Firefox中。我已經閱讀了很多關於Firefox的內容，以及.onclick如何工作或JavaScript之類的東西必須啓用或禁用。我只是有點困惑。

我也打開任何真實/相關的建議。

來源

2013-10-20 DanieWrathh

如果'condition'爲'true'，則會看到單詞「text」和一個按鈕。你點擊按鈕，它消失。這適用於所有3種瀏覽器。什麼具體不工作？ – chiliNUT

'document.write'在文檔初始渲染完成後調用時，會將整個文檔替換爲新的內容 - 所以這種方法是您想要拋棄並從您的武庫中取消的第一件事，請相信我。 – CBroe

@ chiliNUT-我在向Mike解釋的是我在提問時犯了一個錯誤。我遺漏了一個細節。條件轉到提示框，並轉到if（name！= null）。我沒有收到任何代碼部分的問題。它會運行直到我到達if語句中的按鈕。但是，如果您查看代碼，則如下所示：如果條件爲真;你會看到文字和按鈕 - 這是有效的。但該按鈕不會在Firefox中調用該功能。這是不行的。 – DanieWrathh

我成立了這個fiddle。我刪除了您的document.write()調用，因爲它們在JSFiddle中不允許使用，並將您的條件更改爲true，以便代碼可以正常工作，並且可以在FF24中使用。

document.write()可能是您的問題的原因。無論如何，這是不好的做法，因爲它可能會導致重新解析文檔，或擦除整個文檔並重新開始寫入。您已經在使用一些DOM操作來添加按鈕。我建議你也這樣做，因爲你正在考慮使用document.write()。

來源

2013-10-20 21:30:39

在我考慮離開這個代碼時，我並不認爲這是必要的，因爲我看過人們在這裏使用諸如'if（condition）'之類的東西，條件是提示框，並且if語句的條件是if（name！= null）..等等。和document.write我聽說過所有關於，我尋找的替代品，但我的目標實際上是讓頁面完全改變。我不知道，像我一樣新，有另一個代碼可以做到這一點。 – DanieWrathh

所以有一段時間我一直在清理代碼，這就是爲什麼這有點晚了。但其中的一部分包括擺脫document.write。在我清除了document.write的代碼之後，我甚至都沒有想過嘗試在Firefox中運行代碼。果然，那是錯的。當在Firefox中運行並且條件成立時，該按鈕就像其他四個主要瀏覽器一樣觸發。感謝您的幫助。^- ^ – DanieWrathh

而不是建議你的問題的解決方案，我建議你看看jQuery，這是一個非常好的JavaScript框架，使你可以編寫跨瀏覽器兼容代碼，它似乎這裏是你的問題。

使用jQuery，你就可以寫類似：

$（「＃gameButton」）點擊（函數（）{myFunction的（）;}

可能會觸發您myFunction的（）函數，點擊含有ID「gameButton」控制時。

訪問www.jquery.com瞭解更多

來源

2013-10-20 21:27:47 CodeMonkey

儘管它*是一個解決方案，OP還沒有要求jQuery。您可能會發現這會被降低。 – Popnoodles

OP可能沒有意識到jQuery的存在。我認爲讓OP意識到這個框架是個好主意。 – CodeMonkey

我聽說過，看過jQuery。我一直使用這個網站足夠長的時間來看到它。我不太清楚它是如何工作的。這似乎是一個非常好的選擇，但是在我可以在代碼中使用它並知道我在做什麼之前，需要一些認真的解釋。 – DanieWrathh

JavaScript按鈕在Chrome和IE中完美啓用，但在Firefox中不起作用

回答

相關問題