class追加でロールオーバーするDOMのjavascript
- class追加でロールオーバーするDOMのjavascriptを作成しているが、特定の状況で問題が発生している。
- ブラウザの戻るボタンを押すと、onmouseover時の状態でページが戻ってしまう。
- onunloadをonclickに変更することで問題は回避できるが、別のページに遷移しなければならない。
- ベストアンサー
class追加でロールオーバーするDOMのjavascript
イベントハンドラをjs内に内包したロールオーバーを作成していて、 解決できない問題が発生しています。 リンクボタンをクリックして次のページに遷移したあと、 ブラウザの戻るボタンで戻るとonmouseover時の状態で戻ってしまいます。 原因はonunloadが動作がしていないためと思います。 onunloadをonclickにするとこの問題は回避はできますが、 クリックしたら必ず別ページに遷移しなければいけなくなります。 このスクリプトは必ずしもaタグでなくてもロールオーバーできるようにしたいのでうまい解決策ではありません。 何かよい解決方法はありますでしょうか。 // javascript start window.onload = function() { if(!document.getElementsByTagName) return false; var AddClass = document.getElementsByTagName("*"); for(var i=0;i<AddClass.length;i++){ if(AddClass[i].className.match("^(.+? )?addclass.+?( .+?)?$")){ if (document.all){ // IE AddClass[i].onmouseover = AddClassOn; AddClass[i].onmouseout = AddClassOff; AddClass[i].onunload = AddClassOn; }else{ AddClass[i].addEventListener("mouseover", AddClassOn, false); AddClass[i].addEventListener("mouseout", AddClassOff, false); AddClass[i].addEventListener("unload", AddClassOff, false); } } } function AddClassOn() { id_name = this.className.replace(/^(.+? )?addclass_(.+?)_.+?( .+?)?$/i,"$2"); class_name = this.className.replace(/^(.+? )?addclass_.+?_(.+?)( .+?)?$/i,"$2") var classNameOG = document.getElementById(id_name).className; var id_Node = document.getElementById(id_name); var createAttr = document.createAttribute("class"); createAttr.nodeValue = classNameOG + " " + class_name; id_Node.setAttributeNode(createAttr); } function AddClassOff() { id_name = this.className.replace(/^(.+? )?addclass_(.+?)_.+?( .+?)?$/i,"$2"); class_name = this.className.replace(/^(.+? )?addclass_.+?_(.+?)( .+?)?$/i,"$2") var classNameOG = document.getElementById(id_name).className.replace(class_name,""); var id_Node = document.getElementById(id_name); var createAttr = document.createAttribute("class"); createAttr.nodeValue = classNameOG; id_Node.setAttributeNode(createAttr); } } // javascript end /* style start */ .changeclass{ padding:4px; background:#ff0; border:1px solid #f00; } /* style end */ /* html start */ <body id="knowhow" class="body_test"> <ol> <li><a href="test.html"><img src="image/list01.gif" class="addclass_knowhow_changeclass" width="64" height="64" alt="ボタン" /></a></li> </ol> </body> /* html end */ ちなみに現状のスクリプトはidだけにclass追加するように作っていますが、 最終形は追加するclassのid指定部分をbodyやparentやthisにすることで、 id以外にもclassが追加できる仕様にする予定です。 よろしくお願いいたします。
- kuzumiHK
- お礼率92% (48/52)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
説明を理解できているかは不明。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <style type="text/css"> .p1 { padding:4px; background:#ff0; border:1px solid #f00; } .p2 { padding:4px; background:#00f; border:1px solid #f00; } </style> <body> <body> <ol> <li> <a href="test.html"> <img src="image/list01.gif" class="aa addclass_p1_abc_def_ghi cc" width="64" height="64" alt="ボタン" id="abc"> </a> </li> <li> <a href="test.html"> <img src="image/list01.gif" class="bb addclass_p2_jkl_mno_pqr dd" width="64" height="64" alt="ボタン" id="jkl"> </a> </li> </ol> <p><span id="def">def</span>と<span id="ghi">ghi</span></p> <p><span id="mno">mno</span>と<span id="pqr">pqr</span></p> <p> class指定は、addclass_の文字列で始まり、設定するcss、以降'_'で区切ったものをIDとする<br> thisは自分自身にidを振り指定。bodyは？<br> あと去り際に元に戻す。<br> こんなのでいいのかは不明。</p> <script type="text/javascript"> //全角空白は適当に変換のこと //@cc_on /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function() { var m_ary = []; var m_css = []; var reg0 = /\b(addclass_.+?)\b/; document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', function(evt) { var e = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; var cnt = 0; var o; if (m_ary[cnt = 2]) while (o = document.getElementById(m_ary[cnt])) o.className = m_css[cnt++]; if (e.className && (a = e.className.match(reg0))) { m_ary = a[1].split('_'); cnt = 2; while (o = document.getElementById(m_ary[cnt])) { m_css[cnt++] = o.className; o.className += ' ' + m_ary[1]; } } }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt) { if (m_ary[cnt = 2]) while (o = document.getElementById(m_ary[cnt])) o.className = m_css[cnt++]; }, false); }, false); </script>
その他の回答 (1)
1対1で対応させるのであれば、面倒なことをする必要がないのでは？ getElementsByTagNameで集めたものに、いちいちイベントをくっつけて 、しかも3個もくっつけて・・・ 大もと１つ付ければ、OK！ mouseoverするということは、それまで居たノードから mouseoutしたことになるのだから、それを覚えておいて利用すればOK！ と、学んだ。
お礼
ご回答ありがとうございます。 たびたびの説明不足ですみません。 書き込んだソースは簡略化しすぎました。。 実際には汎用スクリプトとして使いたいので、 1対2だったり、2対1だったり、2対3だったりします。 1対2の場合、2つとも囲われているidやbodyに、classを追加し、 2対1の場合、2か所に同じclassを追加するといった感じになります。
補足
前項の補足で失礼しました。 こちらのスクリプトで問題ありませんでした。。 bodyやthisやparentの場合だけ、 条件分岐すれば希望の状態になりそうです。 ご回答ありがとうございました。
関連するQ&A
- JavaScript IDの複数読み込みについて
JavaScript（プログラミング）はほとんど知識のないもので、 自分なりに調べたのですが、分からないので質問させていただきます。 下記のようなJavaScriptがあります。 window.onload = function() { var target = document.getElementById("●●"); target.addEventListener("touchstart", function(){this.className="touchstyle";}, false); target.addEventListener("touchend", function(){this.className="notouchstyle";}, false); } "●●"のほかに"▲▲" "■■"というIDを読み込ませたいのですが、 それは可能でしょうか。 （"xxx"はclass指定に変更でも構いません） 色々と試してみたのですが、うまくいかず困っております。 何卒ご教授のほど宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptにフェードインを追加したい。
下記のjavascriptに、フェードイン効果を追加するにはどうすればいいでしょうか？ 現在は、クリックで、テキストが切り替わる仕様になっているんですが、これにフェードイン、フェードアウトの機能を付け加えたいです。 また、切り替わった際に下記のようにCSSの.actveをclass=""に追加させたいのですが、 どうすれば可能でしょうか？ 目的は、アクティブになったボタンの背景を変更したい為です。 <div class="button actve"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン１</a></div> 【javascript】 function ChDsp2(strShow,classHidden){ var tags=document.getElementsByTagName("div"); for(var i=0;i<tags.length;i++){ if(tags[i].className.match('textALL')){ tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,""); if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide'; } } return false; } function checkd1(){ document.FORM.CHECK1.checked=true document.FORM.CHECK2.checked=false document.FORM.CHECK3.checked=false } function checkd2(){ document.FORM.CHECK1.checked=false document.FORM.CHECK2.checked=true document.FORM.CHECK3.checked=false } function checkd3(){ document.FORM.CHECK1.checked=false document.FORM.CHECK2.checked=false document.FORM.CHECK3.checked=true } function change(c) { var f = c.checked, btn = c.form.elements['btn1']; btn.disabled = f?false:true; f = f?'sozai/button_2.jpg':'sozai/button_1.jpg'; btn.style.backgroundImage = 'url(' + f + ')'; } 【HTML】 <div class="button"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン１</a></div> <div class="button"><a href="#" onclick="checkd2();return ChDsp2('text2','textALL');">ボタン２</a></div> <div class="button"><a href="#" onclick="checkd3();return ChDsp2('text3','textALL');">ボタン３</a></div> <div class="clear"> </div> <div class="area"> <form name="FORM"> <div id="text1" class="textALL"> その１、ここは最初に表示されています。 </div> <div id="text2" class="textALL hide"> その２、ここはボタン２をクリックで表示されます。 </div> <div id="text3" class="textALL hide"> その２、ここはボタン３をクリックで表示されます。 </div> </form> </div> 上記は、以前頂いたプログラムをわかる範囲で改造したものなのですが、 限界を感じまして、どなたか教えて頂けたら助かります。 宜しくお願いします。
- ベストアンサー
- JavaScript
- javascriptについて
現在ＨＰを作成していてjavaのプルダウンメニューを設置していますが 最初からメニューが開いた状態になります。ちなみにsdmenu.jsを使用しています。 最初開いた時にメニューが閉じるようにできますでしょうか？ function SDMenu(id) { if (!document.getElementById || !document.getElementsByTagName) return false; this.menu = document.getElementById(id); this.submenus = this.menu.getElementsByTagName("div"); this.remember = true; this.speed = 4; this.markCurrent = true; this.oneSmOnly = false; } SDMenu.prototype.init = function() { var mainInstance = this; for (var i = 0; i < this.submenus.length; i++) this.submenus[i].getElementsByTagName("span")[0].onclick = function() { mainInstance.toggleMenu(this.parentNode); }; if (this.markCurrent) { var links = this.menu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) if (links[i].href == document.location.href) { links[i].className = "current"; break; } } if (this.remember) { var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); var match = regex.exec(document.cookie); if (match) { var states = match[1].split(""); for (var i = 0; i < states.length; i++) this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); } } }; SDMenu.prototype.toggleMenu = function(submenu) { if (submenu.className == "collapsed") this.expandMenu(submenu); else this.collapseMenu(submenu); }; SDMenu.prototype.expandMenu = function(submenu) { var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var links = submenu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) fullHeight += links[i].offsetHeight; var moveBy = Math.round(this.speed * links.length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight + moveBy; if (newHeight < fullHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = ""; mainInstance.memorize(); } }, 30); this.collapseOthers(submenu); }; SDMenu.prototype.collapseMenu = function(submenu) { var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight - moveBy; if (newHeight > minHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = "collapsed"; mainInstance.memorize(); } }, 30); }; SDMenu.prototype.collapseOthers = function(submenu) { if (this.oneSmOnly) { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); } }; SDMenu.prototype.expandAll = function() { var oldOneSmOnly = this.oneSmOnly; this.oneSmOnly = false; for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className == "collapsed") this.expandMenu(this.submenus[i]); this.oneSmOnly = oldOneSmOnly; }; SDMenu.prototype.collapseAll = function() { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); }; SDMenu.prototype.memorize = function() { if (this.remember) { var states = new Array(); for (var i = 0; i < this.submenus.length; i++) states.push(this.submenus[i].className == "collapsed" ? 0 : 1); var d = new Date(); d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); } };
- ベストアンサー
- JavaScript
- ｊQueryでのclassの操作
現在Wordpressに、文字のサイズを「小・中・大」と変えるjQueryを設置しています。 http://az-store.nrym.org/download/extend/jquery-fontsize-switcher/ Wordressではもともとbodyのclassに指定があるのですが、このjQueryを設置すると removeAttr("class")で削除されてしまいます。 そこで、もともとのClassを活かしたまま文字サイズ変更用のクラスだけを 削除&追加ができればいいのですが、 どうすればよいでしょうか？ ただ、単純に「removeAttr("class")」の記述を削除してしまうと、 文字サイズ変更スイッチを押す度に、クラスが追加され続けるのでそれは避けたいです。 $(function(){ var currentstyle = readCookie('fontStyle'); if (currentstyle){ switchFont(currentstyle); }; $("li.sizeL").click(function(){ switchFont("fontL"); return false; }); $("li.sizeM").click(function(){ switchFont("fontM"); return false; }); $("li.sizeS").click(function(){ switchFont("fontS"); return false; }); }); function switchFont(className){ $("body").removeAttr("class").addClass(className); createCookie('fontStyle', className, 365); }; // cookie script http://www.quirksmode.org/js/cookies.html function createCookie(name,value,days){ if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }
- ベストアンサー
- AJAX
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの記述について
私は最近javascriptの勉強を始めたプログラム初心者です。 下記のjavascriptについてお聞きしたいです。 ｃｓｓ *{ line-height: 1.5em; } #wrapper{ width: 380px; margin: 16px; } h1{ font-size: 20px; border: solid 2px orange; padding: 2px 4px; margin: 1em 0 0.5em 0; } h2{ background: lightblue; padding: 2px 4px; font-size: 12px; margin: 1em 0 0.5em 0; } p{ font-size: 12px; } .close{ display: none; } .open{}; <script type="text/javascript"> window.addEventListener( 'load', function(event){ var elem = document.getElementById('lnk_closeAll'); elem.addEventListener('click', closeAll, false); var elem = document.getElementById('lnk_openAll'); elem.addEventListener('click', openAll , false); //全見出しに設定 setEventToTitles(); } , false); //開閉関数 function openAll(event){ event.preventDefault(); changeAll(false); } function closeAll(event){ event.preventDefault(); changeAll(true); } //trueならすべて閉じる、falseならすべて展開 function changeAll(close){ var titles = document.getElementsByTagName('h2'); for(var i=0; i<titles.length; i++){ var parent = titles[i].parentNode; var topics = parent.getElementsByTagName('div'); for(var j=0; j<topics.length; j++){ if(close){ topics[0].className = 'close'; } else { topics[0].className = 'open'; } } } } //状態を反転する function setEventToTitles(){ var titles = document.getElementsByTagName('h2'); for(var i=0; i<titles.length; i++){ titles[i].addEventListener('click', toggleTopic, false); } } function toggleTopic(event){ var title = event.currentTarget; var parent = title.parentNode; var topics = parent.getElementsByTagName('div'); if(topics[0].className == 'close'){ topics[0].className = 'open'; } else { topics[0].className = 'close'; } } </script> </head> <body> <div id="wrapper"> <h1>よくある質問と回答</h1> <p> <a id="lnk_closeAll" href="#">すべて閉じる</a> <a id="lnk_openAll" href="#">すべて展開</a> </p> <div id="topic1"> <h2>電源ランプが赤く光り、しばらくすると製品が動かなくなります</h2> <div class="close"> <p>電源ランプが赤く光るのは内蔵バッテリーが消耗していることを示しています。 コンセントを接続して充電してください。</p> </div> </div> <div id="topic2"> <h2>ときどきブザーが鳴りますが、問題ないでしょうか？</h2> <div class="open"> <p>本製品の長時間利用により低温やけどを負うことがあります。 長時間使い続けていることをユーザーに伝えるため、 4時間15分32秒ごとにピッピッという警告音を鳴らすようにしております。</p> </div> </div> <div id="topic3"> <h2>製品を床に落としてしまいました。問題ないでしょうか？</h2> <div class="open"> <p>本製品は高さ1メートルからの落下テスト10万回をパスしております。 ただし、1メートル以上の高さから落下した場合は、 故障する可能性がありますので、お近くのサービスセンターにご相談ください。</p> </div> </div> </div> このプログラムは画像のようにすべて閉じるを押すと説明文が閉じ、 すべて開くを押すと説明文がすべて開きます。 わからない箇所は、 if(topics[0].className == 'close'){ topics[0].className = 'open'; } else { topics[0].className = 'close'; 箇所でどうしてtopics[i]ではなくtopics[0]なのでしょうか。 参考書には「NodeListオブジェクトとして返されますが、必要なのは最初の1つだけなので[0]で先頭要素にアクセスし classNameプロパティに[close]か[open]を設定する」と記載されています。 ですが、なぜ必要なのは最初の1つだけなのでしょうか？ カウンタiを一つづつふやし、一つ筒divに[close]か[open]を設定しないのでしょうか。 試しにtopics[i]にすると動きません。。。 topics[0]だと動くのに。。。
- ベストアンサー
- JavaScript
- Class属性をJavaScriptで動的に切り替える
http://youmos.com/reference/set_element_class.html 上記のサイトを参考に”Class属性をJavaScriptで動的に切り替える”を実現したいのですが、記述が間違っているのか下記のソースでは動きませんでした。 /**********************************************************/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- .left { float:left; margin:0px 12px 12px 0px; } .right { float:right; margin:0px 0px 12px 12px; } --> </style> <script type="text/javascript"> var changed = false; function changeSample(){ if(changed){ setElementClass('sample_img','left'); }else{ setElementClass('sample_img','right'); } changed= (changed)?false:true; } //class要素の追加・変更 function setElementClassById(elem, value) { if(document.getElementById) { var obj = document.getElementById(elem); if(obj) { obj.className = value; } } } addListener(document.getElementById('sample_img'), 'click', changeSample, false); </script> </head> <body> <p><img src="pic_1.gif" alt="setElementClassById" id="sample_img" class="left" /> ああああああああああああああああああああああああああああああああああああああああ ああああああああああああああああああああああああああああああああああああああああ ああああ</p> </body> </html> /********************************************************/ どこか間違った記述がありましたらご教授頂ければ幸です。m(_ _)m 宜しくお願い申上げます。
- ベストアンサー
- JavaScript
- 特定のclassが含まれていたら
以前、こちらで特定のclassを表示、非表示にする方法を教えていただいたのですが、特定のclassが含まれているタグに対して表示、非表示にしたいと思いまして、質問させていただきました。 現在は<div class="a">a</div>に対して行っており、これを <div class="a b">ab</div>のような感じにも対応したいと考えております。 現在使っているスクリプトは下記になります。 どなたかご教授ください。 宜しくお願いいたします。 function change(site){ if(!document.getElementsByTagName){return;} var cname = new Array(); cname["default"] = new Object("a" == site ? "":"none"); cname["homes"] = new Object("b" == site ? "":"none"); cname["suumo"] = new Object("c" == site ? "":"none"); var objs = document.getElementsByTagName("*"); for(var i=0;i<objs.length;i++){ if(cname[(objs[i].className)] != undefined){ objs[i].style.display = cname[(objs[i].className)]; } } s_n = document.getElementById('site_name'); s_n.value = site; }
- ベストアンサー
- JavaScript
- JavaScriptエラーについて
お世話になります。 おわかりになる方、ぜひ教えてください。 タブメニューのボタンを押すと、内容が切り替わるというJavaScriptなのですが、いちよう正常に動作はしているようなのですが、エラーがでてしまいます。 エラーを無くしたいのですが、どうすればいのでしょうか？ 【エラー内容】 'document.getElementById()'はNullまたはオブジェクトではありません。 【HTML】 <div id="javascript_tab_sample"> <ul> <li><a href="#W3C">W3C</a></li> <li><a href="#xhtml">xhtml</a></li> </ul> <dl id="w3c"> <p>内容1</p> </dl> <dl id="xhtml"> <p>内容2</p> </dl> </div> 【JavaScript】 window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('w3c'), document.getElementById('xhtml') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } よろしくお願いします。
- ベストアンサー
- JavaScript
- javascript ボタンを非表示にしたい
javascriptを学習しています。 3回目以降は追記できないようにしましたが、ボタンを非表示に出来ておりません。 どなたかご教授お願いいたします。 <!DOCTYPE html> <html> <head> <title>アカウント登録</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="base container"> <div class="row"> <h1>アカウント登録</h1> </div> <div class="row"> <div class="card" id="card"> <div class="card-block"> <form id="form-area" class="form-inline" method="post"> <div class="form-group"> <div class="input-group"> <input id="namae" name="namae" type="text" class="form-control" placeholder="名前"> </div> </div> <div class="form-group"> <div class="input-group"> <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム"> </div> </div> <div class="form-group"> <input id="tuikaBtn" type="button" name="touroku" value="追加"> </div> <table id="result-table"> <thead> <tr> <th>名前</th> <th>ニックネーム</th> <th>削除</th> </tr> </thead> </table> </form> <div id="tuikaMoto"> </div> <div id="result"></div> </div> </div> </div> </div> </div> <div id="overLay"> </div> <script> class NameTable { constructor() { this.data = []; this.table = document.getElementById('result-table'); this.tbody = this.table.createTBody(); this.btn = document.getElementById("tuikaBtn"); this.input_namae = document.getElementById("namae"); this.input_nickname = document.getElementById("nickname"); } handleEvent(e) { if (e.target === this.btn) { const name_value = this.input_namae.value, nickname_value = this.input_nickname.value; if (this.checkTsuika(name_value, nickname_value)) { this.pushData(name_value, nickname_value); this.createTable(); }; } else if (e.target.matches('.del')) { this.clickDel(e.target); } } pushData(name, nickname) { /* DBなどに追加する場合は、ここでfetchなどで通信 */ this.data.push({ name: name, nickname: nickname }); window.alert(`「[${name}]さん[${nickname}]にて登録しました。」`); this.input_namae.value = ''; this.input_nickname.value = ''; if (this.data.length > 2) { Object.assign(this.btn, { value: '', disabled: true, }); } } createTable() { while (this.tbody.firstChild) { this.tbody.removeChild(this.tbody.firstChild); } this.data.forEach(d => { const tr = this.tbody.insertRow(-1); tr.insertCell(0).appendChild(document.createTextNode(d.name)); tr.insertCell(1).appendChild(document.createTextNode(d.nickname)); const input_del = document.createElement('input'); Object.assign(input_del, { type: 'button', value: '削除', className: 'del', }); tr.insertCell(2).appendChild(input_del); }); } checkTsuika(name, nickname) { if (name === "" || nickname === "") { return false; } return window.confirm(`「[${name}]さん[${nickname}]を登録します。よろしいですか？」`); } clickDel(target) { /* fetchなどで削除を送信 */ const dels = [...this.tbody.querySelectorAll('.del')]; this.data = this.data.filter((_, i) => dels[i] !== target); this.createTable(); Object.assign(this.btn, { value: '追加ボタン', disabled: false, }); } } // 実行 window.addEventListener('DOMContentLoaded', () => { const table = new NameTable(); document.addEventListener('click', table, false); }); </script> </body> </html>
- 締切済み
- JavaScript
お礼
ご回答ありがとうございます。 説明不足ですみません。 クラス名「addclass_knowhow_changeclass」の 文頭がaddclassのクラスにマッチさせて、 クラス名を追加するノードのidがknowhowの部分で、 追加するクラス名がchangeclass部分になります。 予約語のような感じで、 addclass_body_changeclass addclass_parent_changeclass addclass_this_changeclass の3つだけはidではなく、 それぞれ該当のタグにクラスが追加されます。 明日いただいた内容も試させていただきたいと思います。 よろしくお願いします。
補足
早速、試してみました。 動作はこのようなことを望んでいます。 ありがとうございます。 これのid部分をclassにしたいです。 formなどシステムがらみとのバッティングを回避したいので、 設計段階で追加したid（例えばnaviやheader、footerなど）以外は、 極力idは追加したくないからです。 元からあるidに対して、 ごく一般的なcssコーダーがclassの追加のみで制御することができる 汎用スクリプトを考えています。