javascriptでbottonクリックできない

2023/09/06 22:07

このQ&Aのポイント

javascriptを使用してウェブページの自動操作を行いたいが、button要素のクリックができない。
button要素の位置は正しいが、IDやnameがなく、classNameの属性が原因で成功しない可能性がある。
他の要素は成功しているため、異なる方法を試すか、具体的な要素情報を指定することを検討する。

ベストアンサー

javascriptでbottonクリックできない

2017/04/07 20:01

javascriptでＷＥＢの自動操作をしたいのですが、button要素のクリックが一か所だけできないんです。（他は何か所か成功してます）　button要素の位置は下記ソースで間違いないはずなんですが、ID / name もないのに加えて、classNameの属性が入ってるせいなのか、成功しません。 objIE.document.getElementById('??????').click(); ？？に何を入れていいのががわかりません・・違う方法になるのでしょうか。不躾で恐縮なのですが、お分かりの方ご教授ください。要素内容です。---------------------------- div class= panel-footer text-right tagName = BUTTON className = btn pri_sub nodeName = BUTTON id = なし name = なし outerHTML = <button class="btn pri_sub" style="border-image: none;" type="button" data-toggle="modal" data-target="#modal_dialog" data-message="更新OK?" data-action="Update" data-title="更新確認">更新</button>

100ban
お礼率41% (52/124)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

amanojaku1
ベストアンサー率54% (265/488)

2017/04/09 09:57 回答No.1

>ID / name もないのに加えて、classNameの属性が入ってるせいなのか、成功しません。 >objIE.document.getElementById('??????').click(); 「getElementById」は「Element」の「Id」からオブジェクトを「get」すると言う意味ですので「ID」が必要です。プログラムがどうなっているのか分かりませんが、まずそのタグに「ID」を設定して下さい。「ID」は一意の文字列でなければなりません、HTML内に複数の「ID」を記述してはいけません。その「ID」を下記の「'??????'」に記述して下さい。 >objIE.document.getElementById('??????').click(); ただし、タグの「ID」の定義前だと、「.getElementById(～)」でオブジェクトを取得できないと思われます。

質問者

補足 2017/04/11 12:45

御回答ありがとうございます。当方は、ｗｅｂの制作側じゃないので、ＨＴＭＬにIDの定義をすることができません・・。ボタンをクリックしたいのですが、それが何なのかが、つかめてない状態です。・・ＨＴＭＬのソースを判別し　getElementById　もしくは　all 　では　.click() ができていたのですが、　対象と思われる要素が不明なんです。 button　なのは　間違いないのですが、中にメニューが埋め込まれてる感じになってます。　「更新」と書かれてるbuttonを検索して、クリックみたいなのは、できないものなのでしょうか？大変恐縮なのですが、お力添えいただければ幸いです。

その他の回答 (1)

amanojaku1
ベストアンサー率54% (265/488)

2017/04/09 12:01 回答No.2

>HTML内に複数の「ID」を記述してはいけません。 HTML内に同じ「ID」を複数記述してはいけません。

質問者

お礼 2017/04/11 12:35

ご解答ありがとうございます。ＷＥＢの作成側じゃないのでＩＤを当方で追加したりすることができないのです・・　説明不足ですみません・

関連するQ&A

Bootstrap Javascriptでモーダル
Bootstrap で下記のようにモーダルポップアップを使っています。呼び出される要素の中にテキストボックスを置いているのですが、入力後、閉じて、再度開くと当然、入力された値が表示されます。常にテキストボックスの値をクリアしてから表示したいのですが、 javascriptからbasicModalを表示する方法が分かりません。どのようにすれば良いでしょうか。 <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">選択</a> <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <input id="Text1" type="text" value="" name="gyo_cef" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> </div> </div> </div> </div>
- ベストアンサー
- JavaScript
2度押し防止のJavascript
先日、「買い」のボタンを押すと、100購入～800購入までがずらりと出てくるJavascriptをこちらでお教えいただきました。(ONEONE様　有難うございます) その際、「買いのボタン」の2度押し防止スクリプトも同時に組んでいただきました。それが末尾のスクリプトになります。質問買いボタンの2度押し防止は出来ていますが、100購入　200購入　300購入の連続買いができてしまう状況です。この連続買いの防止のjavascriptをご教示いただければと思います。当方は、 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#b_btn").click(function (e) { $(this).prop("disabled", true); }); }); </script> としてみたのですが、うまく行きませんでした。よろしくお願いいたします。 *************************************************************************** 現状 (買いボタンの2度押し防止は機能しているが　　　　100購入　200購入の連続買いができる状態) *************************************************************************** <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b_btn" type="submit" name="b100" value="100">100購入</button><br> <button id="b_btn" type="submit" name="b200" value="200">200購入</button><br> <button id="b_btn" type="submit" name="b300" value="300">300購入</button><br> <button id="b_btn" type="submit" name="b400" value="400">400購入</button><br> <button id="b_btn" type="submit" name="b500" value="500">500購入</button><br> <button id="b_btn" type="submit" name="b600" value="600">600購入</button><br> <button id="b_btn" type="submit" name="b700" value="700">700購入</button><br> <button id="b_btn" type="submit" name="b800" value="800">800購入</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); }); </script> ***********************************************************************
- ベストアンサー
- JavaScript
javascript クイズ
こちらの　http://okwave.jp/qa/q4105194.html 回答のNo.4の回答者様のソースコードなのですが <html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした！ <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です！ <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいますこれを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか？よろしくお願いします。
- ベストアンサー
- 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
クリックファンクションがうまくいかない
class="link-block"のついたliつまりリストをクリックした時、.removeClass('active');でactiveというクラスを削除するようにしたかったのですが、なぜかリストをクリックしても反応せずに削除されません。 id="maware"のliだけは、反応して削除されます。 CSSにとしてもだめでした。どうもclass="link-block"のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか？ .link-block { display: block; z-index: 99999; } ・ソースコード <div class="kuruttosuru">aaa</div>   <div class="modal-button-wrap"> <a class="animation-hover action-hover modal-button-wrap__button"> <span class="modal-button-wrap__border"></span> <span class="modal-button-wrap__border"></span> <span class="modal-button-wrap__border"></span> </a> </div>  <nav> <div id="nav__drawermenu-wrap"> <ul> <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav>  ・JS <script> $(function(){ $('.kuruttosuru').on('click', function() { $(this).addClass('active'); return false; }); }); </script>  <script> $(function(){ $('.modal-button-wrap__button, .link-block').on('click', function() { $(this).removeClass('active'); return false; }); }); </script> ・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。下記に何かおかしくなる要素があるのでしょうか？  <script> $(function(){ // #で始まるアンカーすべてをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> _____________
- ベストアンサー
- JavaScript
クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- JavaScript
javascriptの質問です。
<button type="button" class="btn" id="b_send" > <img class="ic2" width="25" height="25" src="../css/icon/paper44.png"><img class="ic2w" width="25" height="25" src="../css/icon/paper44.png">送信　<span> CTR + ENTER </span> </button> とあるのですがjavascriptで送信しようとしても送信できません。普通のサイトでは押したら送信されるはずなのにできません。これはどうすればできるでしょうか。回答よろしくお願いします
- ベストアンサー
- 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
クリックファンクションがうまくいかない
クラス名drawermenuをクリックしたときにドロワーメニューが出たり消えたりする作りなのですが、リストの中にグーグルサイト内検索を入れたところ検索しようと検索ボックスを選択するとドロワーメニューが消えてしまいます。親divについていると子にある要素をクリックしても親をクリックしたことになってしまうのでしょうか？そうであれば検索ボックスを選択した時だけ実行されないようにするにはどうしたらよいのでしょうか？jqueryを使っています。 <nav> <div id="js-drawermenu-button-animation" class="drawermenu"> <ul> <li class="drawermenu__item"> </li> <li class="drawermenu__item"> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> <div> <input type="hidden" name="cx" value="" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="55" /> <input type="submit" name="sa" value="検索" /> </div> </form> <script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang..."></script> </li> </ul> </div> </nav> ｊｓ $(function(){ $('.modal-button-wrap, .drawermenu').on('click', function() { $('.drawermenu').toggleClass('showmenue'); }); });
- ベストアンサー
- JavaScript
JavaScript ボタンで指定の箇所を変更する方法
よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。【やりたい事】１．ボタンを作りたい水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わりもう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。（水色→紫色→赤色→水色→紫色→・・・）２．行単位・列単位で一括で変更したい縦１、または横１などのボタンを押下するとボタンに対する行or列のボタン全てが一括で変更されるようなものをつくりたいという事を行いたいと思い、色々調べてみたのですが、発見できませんでしたので質問させていただきました。どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦1<br><input type="button" name="tate_btn001" id="x1y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(1)"/></td> <td>縦2<br><input type="button" name="tate_btn002" id="x2y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(2)"/></td> <td>縦3<br><input type="button" name="tate_btn003" id="x3y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(3)"/></td> </tr> <tr> <td>横1 <input type="button" name="yoko_btn001" id="x0y1" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(1)"/> </td> <td><input type="button" name="btn001" id="x1y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn002" id="x2y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn003" id="x3y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横2 <input type="button" name="yoko_btn002" id="x0y2" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(2)"/> </td> <td><input type="button" name="btn004" id="x1y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn005" id="x2y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn006" id="x3y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横3 <input type="button" name="yoko_btn003" id="x0y3" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(3)"/> </td> <td><input type="button" name="btn007" id="x1y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn008" id="x2y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn009" id="x3y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript