teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問javascriptのエラーについて

編集履歴

質問編集履歴

6

質問変更

2017/06/24 12:10

投稿

trafalbad
trafalbad

スコア303

test CHANGED
@@ -1 +1 @@
1
- slimをhtmlに変換したいのですがslim文の意味がわかりません
1
+ javascriptのエラーについて
test CHANGED
@@ -1,37 +1,113 @@
1
- 下記のslim文をhtmlに変換したいのですが、htmlではどのような意味なのでしょうか？
1
+ javascriptで下記コードにエラーメッセージが出ました。どこが間違っているかご指摘いただけないでしょうか？よろしくお願いします
2
2
 
3
+ ```
4
+
3
- サイトなどを参考にしたのですが、わからなかったので、ご教授いただけないでしょうか？
5
+ document.getElementById( "main-image" ).addEventListener( "click", function( e ) {
4
6
 
5
7
 
6
8
 
7
- slim文
9
+ エラーメッセージ
8
10
 
9
- ```
11
+ Expected attribute
10
12
 
11
- div#main-image
13
+ /home/ubuntu/workspace/app/views/projects/index.html.slim, Line 46, Column 27
12
14
 
13
- = image_tag @image, id:"image"
14
-
15
- div.child id="text-pos"
16
-
17
- - @blocks.each do |blk|
18
-
19
- div.child style="top: #{blk[:y]}px; left:#{blk[:x]}px; width:#{blk[:width]}px; height:#{blk[:height]}px;"
15
+ document.getElementById( "main-image" ).addEventListener( "click", function( e ) {
20
16
 
21
17
  ```
22
18
 
23
19
  ```
24
20
 
25
- 自分で解読したhtml文（最後の部分だけ解読できなかったため記載なし）
21
+ 全体コード
26
22
 
27
- <div class="float2">
28
23
 
29
- <div id="main-image">
30
24
 
31
- <%= image_tag @image, id:"image"%></div>
25
+ javascript:
32
26
 
33
- <div class="child"><div id="text-pos">
34
27
 
28
+
29
+ count = 1 // ボタンで使うカウンター
30
+
31
+
32
+
33
+ document.getElementById( "main-image" ).addEventListener( "click", function( e ) {
34
+
35
+ // マウス位置を取得する
36
+
37
+ var mouseX = e.pageX ; // X座標
38
+
39
+ var mouseY = e.pageY ; // Y座標
40
+
41
+
42
+
43
+ // 要素の位置を取得
44
+
45
+ var element = document.getElementById( "main-image" ) ;
46
+
47
+ var rect = element.getBoundingClientRect();
48
+
49
+
50
+
51
+ // 要素の位置座標を計算
52
+
53
+ var positionX = rect.left + window.pageXOffset ; // 要素のX座標
54
+
55
+ var positionY = rect.top + window.pageYOffset ; // 要素のY座標
56
+
57
+
58
+
59
+ // 要素の左上からの距離を計算
60
+
35
- <% @blocks.each do |blk| %>
61
+ var X = mouseX - positionX;
62
+
63
+ var Y = mouseY - positionY;
64
+
65
+
66
+
67
+ // formの要素のvalueに代入
68
+
69
+ $('#x'+count).val(X);
70
+
71
+ $('#y'+count).val(Y);
72
+
73
+
74
+
75
+ console.log([count, X, Y]);
76
+
77
+
78
+
79
+ // count up
80
+
81
+ count += 1
82
+
83
+
84
+
85
+ if(count > 1) {
86
+
87
+ var element = document.getElementById("text-pos");
88
+
89
+ var x1 = $('#x1').val();
90
+
91
+ var y1 = $('#y1').val();
92
+
93
+ var x2 = $('#x2').val();
94
+
95
+ var y2 = $('#y2').val();
96
+
97
+ var width = x2 - x1;
98
+
99
+ var height = y2 - y1;
100
+
101
+ element.style.width = width + 'px';
102
+
103
+ element.style.height = height + 'px';
104
+
105
+ element.style.top = y1 + 'px';
106
+
107
+ element.style.left = x1 + 'px';
108
+
109
+ }
110
+
111
+ } ) ;
36
112
 
37
113
  ```

5

修正

2017/06/24 12:09

投稿

trafalbad
trafalbad

スコア303

test CHANGED
@@ -1 +1 @@
1
- model(Tmpimage)にasset内の画像(90枚)の必要なデータを格納する方法
1
+ slimをhtmlに変換したいのですがslim文の意味がわかりません
test CHANGED
@@ -1,143 +1,37 @@
1
- [このサイト](http://qiita.com/yoshizaki_kkgk/items/2e40bd4f77140b0c97f8)を参考にしてアプリを作ろうとしてます。
1
+ 下記のslim文をhtmlに変換したいのですが、htmlではどのような意味なのでしょうか？
2
2
 
3
- 【留意点】
4
-
5
- 1.assetに画像が保存してあること(90枚)。
6
-
7
- 2.TmpImage（model)は画像保存用に作成されたものであること。
3
+ サイトなどを参考にしたのですが、わからなかったので、ご教授いただけないでしょうか？
8
-
9
- 3.controllerのindexアクションでTmpImage.firstのようにTmpImageのデータを持ってくる処理をしていること。
10
4
 
11
5
 
12
6
 
13
- 以上のことから次のことをしました
7
+ slim文
14
-
15
- 1.asset内に画像（９０枚）を保存した
16
-
17
- 2.TmpImageを上記サイトの通り作成した。
18
-
19
- 3.ルーティングやその他コードをサイト同様に実装した。
20
-
21
- 4.controllerでindexアクションで```TmpImage.first```のようにデータを変数に格納する処理をした。
22
-
23
-
24
-
25
- 以上を踏まえた上で以下のエラーがcontroller.rbのindexアクション( ```@image = tmp[:filename]```)に対して出ました。
26
8
 
27
9
  ```
28
10
 
29
- undefined method `[]' for nil:NilClass
11
+ div#main-image
30
12
 
31
- ```
13
+ = image_tag @image, id:"image"
32
14
 
15
+ div.child id="text-pos"
33
16
 
17
+ - @blocks.each do |blk|
34
18
 
35
- つまりtmpには何も入ってないというものです。
36
-
37
-
38
-
39
- 【想定していたこと】
40
-
41
- asset内の画像が上記サイト同様の処理をすれば読み込まれると思っていたこと
42
-
43
-
44
-
45
- 【今回解決したい問題】
46
-
47
- indexアクションでasset内の画像が読み込まれるようにしたい。そのためにはTmpImageにasset内の画像のfilenameとimage_idを格納したい。
48
-
49
-
50
-
51
- これを解決する手段を教えて下さい。
52
-
53
- ```
54
-
55
- #controller.rb
56
-
57
- class ProjectsController < ApplicationController
58
-
59
-
60
-
61
- before_action :set_project, only: [:show, :edit, :update, :destroy]
19
+ div.child style="top: #{blk[:y]}px; left:#{blk[:x]}px; width:#{blk[:width]}px; height:#{blk[:height]}px;"
62
-
63
-
64
-
65
- def index
66
-
67
- @projects=Project.all
68
-
69
- tmp = TmpImage.first
70
-
71
- @image = tmp[:filename]
72
-
73
- @blocks = TextBlock.view_css(tmp[:image_id])
74
-
75
- end
76
-
77
-
78
-
79
- def show
80
-
81
- end
82
-
83
-
84
-
85
- def new
86
-
87
- @project=Project.new
88
-
89
- end
90
-
91
-
92
-
93
- def create
94
-
95
- @project=Project.new(project_params)
96
-
97
- if @project.save
98
-
99
- redirect_to projects_path
100
-
101
- else
102
-
103
- render 'new'
104
-
105
- end
106
-
107
- end
108
-
109
-
110
-
111
- def edit
112
-
113
- end
114
20
 
115
21
  ```
116
22
 
117
23
  ```
118
24
 
119
- #migrate/create.tmp_images.rb
25
+ 自分で解読したhtml文（最後の部分だけ解読できなかったため記載なし）
120
26
 
121
- class CreateTmpImages < ActiveRecord::Migration
27
+ <div class="float2">
122
28
 
123
- def change
29
+ <div id="main-image">
124
30
 
125
- create_table :tmp_images do |t|
31
+ <%= image_tag @image, id:"image"%></div>
126
32
 
127
- t.string :title
33
+ <div class="child"><div id="text-pos">
128
34
 
129
- t.string :filename, default: false
35
+ <% @blocks.each do |blk| %>
130
-
131
- t.integer :image_id
132
-
133
-
134
-
135
- t.timestamps null: false
136
-
137
- end
138
-
139
- end
140
-
141
- end
142
36
 
143
37
  ```

4

質問変更

2017/06/23 13:18

投稿

trafalbad
trafalbad

スコア303

test CHANGED
@@ -1 +1 @@
1
- railsでアクセスした時に画像が表示されない原因
1
+ model(Tmpimage)にasset内の画像(90枚)の必要なデータを格納する方法
test CHANGED
@@ -1,58 +1,114 @@
1
+ [このサイト](http://qiita.com/yoshizaki_kkgk/items/2e40bd4f77140b0c97f8)を参考にしてアプリを作ろうとしてます。
2
+
3
+ 【留意点】
4
+
5
+ 1.assetに画像が保存してあること(90枚)。
6
+
7
+ 2.TmpImage（model)は画像保存用に作成されたものであること。
8
+
1
- railsで以下のコードを実装しました。index.html.erbの内容が表示されるはずなのですが、アクセスしても何も表示されません。エラーも出ていない状態です。
9
+ 3.controllerのindexアクションでTmpImage.firstのようにTmpImageのデータを持ってくる処理をしていること。
2
10
 
3
11
 
4
12
 
13
+ 以上のことから次のことをしました
14
+
15
+ 1.asset内に画像（９０枚）を保存した
16
+
17
+ 2.TmpImageを上記サイトの通り作成した。
18
+
19
+ 3.ルーティングやその他コードをサイト同様に実装した。
20
+
5
- どこか修正すべき点があるため、どなたかご教授お願いします。Imageの中にはid:0,1,2の3つのデータが格納されています。
21
+ 4.controllerでindexアクションで```TmpImage.first```のようにデータを変数に格納する処理をした。
22
+
23
+
24
+
25
+ 以上を踏まえた上で以下のエラーがcontroller.rbのindexアクション( ```@image = tmp[:filename]```)に対して出ました。
6
26
 
7
27
  ```
8
28
 
9
- #index.html.erb
29
+ undefined method `[]' for nil:NilClass
10
30
 
11
- <h1>
12
-
13
- Welcome to Show Page
14
-
15
- </h1>
16
-
17
- <ul>
18
-
19
- <% @image.each do |t| %>
20
-
21
- <li><%= t.id %></li>
22
-
23
- <% end %>
24
-
25
- </ul>
26
-
27
- <p>
31
+ ```
28
-
29
- <%= image_tag '00asfs1.jpg', :alt => '登録ボタン' %>
30
-
31
- </p>
32
32
 
33
33
 
34
34
 
35
- <p>
35
+ つまりtmpには何も入ってないというものです。
36
36
 
37
- <%= image_tag '01.jpg' %>
38
37
 
38
+
39
+ 【想定していたこと】
40
+
41
+ asset内の画像が上記サイト同様の処理をすれば読み込まれると思っていたこと
42
+
43
+
44
+
45
+ 【今回解決したい問題】
46
+
47
+ indexアクションでasset内の画像が読み込まれるようにしたい。そのためにはTmpImageにasset内の画像のfilenameとimage_idを格納したい。
48
+
49
+
50
+
39
- </p>
51
+ これを解決する手段を教えて下さい。
40
52
 
41
53
  ```
42
54
 
43
- ```
55
+ #controller.rb
44
56
 
45
- #routes.rb
57
+ class ProjectsController < ApplicationController
46
58
 
47
- Rails.application.routes.draw do
59
+
48
60
 
61
+ before_action :set_project, only: [:show, :edit, :update, :destroy]
49
62
 
63
+
50
64
 
51
- resources :labels
65
+ def index
52
66
 
67
+ @projects=Project.all
53
68
 
69
+ tmp = TmpImage.first
54
70
 
71
+ @image = tmp[:filename]
72
+
73
+ @blocks = TextBlock.view_css(tmp[:image_id])
74
+
75
+ end
76
+
77
+
78
+
79
+ def show
80
+
81
+ end
82
+
83
+
84
+
85
+ def new
86
+
87
+ @project=Project.new
88
+
89
+ end
90
+
91
+
92
+
93
+ def create
94
+
95
+ @project=Project.new(project_params)
96
+
97
+ if @project.save
98
+
99
+ redirect_to projects_path
100
+
101
+ else
102
+
55
- root 'labels#index'
103
+ render 'new'
104
+
105
+ end
106
+
107
+ end
108
+
109
+
110
+
111
+ def edit
56
112
 
57
113
  end
58
114
 
@@ -60,70 +116,28 @@
60
116
 
61
117
  ```
62
118
 
63
- #labels.controller.rb
119
+ #migrate/create.tmp_images.rb
64
120
 
65
- class LabelsController < ApplicationController
121
+ class CreateTmpImages < ActiveRecord::Migration
66
122
 
67
- # *** トップページ ***
123
+ def change
68
124
 
69
-
125
+ create_table :tmp_images do |t|
70
126
 
71
-
127
+ t.string :title
72
128
 
73
- def index
129
+ t.string :filename, default: false
74
130
 
75
- @image=Image.all
131
+ t.integer :image_id
132
+
133
+
134
+
135
+ t.timestamps null: false
136
+
137
+ end
76
138
 
77
139
  end
78
140
 
79
141
  end
80
142
 
81
143
  ```
82
-
83
- ```
84
-
85
- rake routes
86
-
87
- >>>>
88
-
89
- DEPRECATION WARNING: Sprockets method `register_engine` is deprecated.
90
-
91
- Please register a mime type using `register_mime_type` then
92
-
93
- use `register_compressor` or `register_transformer`.
94
-
95
- https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
96
-
97
- (called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:16)
98
-
99
- DEPRECATION WARNING: You are using the a deprecated processor interface Less::Rails::ImportProcessor.
100
-
101
- Please update your processor interface:
102
-
103
- https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
104
-
105
- (called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:21)
106
-
107
- Prefix Verb URI Pattern Controller#Action
108
-
109
- labels GET /labels(.:format) labels#index
110
-
111
- POST /labels(.:format) labels#create
112
-
113
- new_label GET /labels/new(.:format) labels#new
114
-
115
- edit_label GET /labels/:id/edit(.:format) labels#edit
116
-
117
- label GET /labels/:id(.:format) labels#show
118
-
119
- PATCH /labels/:id(.:format) labels#update
120
-
121
- PUT /labels/:id(.:format) labels#update
122
-
123
- DELETE /labels/:id(.:format) labels#destroy
124
-
125
- root GET / labels#index
126
-
127
-
128
-
129
- ```

3

2017/06/23 03:09

投稿

trafalbad
trafalbad

スコア303

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- どこか修正すべき点があるため、どなたかご教授お願いします、
5
+ どこか修正すべき点があるため、どなたかご教授お願いします。Imageの中にはid:0,1,2の3つのデータが格納されています。
6
6
 
7
7
  ```
8
8
 
@@ -72,7 +72,7 @@
72
72
 
73
73
  def index
74
74
 
75
- @image=Image.find
75
+ @image=Image.all
76
76
 
77
77
  end
78
78
 

2

修正

2017/06/22 08:10

投稿

trafalbad
trafalbad

スコア303

test CHANGED
File without changes
test CHANGED
File without changes

1

修正

2017/06/22 07:26

投稿

trafalbad
trafalbad

スコア303

test CHANGED
@@ -1 +1 @@
1
- colud9でのslimの使用方法
1
+ railsでアクセスした時に画像が表示されない原因
test CHANGED
@@ -1,93 +1,129 @@
1
- cloud9でslimを使用したいのですが、文字がハイライトにならずに使用できません。おそらく対応していないのではないかと思うのですが、cloud9ではslimを使用できるのでしょうか？
1
+ railsで以下のコードを実装しました。index.html.erbの内容が表示されるはずなのですが、アクセスしても何も表示されません。エラーも出ていない状態です。
2
2
 
3
3
 
4
4
 
5
- またslimのコードをhtmlに変換すれば良いと考えたのですが、rubyの記述が入っているとエラーになってしまいます。
5
+ どこか修正すべき点があるため、どなたかご教授お願いします、
6
-
7
- 変換に効率的な方法（例えばrubyの記述部分のみ別の文字列に変換するなど）がありましたら教えていただけないしょうか？
8
6
 
9
7
  ```
10
8
 
11
- #slimコード
9
+ #index.html.erb
12
10
 
13
- div.top-title
11
+ <h1>
14
12
 
15
- div.left-button
13
+ Welcome to Show Page
16
14
 
17
- = link_to "前の登録を取り消し", image_delete_path, method: :delete, data: {confirm: "取り消しますか？"}, class: "btn btn-danger"
15
+ </h1>
18
16
 
19
- div.right-button align="right"
17
+ <ul>
20
18
 
19
+ <% @image.each do |t| %>
20
+
21
+ <li><%= t.id %></li>
22
+
23
+ <% end %>
24
+
25
+ </ul>
26
+
27
+ <p>
28
+
21
- = link_to "次の画像へ", image_next_path, method: :post, class: "btn btn-warning"
29
+ <%= image_tag '00asfs1.jpg', :alt => '登録ボタン' %>
30
+
31
+ </p>
22
32
 
23
33
 
24
34
 
25
- div.float2
35
+ <p>
26
36
 
27
- div#main-image
37
+ <%= image_tag '01.jpg' %>
28
38
 
29
- = image_tag @image, id:"image"
39
+ </p>
30
40
 
31
- div.child id="text-pos"
41
+ ```
32
42
 
33
- - @blocks.each do |blk|
43
+ ```
34
44
 
35
- div.child style="top: #{blk[:y]}px; left:#{blk[:x]}px; width:#{blk[:width]}px; height:#{blk[:height]}px;"
45
+ #routes.rb
36
46
 
37
-
47
+ Rails.application.routes.draw do
38
48
 
39
- div.float2
40
49
 
41
- div.form
42
50
 
43
- = form_for(:pos, url: image_register_path, method: :post) do |f|
51
+ resources :labels
44
52
 
45
- div.form-group
46
53
 
47
- = f.label :pos1, "１．左上の座標"
48
54
 
49
- div.form-group
55
+ root 'labels#index'
50
56
 
51
- div.form-inline
57
+ end
52
58
 
53
- = f.label :pos1, "x :", style: "margin-right:10px;"
59
+ ```
54
60
 
55
- = f.number_field :pos1_x1, id: 'x1', class: "form-control", style: "width:100px; margin-right:30px;"
61
+ ```
56
62
 
57
- = f.label :pos1, "y :", style: "margin-right:10px;"
63
+ #labels.controller.rb
58
64
 
59
- = f.number_field :pos1_y1, id: 'y1', class: "form-control", style: "width:100px; margin-right:30px;"
65
+ class LabelsController < ApplicationController
60
66
 
61
- div.form-group
62
-
63
- = f.label :pos2, "２．右下の座標"
64
-
65
- div.form-group
66
-
67
- div.form-inline
67
+ # *** トップページ ***
68
-
69
- = f.label :pos2, "x :", style: "margin-right:10px;"
70
-
71
- = f.number_field :pos2_x2, id: 'x2', class: "form-control", style: "width:100px; margin-right:30px;"
72
-
73
- = f.label :pos2, "y :", style: "margin-right:10px;"
74
-
75
- = f.number_field :pos2_y2, id: 'y2', class: "form-control", style: "width:100px; margin-right:30px;"
76
-
77
- div.form-group
78
-
79
- = f.label :text, "３．テキスト"
80
-
81
- = f.text_area :text, class:"form-control", style:"height: 200px;"
82
-
83
- div.form-group
84
-
85
- = f.submit "登録", class:"btn btn-primary"
86
68
 
87
69
 
88
70
 
89
- div
71
+
90
72
 
73
+ def index
74
+
91
- = link_to "リセット", root_path
75
+ @image=Image.find
76
+
77
+ end
78
+
79
+ end
92
80
 
93
81
  ```
82
+
83
+ ```
84
+
85
+ rake routes
86
+
87
+ >>>>
88
+
89
+ DEPRECATION WARNING: Sprockets method `register_engine` is deprecated.
90
+
91
+ Please register a mime type using `register_mime_type` then
92
+
93
+ use `register_compressor` or `register_transformer`.
94
+
95
+ https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
96
+
97
+ (called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:16)
98
+
99
+ DEPRECATION WARNING: You are using the a deprecated processor interface Less::Rails::ImportProcessor.
100
+
101
+ Please update your processor interface:
102
+
103
+ https://github.com/rails/sprockets/blob/master/guides/extending_sprockets.md#supporting-all-versions-of-sprockets-in-processors
104
+
105
+ (called from block in <class:Railtie> at /usr/local/rvm/gems/ruby-2.3.0/gems/less-rails-2.8.0/lib/less/rails/railtie.rb:21)
106
+
107
+ Prefix Verb URI Pattern Controller#Action
108
+
109
+ labels GET /labels(.:format) labels#index
110
+
111
+ POST /labels(.:format) labels#create
112
+
113
+ new_label GET /labels/new(.:format) labels#new
114
+
115
+ edit_label GET /labels/:id/edit(.:format) labels#edit
116
+
117
+ label GET /labels/:id(.:format) labels#show
118
+
119
+ PATCH /labels/:id(.:format) labels#update
120
+
121
+ PUT /labels/:id(.:format) labels#update
122
+
123
+ DELETE /labels/:id(.:format) labels#destroy
124
+
125
+ root GET / labels#index
126
+
127
+
128
+
129
+ ```