Q&A
コードは https://teratail.com/help#about-markdown の[コードを入力]を使ってください。
前提・実現したいこと
Windows 7 (64bit)+ sqlite3 + NodeJs(express + ejs) で WEBブラウザにデータベースの抽出結果を表示させました。その中に画像ＵＲＬがあり、それをクリックして表示させようとしています。何方かご教授願います。
発生している問題・エラーメッセージ
リンクをクリックしたら画像を表示させたいのですが表示されません。
ソースコードに一行だけ書いた<a href=.....の部分です。
表示させたい画像のURL文字列を入れた変数「logue.画像リンク」をコンソールに出力させた結果は正しいです。
またonclickイベントで実行する関数の引数に、同URL文字列を直に書くと正しく表示します。
しかし変数を引数にした場合、リンクをクリックしても反応しません。
俄仕込みのため、基本的な書式の誤りがあると思います。
変数が文字列として認識されているとかの誤りと推測しますが、正しい記述方法がわかりません。
掲載したコードはindex.ejsで、質問に関係ない部分は削除しました。
該当のソースコード
ejs
1<!DOCTYPE html> 2<html> 3 <head> 4 <title><%= title %></title> 5 <link rel='stylesheet' href='/stylesheets/style.css' /> 6 <script> 7 function openImage(imgPath){ 8 var index = imgPath.indexOf("images") + 7; 9 var subPath = "./images/" + imgPath.substring(index); 10 window.open(subPath); 11 } 12 </script> 13 </head> 14 <body> 15 <div class="wrapper"> 16 <form action="/" method="post" class="logging-form"> 17 開始年月日: <input type="text" name="DateFrom" class="input" required> 18 ～終了年月日: <input type="text" name="DateTo" class="input" required> 19 <button type="submit" class="submit">検索</button> 20 </form> 21 <ul class="main-list"> 22 <% loggingList.forEach(function(logue) { %> 23 <li class="main-list__item"> 24 <div class="record"> 25 日時 <%= logue.時刻 %> 26 <% if(logue.画像リンク === '') {%> 27 <% } else { %> 28 <% console.log(logue.画像リンク) %> 29 <% var b = logue.画像リンク %> 30 <a href="javascript:void('0')" onclick = "openImage(logue.画像リンク)">画像リンク</a> 31 <% } %> 32 </div> 33 </li> 34 <% }); %> 35 </ul> 36 </div> 37 </body> 38</html>
試したこと
ブラウザ開発ツールのコンソールにSCRIPT5009：’logue'は定義されていません。が出ていました
補足情報（FW/ツールのバージョンなど）
SQLite3 ver 3.24.0.0
リンククリック時にエラーナド発生していませんでしょうか。ブラウザ開発ツールのコンソールを確認してみてください
皆様ありがとうございます。【Orlofsky様】markdownの件、読んでおきます。 【mts10806様】ブラウザ開発者ツールは知りませんでした。IEでF12で出てくる画面でしょうか。今初めて見ているところです。特にエラー表示はありませんが、デバッガーが付いているので何か分るかもしれません。
質問は編集できるので指摘や追記依頼があったときには適宜対応してください。デバッガー試してみた結果も追記いただけると解決のヒントになるかもしれません。
ブラウザ開発ツールのコンソールに「SCRIPT5009：’logue'は定義されていません。」が出ていました。グローバルな定義とかがあるのでしょうか。調べてみます。
ブラウザ開発ツールのコンソールに「SCRIPT5009：’logue'は定義されていません。」が出ていました。グローバルな定義とかがあるのでしょうか。調べてみます。
まともに字下げしていないコードを読んでくれる奇特な人は少ないです。
【Orlofsky様】ご指摘ありがとうございます。修正してみました。
回答1件
0
自己解決
ejs
1<a href="javascript:void('0')" onclick = "openImage('<%= logue.画像リンク%>')">画像リンク</a> 2
と書くことで解決しました。
投稿2018/07/12 03:20
総合スコア4
あなたの回答
tips
プレビュー
