質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

782閲覧

グーグルマップの吹き出しの内のボタンからモーダルが出ません。

maroooooooon

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/05/03 04:54

前提・実現したいこと

JSの勉強のために、簡易的なJSでのアプリケーションを作っております。
グーグルマップAPIを使って、特定エリアにピンを立て、ピンをクリックすると吹き出しが出ます。
吹き出しの中に、ボタンがあって、そのボタンを押すと、JSのオンクリックが起動し、モーダルが出るようにしたいです。

発生している問題・エラーメッセージ

吹き出し内のボタンをクリックしても、モーダルが出現しません。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>JavaScript Sample</title> 6 <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 8 <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script> 10 <style type="text/css"> 11 #map { 12 height: 500px; 13 } 14 .modal { 15 display: none; 16 } 17 #slider{ 18 position: center; 19 } 20 </style> 21</head> 22<body> 23 24 <div class="modal"> 25 <div>ここにモーダルで表示させたいものをいれます。</div> 26 </div> 27 28 <div> 29 <h2>今日の天気</h2> 30 <p> 31 <small>現在時刻:</small> 32 <span id="time"></span> 33 <small>場所:</small> 34 <span id="here"></span> 35 <small>現在の気温:</small> 36 <span id="temp"></span> 37 <span id="icon"></span> 38 </p> 39 </div> 40 41 <div class="slider" > 42 <li><img src="source/hogehoge.jpg"/></li> 43 <li><img src="source/hoge.jpg"/></li> 44 </div> 45 46 <p id="map"></p> 47</body> 48<script src="sample/sample.js" type="text/javascript" charset="utf-8"></script> 49<script src="https://maps.googleapis.com/maps/api/js?key=eeeeeee=initMap"></script> 50 51</html> 52

JS

1$(function(){ 2 $('.slider').bxSlider({ 3 auto: true, 4 slideWidth: 300, 5 speed: 900, 6 mode: 'fade', 7 nextText: true 8 }); 9}); 10 11 12 13$(function() { 14$.ajax({ 15 url: 16 cache: false, 17 success:function (weatherdata){ 18 // img insert 19 var img = document.createElement('img'); 20 img.src = "http://openweathermap.org/img/w/"+weatherdata.weather[0].icon+".png"; 21 img.alt = weatherdata.weather[0].main; 22 document.getElementById('icon').appendChild(img); 23 // =摂氏+=K 24 document.getElementById('temp').innerHTML = Math.floor(weatherdata.main.temp - 273.15); 25 26 // 位置 27 document.getElementById('here').innerHTML = weatherdata.name; 28 29 } 30 }); 31}); 32setInterval(function(){ 33 var date = new Date(); 34 var time ; 35 time = date.getFullYear()+'.'; 36 time += (date.getMonth()+1)+'.'; 37 time += (date.getDate())+'.'; 38 time += date.getHours()+'.'; 39 time += date.getMinutes()+'.'; 40 time += date.getSeconds(); 41 document.getElementById('time').innerHTML = time; 42 },1000); 43 44 45function initMap() { 46 var data = [ 47 { lat: 36.204824, lng: 138.252924, title: "日本" ,content: '<div class="infobox" id="japan">" <div class="inner"><div class="header"><h3>日本</h3></div><div class="footer"><button class="modalBtn" data-modalIndex="1" type="button">Detail</button></div>'}, 48 // "<img src=source/itprooffice.png>"}, 49 { lat: 51.813707, lng: 0, title: "イギリス" ,content:'<div class="infobox" id="england">" <div class="inner"><div class="header"><h3>イギリス</h3></div><div class="footer"><button class="modalBtn" data-modalIndex="1" type="button">Detail</button></div>'}, 50 ]; 51 52 var infoWindow=[]; 53 var marker=[]; 54 var map = new google.maps.Map(document.getElementById('map'), { // #sampleに地図を埋め込む 55 center: data[0], 56 zoom: 2.5 // 地図のズームを指定 57 }); 58 for (var i = 0; i < data.length; i++) { 59 markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 60 marker[i] = new google.maps.Marker({ 61 position: markerLatLng, 62 map: map, 63 animation: google.maps.Animation.BOUNCE 64 }); 65 infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 66 content: data[i]['content'] 67 }); 68 markerEvent(i); 69 } 70 71 function markerEvent(i) { 72 marker[i].addListener('click', function() { // マーカーをクリックしたとき 73 infoWindow[i].open(map, marker[i]); // 吹き出しの表示 74 }); 75 } 76} 77$(function(){ 78 79 var modal = document.getElementById('modal'); 80 $('.modalBtn').on('click', function(e) { 81 modal.addClass('is-active'); 82 }); 83})

試したこと

コンソールで、吹き出し内のボタンの情報を確認しましたが、class="modalBtn" data-modalIndex="1"は期待通り入っています。 

JS初心者で、まだ、スクリプトタグの位置によって、挙動が変わることへの理解ができていません。
今回のモーダルが出ないのも、このことが原因でしょうか?
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

var modal = document.getElementById('modal'); ではなく、
var modal = document.getElementsByClassName('modal')[0]; です。

投稿2018/05/03 06:36

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

これでどうでしょう。

js

1$( 'body' ).on( 'click', '.modalBtn', function( e ) { 2 modal.addClass( 'is-active' ); 3} );

投稿2018/05/03 05:42

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maroooooooon

2018/05/03 05:52

ご回答ありがとうございます! 教えて頂いたコードで試してみましたが、モーダルは出ていません、、、
kei344

2018/05/03 06:30

そもそもaddClassが無いですね。 $('#modal').addClass('is-active'); こうしてみてください。 ただ、提示のコードの範囲で 'is-active'をクラスに指定したからといってモーダルが表示されると思えませんが、どこか別に規定しているのでしょうか。
kei344

2018/05/03 06:40

あ、クラスですね。 $('.modal').addClass('is-active');
maroooooooon

2018/05/06 09:17

ありがとうございます! 頂いたアドバイスの元、試行錯誤した結果、動くようになりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問