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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

4244閲覧

ul li の中でjavascriptを使いたい「javascript:void(0)" onclick="」を使いたい

daiti916

総合スコア17

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/06 07:44

<div class="tabNav upper"> <div class="tab"> <ul id="year"> <!-- <li class="on"><a href="javascript:void(0)">2017年</a></li> <li><a href="javascript:void(0)">2016年</a></li> <li><a href="javascript:void(0)">2015年</a></li> <li><a href="javascript:void(0)">2014年</a></li> --> <li><a href="javascript:void(0)" onclick="show_block(2017);">2017年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2016);">2016年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2015);">2015年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2014);">2014年</a></li> <select id="changeSelect" onchange="entryChange2();"> <option value="">2013年以前</option> <option value="select2013">2013年</option> <option value="select2012">2012年</option> <option value="select2011">2011年</option> </select> </ul> </div> </div>

上記のようにコードがあり、

Scriptには下記のようなコードがあります。

function

1 2 if(id == '2017'){ 3 console.log(id); 4 //2017年表示 5 document.getElementById('Box2017').style.display = ""; 6 document.getElementById('Box2016').style.display = "none"; 7 document.getElementById('Box2015').style.display = "none"; 8 document.getElementById('Box2014').style.display = "none"; 9 document.getElementById('Box2013').style.display = "none"; 10 document.getElementById('Box2012').style.display = "none"; 11 document.getElementById('Box2011').style.display = "none"; 12 }else if(id == '2016'){ 13 console.log(id); 14 //2016年表示 15 document.getElementById('Box2017').style.display = "none"; 16 document.getElementById('Box2016').style.display = ""; 17 document.getElementById('Box2015').style.display = "none"; 18 document.getElementById('Box2014').style.display = "none"; 19 document.getElementById('Box2013').style.display = "none"; 20 document.getElementById('Box2012').style.display = "none"; 21 document.getElementById('Box2011').style.display = "none"; 22 }else if(id == '2015'){ 23 console.log(id); 24 //2015年表示 25 document.getElementById('Box2017').style.display = "none"; 26 document.getElementById('Box2016').style.display = "none"; 27 document.getElementById('Box2015').style.display = ""; 28 document.getElementById('Box2014').style.display = "none"; 29 document.getElementById('Box2013').style.display = "none"; 30 document.getElementById('Box2012').style.display = "none"; 31 document.getElementById('Box2011').style.display = "none"; 32 }else if(id == '2014'){ 33 console.log(id); 34 //2014年表示 35 document.getElementById('Box2017').style.display = "none"; 36 document.getElementById('Box2016').style.display = "none"; 37 document.getElementById('Box2015').style.display = "none"; 38 document.getElementById('Box2014').style.display = ""; 39 document.getElementById('Box2013').style.display = "none"; 40 document.getElementById('Box2012').style.display = "none"; 41 document.getElementById('Box2011').style.display = "none"; 42 } 43 44}

表示部分は

<table id="Box2017"> <colgroup> <col span="3" class="w33per"> </colgroup> <tbody> <tr> ~略 <talbe>

というのが、2017~2014まであります。

最初のコードの2017年を押すと、最後のコードの'Box2017'のデータが表示など、各ボタン(2017~2014)を押すと、画面を切替で表示したいのですが、liのなかだと、どうもjavascriptがきかないようです。。。

console.logでボタンを押したときのファンクションのデータは取ってこれるのですが、二番目のコードの表示、非表示のところがうまく動作していないようです。

どこが原因かわかりますでしょうか?

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

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

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

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

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

spookybird

2018/09/06 07:55

ちょっと今ご提示のコードからだとどの処理がどう連携してどう動くのかエスパーするのは無理でした...。お困りの現象が再現できる形でコードをご提示いただければと思います。
daiti916

2018/09/06 08:24

エスパーに挑戦していただけて、ありがとうございます。仕事でのコードの為・・・コードを連携してしまうと会社のページが見れてしまうため・・・メール等ではないと厳しいです。
yukihisa

2018/09/06 08:38 編集

そういうときはテキスト部分を○○にするとか、伏せるといいですよー。たぶん、それをしないで回答を待つよりずっと早く解決策が見つかると思います。 あと、個人的には何度もgetElementByIdするのが面倒なんで、変数に持っておきたい。。。
mix-peach

2018/09/06 08:38

回答の方は検討違いだったようなので、削除依頼を出してしまったので、こちらに。document.getElementById('Box2016').style.display = "none"; の記述自体に問題はないと思うのですが、動いていないというのは、コンソールでDomを確認しても、display=noneが設定されていない、ってことですか? また、「2017」のボタンの時は、Domに設定されていることを確認できている、ということでいいでしょうか? あと、ボタン押したときにコンソールにエラーは出ていませんか?
daiti916

2018/09/06 08:43 編集

mix-peach コンソールには、このようにでております。 test_index.html:108 2016 test_index.html:98 2017 test_index.html:118 2015 test_index.html:128 2014 それぞれのボタンを押すたときのonclickに持っている値が表示されています。
daiti916

2018/09/06 08:43 編集

yukihisa >個人的には何度もgetElementByIdするのが面倒なんで、変数に持っておきたい。。。 ・・・たしかにそうですね!改善してみます。
mix-peach

2018/09/06 08:46

エラーは出ていないんですね。 ちなみに、<table id="Box????">には、元々cssなどでスタイルの設定をしていますか?
daiti916

2018/09/06 08:47

mix-peach はい、改修しておりますので、元々の設定はしてあります。
x_x

2018/09/06 08:51

<talbe>などおかしな記述がみられるので確認してもらえますか?
x_x

2018/09/06 08:52

省略するのはいいですが、最低限再現しないと意味がありません。提示コードは適当に補ってやると期待通り動作します。
spookybird

2018/09/06 08:55

まず、なぜ今の現象が起きるのかを検証するためにコードを細分化していくといいと思います。新たにページを作って最小限のコードから組み立てていき、徐々に事象が起きるコードに似せていって、どこをどう作ったときに事象が起きるのか。こう作ったらこうなったと、そのコードをご提示いただければなぜそうなるのか説明することは容易です。回答者に事象の解析からやってもらいたいのであれば、本物のコードの事象が起きる部分を丸ごとご提示いただく必要がありますね。
daiti916

2018/09/06 08:58

*追記* 一部抜粋してきました。 ``` <script type="text/javascript"> function entryChange2(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == 'select2013'){ //2013年表示 document.getElementById('Box2017').style.display = "none"; document.getElementById('Box2016').style.display = "none"; document.getElementById('Box2015').style.display = "none"; document.getElementById('Box2014').style.display = "none"; document.getElementById('Box2013').style.display = ""; document.getElementById('Box2012').style.display = "none"; document.getElementById('Box2011').style.display = "none"; }else if(id == 'select2012'){ //2012年表示 document.getElementById('Box2017').style.display = "none"; document.getElementById('Box2016').style.display = "none"; document.getElementById('Box2015').style.display = "none"; document.getElementById('Box2014').style.display = "none"; document.getElementById('Box2013').style.display = "none"; document.getElementById('Box2012').style.display = ""; document.getElementById('Box2011').style.display = "none"; }else if(id == 'select2011'){ //2011年表示 document.getElementById('Box2017').style.display = "none"; document.getElementById('Box2016').style.display = "none"; document.getElementById('Box2015').style.display = "none"; document.getElementById('Box2014').style.display = "none"; document.getElementById('Box2013').style.display = "none"; document.getElementById('Box2012').style.display = "none"; document.getElementById('Box2011').style.display = ""; } } } //オンロードさせ、リロード時に選択を保持 //window.onload = entryChange2; function show_block(id){ if(id == '2017'){ console.log(id); //2017年表示 document.getElementById('Box2017').style.display = ""; document.getElementById('Box2016').style.display = "none"; document.getElementById('Box2015').style.display = "none"; document.getElementById('Box2014').style.display = "none"; document.getElementById('Box2013').style.display = "none"; document.getElementById('Box2012').style.display = "none"; document.getElementById('Box2011').style.display = "none"; }else if(id == '2016'){ console.log(id); //2016年表示 document.getElementById('Box2017').style.display = "none"; document.getElementById('Box2016').style.display = ""; document.getElementById('Box2015').style.display = "none"; document.getElementById('Box2014').style.display = "none"; document.getElementById('Box2013').style.display = "none"; document.getElementById('Box2012').style.display = "none"; document.getElementById('Box2011').style.display = "none"; }else if(id == '2015'){ console.log(id); //2015年表示 document.getElementById('Box2017').style.display = "none"; document.getElementById('Box2016').style.display = "none"; document.getElementById('Box2015').style.display = ""; document.getElementById('Box2014').style.display = "none"; document.getElementById('Box2013').style.display = "none"; document.getElementById('Box2012').style.display = "none"; document.getElementById('Box2011').style.display = "none"; }else if(id == '2014'){ console.log(id); //2014年表示 document.getElementById('Box2017').style.display = "none"; document.getElementById('Box2016').style.display = "none"; document.getElementById('Box2015').style.display = "none"; document.getElementById('Box2014').style.display = ""; document.getElementById('Box2013').style.display = "none"; document.getElementById('Box2012').style.display = "none"; document.getElementById('Box2011').style.display = "none"; } } </script> </head> <body id="network" class="noSideNav noIndentType"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="pageWrapper"> <header id="headerContainer" role="banner"> <dl class="voiceGuide"> <dt>ページ内を移動するためのリンクです</dt> <dd> <ul> <li><a href="#gNaviStart">○</a></li> <li><a href="#contentsStart">○</a></li> <li><a href="#footerStart">○</a></li> </ul> </dd> </dl> <div id="header"> <div class="inner"> <h1 id="logo"><a href="/index.html"><img src="/common/images/header_logo.png" alt="JLC Japan Leisure Channel"></a></h1> <p id="spMenuBtn">メニュー</p> <nav id="globalNav"> <p id="gNaviStart" class="voiceGuide">○</p> <ul> <li><a href="○"><img src="/common/images/header_nav01_off.png" alt="Broadcast" width="103" height="31"></a></li> <li class="current"><a href="○"><img src="/common/images/header_nav02_on.png" alt="Network" width="100" height="31"></a></li> <li><a href="○"><img src="/common/images/header_nav03_off.png" alt="Magazine" width="99" height="31"></a></li> <li><a href="/goods/index.html"><img src="/common/images/header_nav04_off.png" alt="Goods" width="94" height="31"></a></li> <li><a href="/it/index.html"><img src="/common/images/header_nav05_off.png" alt="IT Service" width="98" height="31"></a></li> </ul> </nav> <!-- end/globalNav --> <nav id="spGlobalNav"> <ul> <li><a href="○">○</a></li> <li><a href="○">○</a></li> <li><a href="○">○</a></li> <li><a href="○">○</a></li> <li><a href="○">○</a></li> </ul> <!-- end/spGlobalNav --> </nav> <!-- end/inner --> </div> <!-- end/header --> </div> <nav id="localNav"> <ul class="inner"> <li class="current"><a href="/network/results/index.html">○</a></li> <li><a href="/network/list/index.html">○</a></li> </ul> <!-- end/header --> </nav> </header> <div id="contentsWrapper"> <div id="contents"> <main id="main" role="main"> <p id="contentsStart" class="voiceGuide">ここから本文です</p> <div id="contentsInner"> <h1 class="heading01">○</h1> <div class="sectionWrap"> <div class="singleImage recordBox03"> <figure><img src="/network/results/images/index_il01.png" alt="" /></figure> <div class="tabWrap"> <div class="tabNav upper"> <div class="tab"> <ul> <!-- <li class="on"><a href="javascript:void(0)">2017年</a></li> <li><a href="javascript:void(0)">2016年</a></li> <li><a href="javascript:void(0)">2015年</a></li> <li><a href="javascript:void(0)">2014年</a></li> --> <li><a href="javascript:void(0)" onclick="show_block(2017);">2017年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2016);">2016年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2015);">2015年</a></li> <li><a href="javascript:void(0)" onclick="show_block(2014);">2014年</a></li> <select id="changeSelect" onchange="entryChange2();"> <option value="">2013年以前</option> <option value="select2013">2013年</option> <option value="select2012">2012年</option> <option value="select2011">2011年</option> </select> </ul> </div> </div> <div class="tabPanel"> <div class="panel"> <div class="tableBlock01"> <form> <!-- 表示非表示切り替え --> <table id="Box2017"> <colgroup> <col span="3" class="w33per"> </colgroup> <tbody> <tr> <th class="lv01">年月</th> <th class="lv01">拠点名</th> <th class="lv01">作業概要・備考</th> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> </tbody> </table> <!-- 表示非表示切り替え --> <table id="Box2016" style="display: none;"> <colgroup> <col span="3" class="w33per"> </colgroup> <tbody> <tr> <th class="lv01">年月</th> <th class="lv01">拠点名</th> <th class="lv01">作業概要・備考</th> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> </tbody> </table> <table id="Box2015" style="display: none;"> <colgroup> <col span="3" class="w33per"> </colgroup> <thead> <tr> <th class="lv01">年月</th> <th class="lv01">拠点名</th> <th class="lv01">作業概要・備考</th> </tr> </thead> <tbody> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr> <td>○</td> <td>○</td> <td>○</td> </tr> <tr>
daiti916

2018/09/06 09:02 編集

コードの綺麗な貼り付けの仕方がわからなく、羅列してしまって申し訳ないです。
mix-peach

2018/09/06 09:03

念の為の確認ですが、css側の設定が勝っている。なんてことはないでしょうかね? 極端な例ですが、例えば #Box2016 {display: none !important; }と書いてあったとしたら、document.getElementById('Box2016').style.display = ""; と書いたとしても表示できないですよね。 あとコードは、質問を編集して追記したらいいですよ!
x_x

2018/09/06 09:05

こっちのコメント欄ではなく、質問文に追記してもらっていいでしょうか?
spookybird

2018/09/06 09:08

「css側の設定が勝っている。なんてことはないでしょうかね?」というのは、CSSをご提示いただかないと確認できないです。
spookybird

2018/09/06 09:09

なので、質問文に書くコードは「質問内容の事象が再現可能」なものでないと解析がとても難しいです。というか事実上ほぼ不可能です。
yukihisa

2018/09/06 09:11

spoolybird 様 それは質問者のお話ではないんですぜ。。。アイコン似てるけども!
x_x

2018/09/06 09:17

ああそうか、mix-peachさんの推測のように、#Box2016 { display: none; } なんてのがあればだめですね(!importantはいらない)
daiti916

2018/09/06 09:17

質問文に格納は不可能でした。
daiti916

2018/09/06 09:19 編集

スタイルシートの部分です。 ``` style> #main [class*="recordBox"] #hokkaido { top: 63px; right: 100px; width: 129px; height: 88px; } #main [class*="recordBox"] #gifu { top: 370px; right: 300px; width: 62px; height: 42px; } #main [class*="recordBox"] #saitama { top: 370px; right: 200px; width: 62px; height: 42px; } #main [class*="recordBox"] #shiga { top: 370px; right: 362px; width: 62px; height: 42px; } /*#main [class*="recordBox"] #miyagi { top: 277px; right: 100px; width: 62px; height: 42px; }*/ </style> ```
x_x

2018/09/06 09:20

.style.display = "" ではなく、.style.display = "table" で確認してもらえますか?
daiti916

2018/09/06 09:22

style.display = "table"にしたのですが、変化なしですね・・・。
spookybird

2018/09/06 09:27

アイコンんんんんんんー!!! 失礼しました。 ちょっと情報が断片的すぎるのと、コメントのコードの読みづらさが尋常じゃない苦痛です。。 https://jsfiddle.net/ ここに事象を再現できる状態で作ってみてもらえませんかね。
mix-peach

2018/09/06 09:42 編集

>x_xさん !important は極端な話として書いたつもりでしたが、確かにdisplay: none; だけでも充分ですね・・! 「2017」のボタンだけうまくいっているそうなので、もし2017が初期で表示されている・・としたらcss側の設定が邪魔していて他はダメだけど「2017」だけは上手く行く、という状態が発生するかと思ったのですが・・display=tableでもダメなら、cssは関係なさそうかな・・(気にしてませんでしたが、確かにアイコンがとても似てました・・w)
yukihisa

2018/09/07 00:08

このスタイルは全く関係ない部分では。。。 動作確認しようにもこれではでけんです。
daiti916

2018/09/07 00:33

皆様・・・無事解決しそうです。とても親切にしてくださりありがとうございました。
guest

回答3

0

ベストアンサー

ちょっとデータ属性をいじっていいならこんな感じ

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 show_block(""); 4 [].forEach.call(document.querySelectorAll('#year a[data-show]'),function(x){ 5 x.addEventListener('click',function(e){ 6 e.preventDefault(); 7 show_block(e.target.dataset["show"]); 8 }); 9 }); 10 document.querySelector('#changeSelect').addEventListener('change',function(e){ 11 show_block((r=e.target.value.match(/\d{4}$/))?r[0]:""); 12 }); 13}); 14 15function show_block(y){ 16 [].forEach.call(document.querySelectorAll('table[id]'),function(x){ 17 if(x.getAttribute("id").match(/^Box\d{4}$/)){ 18 x.style.display=(y!=="" && x.getAttribute("id").match(new RegExp(y+"$")))?"":"none"; 19 } 20 }); 21} 22</script> 23<div class="tabNav upper"> 24<div class="tab"> 25<ul id="year"> 26<li><a href="#" data-show="2017">2017</a></li> 27<li><a href="#" data-show="2016">2016</a></li> 28<li><a href="#" data-show="2015">2015</a></li> 29<li><a href="#" data-show="2014">2014</a></li> 30<select id="changeSelect"> 31<option value="">2013年以前</option> 32<option value="select2013">2013</option> 33<option value="select2012">2012</option> 34<option value="select2011">2011</option> 35</select> 36</ul> 37</div> 38</div> 39<table id="Box2017"> 40<tr><td>2017</td></tr> 41</table> 42<table id="Box2016"> 43<tr><td>2016</td></tr> 44</table> 45<table id="Box2015"> 46<tr><td>2015</td></tr> 47</table> 48<table id="Box2014"> 49<tr><td>2014</td></tr> 50</table> 51<table id="Box2013"> 52<tr><td>2013</td></tr> 53</table> 54<table id="Box2012"> 55<tr><td>2012</td></tr> 56</table> 57<table id="Box2011"> 58<tr><td>2011</td></tr> 59</table>

投稿2018/09/06 09:30

yambejp

総合スコア114585

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

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

daiti916

2018/09/06 23:59

scriptの中をこのコードにしても、動作しませんでした・・・
yambejp

2018/09/07 00:17

このままをhtmlにコピペしたものも動きませんか? Winのchrome,firefox,Edge,IE11では動作確認していますが どのOSのどのブラウザだと動かないのでしょうか?
daiti916

2018/09/07 00:34

Winのchromeの最新版です。 そして、無事解決しそうです! ありがとうございます。
guest

0

現象の解決にはまだコードが足りないのでなんとも言えませんが、
javascriptの冗長表現が個人的に嫌だったので僕ならこう書くよ、というものを。
HTMLに下記を追加します。

html

1 <input type="hidden" id="active_id" value="">

そしてjavaScriptの処理を以前アクティブだったものを隠し、対象をアクティブにする処理に変更します。
アクティブな要素をhiddenで保持する形で。

javascript

1 var active = document.getElementById('active_id') 2 if(id == '2017'){ 3 console.log(id); 4 //2017年表示 5 if (active.value != "") { 6 document.getElementById(active.value).style.display = "none"; 7 } 8 document.getElementById('Box2017').style.display = ""; 9 active.value = Box2017; 10 }else if(id == '2016'){ 11 console.log(id); 12 //2016年表示 13 if (active.value != "") { 14 document.getElementById(active.value).style.display = "none"; 15 } 16 document.getElementById('Box2016').style.display = ""; 17 active.value = Box2016; 18 }else if(id == '2015'){ 19 console.log(id); 20 //2015年表示 21 if (active.value != "") { 22 document.getElementById(active.value).style.display = "none"; 23 } 24 document.getElementById('Box2015').style.display = ""; 25 active.value = Box2015; 26 }else if(id == '2014'){ 27 console.log(id); 28 //2014年表示 29 if (active.value != "") { 30 document.getElementById(active.value).style.display = "none"; 31 } 32 document.getElementById('Box2014').style.display = ""; 33 active.value = Box2014; 34 }

とりあえず適当ですがこんな感じ。

提示ソースでこんな感じ。
codepen

投稿2018/09/06 08:54

編集2018/09/07 00:45
yukihisa

総合スコア672

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

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

daiti916

2018/09/06 09:20

ありがとうございます。 明日会社で試したいと思います。
guest

0

liの中のaonclickの関数呼び出す部分

show_block(2017)

渡しているパラメータは、数字です。

一方、提示されたjsの判定処理部分
( functionの定義部分がないですが、これはfunction show_block(id){}のコードの一部ってことで良いですよね・・?)

if(id == '2017'){

これは文字列との比較です。

javascriptでは、数値の2017文字列の2017は一致しませんので、条件分岐の中の処理は行われません。

投稿2018/09/06 08:04

mix-peach

総合スコア1910

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

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

yukihisa

2018/09/06 08:09

条件分岐の中のconsole.logでidは取れているようなので、条件分岐には入れているようですよ。
daiti916

2018/09/06 08:21

console.logで分岐の中はそれているのは確認できております。 2017のボタンしか、機能しなく、2016~2014までのボタンは押されているけれど "document.getElementById('Box2016').style.display = "none";" が動いていないようです・・。
mix-peach

2018/09/06 08:26 編集

>yukihisa さん おぉ?なるほど。。。 それでは、検討違いの回答のようなので、削除依頼を出すことにします。 ご指摘ありがとうございました。
maisumakun

2018/09/06 08:31

数値の2017と文字列の2017は、==では一致します。区別したい場合には===を使うこととなります。
daiti916

2018/09/06 08:32

お手数おかけして、申し訳ありません。。。 ありがとうございます。
yukihisa

2018/09/06 08:34

mix-peach 様 条件文とインデントが同じなので空目も仕方なさそうです。 ちょっとソース自体が断片的過ぎてなんとも言えないですね。。。
daiti916

2018/09/06 08:34

maisumakun ありがとうございます。 今条件分岐はできているようですので、後は document.getElementById('Box2014').style.display = "none"; を正常に動作させたい状況です・・・
mix-peach

2018/09/06 08:42

>皆さま 補足していただいて、ありがとうございます。(==で厳密比較だと、何を勘違いしたのか、自分でも不思議です・・) この回答は削除依頼を出しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問