0

アセット パイプラインのコンパイルの問題などにより、Heroku で Javascript が機能しないという質問がいくつかあったことは承知しています。

Middleman で構築された単純なアプリケーションに単純なリンク (以下を参照) を追加したかっただけで、onclick でページをリロードし、シャッフルをトリガーする必要があります。方法：

<a href="javascript:;" onClick="window.location.reload()">Click to refresh</a>

それは可能ですか？ローカルでは正常に動作しますが、Heroku にプッシュすると動作しなくなります。ご意見/ご協力ありがとうございます。

Heroku の実際のアプリへのリンクは次のとおりです: http://coastguard-quiz.herokuapp.com/

私の index.html.erb コードは以下の通りです:

---
title: Coast Guard Quiz
---

<h1>Coast Guard Rank Quiz</h1>

<h3>Guess the enlisted insignia below:</h3>

<%

seaman_recruit = {
    img: "<img src = 'images/USCG_SR.png'>",
    name: "Seaman Recruit",
    en_class: "Seaman",
}

seaman_apprentice = {
    img: "<img src = 'images/USCG_SA.png'>",
    name: "Seaman Apprentice",
    en_class: "Seaman",
}

seaman = {
    img:  "<img src = 'images/USCG_SM.png'>",
    name: "Seaman",
    en_class: "Seaman",
    abbr: "SN",
    title:"Seaman (last name)",
    paygrade: "E3"
}

ranks = [seaman_recruit, seaman_apprentice, seaman, pettyofficer3, pettyofficer2, pettyofficer1]

current_rank = ranks.shuffle!.first

img_now = current_rank[:img]
name_now = current_rank[:name]
class_now = current_rank[:en_class]
abbr_now = current_rank[:abbr]
title_now = current_rank[:title]
paygrade_now = current_rank[:paygrade]

%>

<div id="container" class="shadow">

    <p><%= img_now %></p>
    <div id="hideaway" style="display:none;">
        <p class="bld"><%= name_now %></p>
        <p><%= class_now %></p>
        <p><%= abbr_now %></p>
        <p><%= title_now %></p>
        <p><%= paygrade_now %></p>
        <a href="javascript:;" onClick="document.getElementById('hideaway').style.display='none'; document.getElementById('showme').style.display='block'">Hide Answer</a>
    </div>

    <div id="showme">
    <a class="show" href="javascript:;" onClick="document.getElementById('hideaway').style.display='block'; document.getElementById('showme').style.display='none';">Get answer</a>
    </div>

</div>

<a href="javascript:;" onClick="window.location.reload()">Click to refresh</a>
4

1 に答える 1

2

文字列がどれほど単純かを考えると、これが問題の原因ではないと思います。アセットの縮小により JS が台無しになり、コードが評価される前にどこかに JS エラーが発生し、JS が機能しなくなった可能性が高くなります。

JavaScript 開発者ツール ( Google Chrome JS コンソールなど) でページを開いて、コンソールにエラーが記録されているかどうかを確認することをお勧めします。

更新: あなたが投稿したリンクは、Google Chrome で完全に機能します。

于 2013-02-24T18:51:50.407 に答える