- 締切済み
コードの意味(どのようなイベント発生など)を調べて
think49の回答
- think49
- ベストアンサー率59% (285/482)
おそらく「質問の範囲が広すぎる」が根本的な問題です。 https://ja.stackoverflow.com/help/mcve 回答されても理解できないのは前提となる基礎知識が大きく欠けているからです。 JavaScriptとDOMについて基礎的なAPIを全て頭に叩き込んでから、本課題に取り組んでください。 自分の力量を大きく超える課題に取り組んでも時間を浪費するだけです。 https://developer.mozilla.org/ja/docs/Learn/JavaScript https://developer.mozilla.org/ja/docs/DOM --- 二次被害が広まらないよう書いておきますが、amaryllis_watchさんが出しているコードは IE, Android(Google Chrome)が動作要件に入っています。 https://teratail.com/questions/144292 > amaryllis 2018/09/03 13:30 > jun68yktさん、気づいた点があります。 > 1つめは、IE系ブラウザに対応してない。 > 2つめは、AndroidでGoogle Chromeのブラウザで小数点入力が出来ない(坪単位入力欄)。 ちなみに、この質問はteratailのamaryllis名義で質問されている内容と同一なので、これから回答する方はマルチポスト先で同じ内容が回答されていないか確認した方が良いです。 https://teratail.com/users/amaryllis#question Re: amaryllis_watch さん
関連するQ&A
- 取得した要素がインライン要素かブロック要素かを判定する方法はないでしょうか？
下の様に取得した要素が、インライン要素かブロック要素かを判断する方法はないでしょうか？ document.onclick = function(evt){ var e = evt?evt.target:event.srcElement; for (i in e.parentNode.childNodes){ if(e.parentNode.childNodes[i].nodeType ==1 && e.parentNode.childNodes[i] != e){ if(e.parentNode.childNodes[i].style.display =="none"){ alert(e.parentNode.childNodes[i].tagName); /* ブロック要素かインライン要素かを判定したい！*/ /* インライン要素 */ e.parentNode.childNodes[i].style.display = "inline"; /* ブロック要素 */ e.parentNode.childNodes[i].style.display = "block"; }else{ e.parentNode.childNodes[i].style.display = "none"; } } } }
- ベストアンサー
- JavaScript
- テキストボックスに文字列やタグを挿入する方法
テキストボックスのカーソルで選択した部分に文字列、もしくはタグを挿入させたいのですが、 例えば あいう｜えお｜でえおの部分をカーソルで選択して、何かボタンなどを押下すると自動で あいう<s>えお<s>といった具合にタグを挿入してほしいのです。 ホームページで調べたところ、 テキストエリアで実現する方法が下のURLでみつけたのですが、 http://archiva.jp/web/javascript/getRange_in_textarea.html テキストボックスで実行したいのですが、上の方法ではうまくいきません。 テキストボックスの場合どうすればいいのでしょうか？ どなたか回答よろしくお願いいたします。 また、上のホームページで使われているJavaScriptを載せます。 function surroundHTML(tag, obj) { var target = document.getElementById(obj); var pos = getAreaRange(target); var val = target.value; var range = val.slice(pos.start, pos.end); var beforeNode = val.slice(0, pos.start); var afterNode = val.slice(pos.end); var insertNode; if (range || pos.start != pos.end) { insertNode = '<' + tag + '>' + range + '</' + tag + '>'; target.value = beforeNode + insertNode + afterNode; } else if (pos.start == pos.end) { insertNode = '<' + tag + '>' + '</' + tag + '>'; target.value = beforeNode + insertNode + afterNode; } } function getAreaRange(obj) { var pos = new Object(); if (isIE) { obj.focus(); var range = document.selection.createRange(); var clone = range.duplicate(); clone.moveToElementText(obj); clone.setEndPoint('EndToEnd', range); pos.start = clone.text.length - range.text.length; pos.end = clone.text.length - range.text.length + range.text.length; } else if (window.getSelection()) { pos.start = obj.selectionStart; pos.end = obj.selectionEnd; } return pos; alert(pos.start + "," + pos.end); } var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer') + 1 ? 1 : 0);
- 締切済み
- その他（プログラミング・開発）
- 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
- フラグに名前を付けるには？
spflagが0なら指定ID(i)のクラスaを除いてbを付加する、1なら逆のbを除いてaを付加するスクリプトの部分。 var spflag=0 function special(i,a,b){ if (spflag==0){ document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).remove([a], ' '); document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).merge([b], ' '); spflag=1;} else{ document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).remove([b], ' '); document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).merge([a], ' '); spflag=0;} } これのspflagにiの名前を（iはID）足してIDごとのフラグ管理を行いたいのですが、どのようにするのでしょうか？
- ベストアンサー
- JavaScript
- Google Analytics トラッキングコードについて
Google Analytics トラッキングコードについて ホームページのhead部分にこのスクリプトを埋め込んでくださいとありますが、 外部のJavaScriptに埋め込む方法はないでしょうか？外部のファイルにコピペしてみたのですがトラッキングコードを認識できませんでした。 <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18744062-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
- ベストアンサー
- Googleサービス全般
- イベントevt?evt.target:event.srcElement;の意味合い
以下の理解で合っているのでしょうか？ よくイベントの取得で エレメント.onclick = function(evt){ var e = evt?evt.target:event.srcElement; } でeにイベントオブジェクトの発生元要素をセットしているのを見かけますが、 これは、ブラウザーの違いの吸収なのでしょうか？ firefoxでは、イベントハンドラー関数にイベントオブジェクトが渡されるので、渡されたイベントオブジェクトよりevt.targetで発生元要素をセットし、一方IEでは、eventという名前のオブジェクトが存在している（？）ので、イベントハンドラー関数にイベントオブジェクトが渡されず、event.srcElementで発生元要素をセットする。 ※Opera、Safariは何でも良い IEの場合、後から、イベントが追加されたらeventオブジェクトはどうなるのでしょうか？ある要素の一つのイベントタイプには一つのイベントハンドラーしか定義できないのでしょうか？
- 締切済み
- JavaScript
- appendChildを何処で書こうと、関数始めで動く物なのでしょうか
appendChildを何処で書こうと、関数始めで動く物なのでしょうか？？ javascript初心者です。 色々実験しているのですが、今理解に苦しむ状況に陥っています。 まず、要素がゆっくり下に動いた後、下の要素の子になる事を意図して書いた下のコードを見て下さい。 //スライドアクションelementをoffsetだけ1pxずつinterval毎に動かす。 function slideDownCloser(element, offset, interval){ element.style.position = "abusolute";//relativeにしても問題は同じ var pos = element.offsetTop; function goDown() { element.style.top = pos + "px"; pos += 1; if(offset>pos) { setInterval(goDown, interval); } else { element.style.position = "static"; } } return goDown; } このクロージャが返した関数を呼び出した直後にelementをappendChildで別の要素内に移そうとしても、どうやらelementが移動先の親要素を基準にして動いてしまいます。 例えば、簡単に書くとこのような関数を書いてもshitaElから100px動いてしまいます。。 function addElement(event) { var shitaEl = getElementById("shita"); var slideDown = slideDownCloser(event.target, 100, 30); slideDown(); shitaEl.appendChild(event.target); } なを、この現象はMac版のsafariとfirefoxで確認しました。。また、event.targetプロパティがIEでは読み込めないので、IEでは動かないと思います。
- ベストアンサー
- JavaScript
- FIREFOXでのpostop
現在、画像をブラウザ下から上へ移動する制御をJavaScriptにて行っております。 その際、IEでは正常に動作したのですが、FIREFOXで検証した所動作しませんでした。 原因はIEで使用した"posTop"がFIREFOXで使用できたなららしいです。 --------------------------------------------------------------- <script language=javascript> window.onload=move1; var TimeSet1 = 60; var step1 = 65; var stepcnt =0; var pos_data =0; var obj; function move1(){ stepcnt = 0; for (i = 1; i <= 5; i = i +1){ obj = document.getElementById('GridImg'+String(i)); pos_data = obj.style.posTop; pos_data = pos_data - 2; if(pos_data <= 100){ pos_data = 800; } obj.style.posTop = pos_data; } timerID1=setTimeout('move1()',TimeSet1); } </script> -------------------------------------------------------------- 上記を最小減の変更で修正したと思っております。 ご教授宜しくお願い致します。
- ベストアンサー
- JavaScript
- onclickを使わずにイベント処理をする方法について。
onclickを使わずにイベント処理をする方法について。 【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】 されるようにしたいのですが、IEで動作せず、困っています。 下記は現在のコードです。 -------------------------------------------------------------------------- var divs = document.getElementsByTagName('div'); var listener = function(ev){ if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){ var next = ev.target.nextSibling.nextSibling; if(next.style.display != "none"){ next.style.display = "none"; }else{ next.style.removeProperty("display"); } } }; if (document.addEventListener) { document.addEventListener('click', listener, false);// IE以外 } else { document.attachEvent("onclick", listener);// IE } -------------------------------------------------------------------------- <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> <div> <h1 class="text">見出し</h1> <p>本文</p> </div> -------------------------------------------------------------------------- ev.target.classNameあたりが怪しく… window.event.srcElement.classNameに変更してみましたが動作しませんでした。 html側の制約があり、出来れば上記のようなclassのみのhtmlで、 更にわがままを言うと <div class="text"> <h1>見出し</h1> <p>本文</p> </div> のようにdivにclassを振った形で実現したいです。 なお、現在のコードは複数のサンプルコードを参考に試行錯誤したものですので 不要なコードが混ざっているかもしれません。 動作確認環境はIE7、IE8、Firefox、Safari（Windows）です。 納期が迫り大変困っています。アドバイスを頂けますと嬉しいです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- プルダウンのメニューを表示を2つ設定。
プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>
- ベストアンサー
- JavaScript