2016-06-28 3 views
1

C9のレールアプリケーションでJSを使用してパーソナリティクイズをコーディングしようとしていますが、JavaScriptが動作しないようです。私はテストクイズのいくつかを書いたし、彼らのどれも働いていません。以下は、私のアプリケーションでJSfiddleが、文句を言わない仕事に取り組んでいます例のコピーです:RailsアプリケーションのJavaScriptに関する問題C9

Javascriptを資産にJavaScriptのフォルダにあるファイルの名前RECである:内

var form = document.forms.survey 

function getValues() { 
    // add your <input> names to this array: 
    return [ 
     'bee', 
     'camel', 
     'eagle' 
    ].reduce(function (obj, cur) { 
     var input = form[cur] 
     obj[cur] = input.checked ? Number(input.value) : 0 
     return obj 
    }, {}) 
} 

function computeResults (values) { 
    // adjust your equation here: 
    return values.bee + values.camel*2 - values.eagle 
} 

// show the result in the DOM 
function showResults (total) { 
    document.querySelector('#total').innerHTML = total 
} 

// when the form is submitted, compute and show the result 
document.getElementsByName('survey')[0].addEventListener('submit', function (event) { 
    event.preventDefault() // prevent the browser from redirecting the page 
    showResults(computeResults(getValues())) 
}) 

とhtml表示:

+0

具体的には機能しないものはありますか?エラー?実行されていない機能がありますか? Javascriptコンソールでエラーを調べましたか? –

+0

上記の例でJavaScriptが表示されていないようですが、私がdoesnt showと呼ばれる値を送信するをクリックすると、ページが更新されます。 – Akamaru

+1

すべてのJavascriptを 'document.ready'関数でラップしてみてください。 (これをデバッグする際にTurbolinksを無効にする方が簡単かもしれません) 'addEventListener'を呼び出す前に、正しい要素を選択していることを確認してください。 –

答えて

1

コメントに記載されているとおり、ドキュメントの準備機能でJavascriptをラップする必要があります。

デフォルトでは、レールにはターボリンクが含まれているため、ドキュメントの準備に関する予期しない動作が発生することに注意してください。スタックオーバフローの周りを検索し、2つを一緒に使用する方法を見てください。そこには多くのチュートリアルがあります。

関連する問題