javascriptのエラーについて

Question

javascriptで下記コードにエラーメッセージが出ました。どこが間違っているかご指摘いただけないでしょうか？よろしくお願いします

document.getElementById( "main-image" ).addEventListener( "click", function( e ) {

エラーメッセージ
Expected attribute
  /home/ubuntu/workspace/app/views/projects/index.html.slim, Line 46, Column 27
    document.getElementById( "main-image" ).addEventListener( "click", function( e ) {

全体コード

 javascript:

  count = 1  // ボタンで使うカウンター

  document.getElementById( "main-image" ).addEventListener( "click", function( e ) {
    // マウス位置を取得する
    var mouseX = e.pageX ;  // X座標
    var mouseY = e.pageY ;  // Y座標

    // 要素の位置を取得
    var element = document.getElementById( "main-image" ) ;
    var rect = element.getBoundingClientRect();

    // 要素の位置座標を計算
    var positionX = rect.left + window.pageXOffset ;    // 要素のX座標
    var positionY = rect.top  + window.pageYOffset ;    // 要素のY座標

    // 要素の左上からの距離を計算
    var X = mouseX - positionX;
    var Y = mouseY - positionY;

    // formの要素のvalueに代入
    $('#x'+count).val(X);
    $('#y'+count).val(Y);

    console.log([count, X, Y]);

    // count up
    count += 1

    if(count > 1) {
       var element = document.getElementById("text-pos"); 
       var x1 = $('#x1').val();
       var y1 = $('#y1').val();
       var x2 = $('#x2').val();
       var y2 = $('#y2').val();
       var width  = x2 - x1;
       var height = y2 - y1;
       element.style.width  = width  + 'px'; 
       element.style.height = height + 'px'; 
       element.style.top  = y1 + 'px'; 
       element.style.left = x1 + 'px'; 
    }
  } ) ;

Comments

[gouf]

slimrb --help とコマンドを打つとヘルプが表示されますか?

[trafalbad]

bash: slimrb: command not foundと表示されます。それ以前に環境がcloud9なためslimに対応してないためhtml文に変換する必要があるんです。

[gouf]

フレームワークは使用されていますか? たとえばRails であれば slim-rails gem で変換せずとも利用できると思います

[trafalbad]

cloud9はハイライトにならないだけでslimは対応していました。解決しましたありがとうございます。

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

Answer 1

JavaScriptのエラーではなく、slimの変換時のエラーと思われます。
htmlに直にJavaScriptを記述する方法を見直してみてはどうでしょうか？
http://qiita.com/YOUG_XX/items/00e5cb887b0bdcbcc334

Comments

[trafalbad]

解決しました。ありがとうございます。

Answer 2

上のコードだけ見ると間違ってなさそうなので、main-imageっていうElementが無いのでは？

Comments

[shi_ue]

おっと、よく見たら slim のエラー何ですね。
退散します・・・