matter.jsのイベントについて教えてください| OKWAVE

matter.jsについて教えてください。

いろいろなサイトのサンプルコードを参考にさせていただきながら、matter.jsを使って物理エンジンでの表現を勉強してます。なんとか、10個のボールを生成し、そのボールを掴んで移動するところまではできました。ボールを掴んで移動させるのではなく、１０個を区別して、どのボールをタッチしたのかを表示させていのですが、どのようにすればよいでしょうか？ <!doctype html> <html> <head> <meta charset="utf-8"> <title>matter.js demo</title> <script src="matter.js"></script> </head> <body> <div id="matter"></div> <script> const engWidth = 680; const engHeight = 400; const wall = 10; const ball = 20; var ballSize = 20; var objs = []; var engine = Matter.Engine.create(document.getElementById("matter"), { render: { options: { wireframes: false, width: engWidth, height: engHeight, background: "rgba(0, 0, 0, 1)" } } }); objs.push(Matter.Bodies.rectangle(engWidth/2, wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth-wall/2, engHeight/2, wall, engHeight, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth/2, engHeight-wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(wall/2, engHeight/2, wall, engHeight, {isStatic: true})); for (var i = 0; i < ball; i++) { var x = Math.random()*engWidth; var y = Math.random()*engHeight; objs.push(Matter.Bodies.circle(x, y, ballSize, { render:{ fillStyle: "#FFFFFF"} })); } Matter.World.add(engine.world, objs); var MouseConstraint = Matter.MouseConstraint; var mousedrag = MouseConstraint.create(engine, { element: document.getElementById("matter").childNodes[0], }); Matter.World.add(engine.world, mousedrag); Matter.Engine.run(engine); </script> </body> </html>

matter.jsのテクスチャーについての質問

matter.jsを学び始め、 matter.jsの基本的な機能を使ったサンプル集 https://mmsrtech.com/entry/2022/10/16/210254 このサイトのサンプルを参考にさせていただき、勉強しています。サンプルの中のオブジェクトの表示切り替え、削除、総数のカウントのコードを触りながらいろいろ試しています。サンプルの2か所を変更して、クリックで生成される円の半径を１５に固定して、テクスチャーを張ろうとしてるのですが、テクスチャーが貼れません。何も反応しなくなります。どのようにすれば、テクスチャーが貼れますか？ // 使用モジュール const Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, Body = Matter.Body, Bodies = Matter.Bodies, Composite = Matter.Composite, Composites = Matter.Composites, Vector = Matter.Vector, Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, Events = Matter.Events; // エンジンの生成 const engine = Engine.create(); // 物理演算canvasを挿入する要素 const canvas = $('#canvas-area')[0]; // レンダリングの設定 const render = Render.create({ element: canvas, engine: engine, options: { width: 800, height: 600, } }); // マウス、マウス制約を生成 const mouse = Mouse.create(canvas); const mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { render: { visible: false } } }) Composite.add(engine.world, mouseConstraint) render.mouse = mouse // レンダリングを実行 Render.run(render); // エンジンを実行 Runner.run(engine); /** * 以下、各例毎に処理を記述する */ $('body').append('<p class="body-counter">Number of balls : <span></span></p>'); $('body').append('<button>Clear</button>'); // ボール用Compositeを生成する【⑬】 const ballComposite = Composite.create(); Composite.add(engine.world, ballComposite); // 静止オブジェクト（空中の床と画面外落下判定オブジェクト）【⑭】 const floor = Bodies.rectangle(400, 400, 500, 30, { isStatic: true }); const pit = Bodies.rectangle(400, 900, 50000, 30, { isStatic: true, label: 'pit' }); Composite.add(engine.world, [floor, pit]); // クリックした位置に円を生成とballCompositeへの追加 Events.on(mouseConstraint, 'mousedown', e => { // ドラッグ中は生成しない if (mouseConstraint.body) { return } // 半径はランダム（10〜30） //const min = 10; //const max = 30; //ここを変更/////////////////////////////////////////////////////////////// const radius = 15; ///////////////////////////////////////////////////////////////////////////// const ball = Bodies.circle( e.mouse.position.x, e.mouse.position.y, radius, { restitution: 0.5 }, //ここを変更//////////////////////////////////////////////////////////// render: { sprite: { texture: 'img/ball.png'}} ////////////////////////////////////////////////////////////////////////// ); Composite.add(ballComposite, ball); }); // Engineモジュールに対するイベント/衝突の発生を検知する【⑮】 Events.on(engine, 'collisionStart', e => { $.each(e.pairs, (i, pair) => { // 画面外落下判定オブジェクトに衝突したボールを削除する if (pair.bodyA.label === 'pit') { Composite.remove(ballComposite, pair.bodyB); } }) }); // Compositeへのオブジェクト追加を検知してボール総数の表示を更新する【⑯】 Events.on(ballComposite, 'afterAdd', e => { // Eventオブジェクトを直接参照してCompositeに含まれる全bodyを取得 $('p.body-counter span').text(e.source.bodies.length); }); // Compositeからのオブジェクト削除を検知してボール総数の表示を更新する【⑯】 Events.on(ballComposite, 'afterRemove', () => { // Composite#allBodies()を利用してCompositeに含まれる全bodyを取得 $('p.body-counter span').text(Composite.allBodies(ballComposite).length); }); $('button').on('click', () => { // ボールを一括削除する【⑰】 Composite.clear(ballComposite); $('p.body-counter span').text(0); })

このJavaScriptソースを解説して下さい

JavaScript勉強中です。とあるサイトのソースの一部なのですが何が書いてあるのかわかりません。どなたか解説してください。 ----------ソースここから---------- <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-23877599-2']); _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> ----------ソースここまで---------- 全体的にわからないのですが、1行目だけでも教えてください。 var宣言で、論理和？(||)が使われてて、さらに配列？らしき括弧が続いてます。これはなんという構文なのですか？

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>

このソースはJavaScriptですか？

Webサイトの作成のためにJavascriptやJQueryについて勉強しようと思っており、いろんなサイトを調べてみたら、次のようなソースが書かれていることが多いです。 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-746118-2']); _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); })(); たぶんJavaScriptかJQueryだと思いますが、これは一体どのような命令文なのでしょうか？このソースを多くのサイトで使っているのならば、私も試してみたいと思っております。初心者ですが、宜しくお願い致します！！

以下のJAVASCRIPTが、動作しないのですが、その原因がわかりませ

以下のJAVASCRIPTが、動作しないのですが、その原因がわかりません。助けてください <html> <head> <script type="text/javascript"> var x=200,y=100; var dx=10,dy=10; function move() { setTimeout("move()",100); var ball=document.getElementById("ball"); x+=dx; y+=dy; ball.style.left=x; ball.style.top=y; if (x<=50 || x+10>=450) dx=-dx; if (y<=50 || y+10>=450) dy=-dy; } </script> </head> <body onLoad="move()"> <img src="wall.png" style="position:absolute;left:46;top:46"> <img id="ball" src="ball.png" style="position:absolute;left:200;top:100"> </body> </html>

Ajaxで表示させると内容が不変

下記Ajaxでtest.txtを表示できたのですが test.txtの内容を Hello Japan. 変えてもブラウザのキャッシュをクリアしない限り Hello World! が出つづけます。下記ページにキャッシュ無効のヘッダをつけても同じです。子の問題を解決する手段を教えてください。 test.txt: Hello World! x.html: <script> var xmlHttp; function loadText() { 　if (window.XMLHttpRequest) 　{ 　　xmlHttp = new XMLHttpRequest(); 　} 　else 　{ 　　if (window.ActiveXObject) 　　{ 　　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 　　} 　　else 　　{ 　　　xmlHttp = null; 　　} 　} 　xmlHttp.onreadystatechange = checkStatus; 　xmlHttp.open("GET","test.txt",true); xmlHttp.send(null); } function checkStatus() { if (xmlHttp.readyState==4&&xmlHttp.status==200) { var node = document.getElementById("disp"); node.innerHTML = xmlHttp.responseText; } } </script> <form> <input type="button" value="push" onClick="loadText()"> </form> <div id="disp"></div>

chart.js4.2でカラー設定をする方法

過去にこのサイトでchart.js2.9を使い複数グラフを表示する方法(https://okwave.jp/qa/q9834370.html)を教えてもらいましが、今回v.4.2にそれを適用するにあたりプラグインのカラー設定に代わる方法がないかと試行を繰り返し、素人のため無理筋の方法ですが下記のコードまで至りました。そこで、このお粗末なコードを適切なものに手直ししていただきたくお願い申し上げます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 100%;" > <div class="chart1" style="float: left;width:300px; height:250px" > <canvas id="myChart1"></canvas></div> <div class="chart2" style="float: right;width:300px; height:250px"> <canvas id="myChart2"></canvas></div> <div class="chart3" style="bottom: 0;float: left;width:300px; height:250px"> <canvas id="myChart3"></canvas></div> <div class="chart4" style="bottom: 0;float: right;width:300px; height:250px"> <canvas id="myChart4"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script> <script> function displayChart(canvasId, chartType, datasets, options) { var ctx = document.getElementById(canvasId); var myPieChart = new Chart(ctx, { type: chartType, data: { labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // Ｘ軸のラベル datasets: datasets }, options: { plugins: { //responsive: false, title: { display: options.title.length > 0, // タイトルがあれば表示 text: options.title }, legend: { // 凡例 display: true, // 表示の有無 position: options.legendPosition, // 表示位置 labels: { usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか } } } } }); } const color1 = ['red','green','skyblue']; const mycolor = ['rgb(221,160,221)','rgb(228,0,127)','rgb(160,216,239)','rgb(146,7,131)','rgb(0,153,68)','rgb(255, 215, 0)','rgb(0,158,150)']; const label1 = [ {label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000],backgroundColor:mycolor}, {label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000],backgroundColor:mycolor}, {label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000],backgroundColor:mycolor} ]; const datasets = [ {label: label1[0].label,data: label1[0].data,backgroundColor:color1[0]}, {label: label1[1].label,data: label1[1].data,backgroundColor:color1[1]}, {label: label1[2].label,data: label1[2].data,backgroundColor:color1[2]} ]; displayChart('myChart1', 'bar', datasets,{ title: '', usePointStyle: false, legendPosition: 'top', }); for (var i = 0; i < 3; i++) { displayChart("myChart".concat(i + 2), 'pie', [label1[i]], { title: label1[i].label, backgroundColor:mycolor, usePointStyle: true, legendPosition: 'left' }); } </script> </body> </html> 特にbackgroundColorの設定をoptionで設定出来ないかと思いましたが方法が分かりませんでしたのでこのようなコードをに成り果てました。また、カラースキーム組み合わせは別の手段を使って作りコピペしているのですがこれも貧弱なものですので、使えるプラグインがあればご教授お願いいたします。

雑誌のスクリプトの意味がわかりせん２

スクリプトと解らない点を載せさせていただきました。もしよければ教えて下さい。800字を超えないためにギュウギュウで記述しましたのでかなりややこしくなっていますが、お願いいたします。 ●MCの写りこみを作成するスクリプトです。引数に３つのMCを渡しています。 CreateReflect = function (OriginalTG, DisplayTG, MaskTG) { var OriginalBMP = new flash.display.BitmapData(OriginalTG._width, OriginalTG._height, true, 0); var DisplayBMP = OriginalBMP.clone(); //OriginalBMPと全く同じオブジェクトを新しくDisplayBMPとして作成？ var MaskBMP = new flash.display.BitmapData(MaskTG._width, MaskTG._height, true, 0); OriginalBMP.draw(OriginalTG); MaskBMP.draw(MaskTG); DisplayTG.attachBitmap(DisplayBMP, 1); //ここが理解できなかったとこなのですが、これは完全に透明なビットマップを割り当てているって事ではないのでしょうか？ var DisplayRectangle = new flash.geom.Rectangle(0, 0, MaskTG._width, MaskTG._height); var OffSetPoint = new flash.geom.Point(0, 0); var BasePoint = new flash.geom.Point(0, 0); //マスクを適用する際のサイズとxとyの値を設定するために定義してる？ DisplayBMP.copyPixels(OriginalBMP, DisplayRectangle, OffSetPoint, MaskBMP, BasePoint, true); //これはビットマップオブジェクトのDsplayBMPにOriginalBMPをアルファーをかけた上体でコピーするって事だと思うのですが、この後にDisplayBMPをattachする必要はないのでしょうか？上記の方でDisplayTG.attachBitmap(DisplayBMP, 1);を定義してるから？とここらへんで解らなくなってしまいました。 //attachBitmapをした後にattach元のビットマップを変更すると自動的にattachされたムービークリップに反映されるという事でしょうか？};

CSS（スタイルシート）を切り替えるJavascriptについて

CSS（スタイルシート）を切り替えるJavascriptについて現在、表題のスクリプトサンプルに少し変更を加えたいと思い悩んでいます。その内容ですが、サンプルでは切り替えるCSSの数だけボタンを配置する仕組みのようなのですが、当方では切り替えたいCSSが1種のため、ボタンもON/OFFのような単体にできればと思っています。既存のラジオボタンやプルダウンメニューなどを使用した例はいくつか紹介されていましたが、できれば画像を用いたボタンで作りたいと考えています。以下、サンプルからの抜粋となりますが、もしもご存知の方がいらっしゃいましたら回答いただけますと幸いです。 /* html */ <head> <link rel="stylesheet" type="text/css" href="/mode1.css" /> <link rel="alternate stylesheet" type="text/css" title="change" href="/mode2.css" /> </head> <body> <div class="mode"> <a href="javascript:selectMode('none')"><img alt="1" src="/mode1.gif" width="10" height="10" /></a> <a href="javascript:selectMode('change')"><img alt="2" src="/mode2.gif" width="10" height="10" /></a> </div> </body> ※ボタンに使用する画像は1種でも構いませんので、<a>タグをひとつにしてselectMode( )内の値をJavaの方で制御できないでしょうか？ /* javascript */ function setMode(title) { var i, objs for(i=0; (objs=document.getElementsByTagName("link")[i]); i++) { if(objs.getAttribute("rel").indexOf("style") != -1 && objs.getAttribute("title")) { objs.disabled = true if(objs.getAttribute("title") == title) objs.disabled = false } } } function selectMode(styletitle){ if (document.getElementById){ setMode(styletitle) } } 言葉たらずの質問ですが、どうぞよろしくお願いします。

ネットバンクのログイン画面に入れない

初めて質問させていただきます。私の環境はWINXPで最近クリーンインストールしたのですが、IE６でスクリプトのエラーらしきものがでてそれまで入れたネットバンク関係（イーバンク・ソニーバンク）のログイン画面に入れなくて困っています。その画面のソースを見たところ、大体が  というソースで、Window.openでのエラーらしきものがおこっています。（あまり詳しくないので推測なのですが。ーー;) セキュリティーソフトでノートンセキュリティーワークスとノートンファイヤーウォールを入れていますが、これが原因なのかもわかりません。（ためしにファイヤーウォールを切ってセキュリティーワークスのクリーンアップをして、再アクセスしてみても駄目でした）解決策を教えていただければ助かります。よろしくお願いします。

htmlフォームでチェックボックスの入力漏れを警告

チェック必須にしたいのですが、出来ません。以下のようにnameの所に name="kurasu[1]" と入れています。他の処理もあるので、そのような入れ方をしています。 <input type="checkbox" name="kurasu[1]" id="kurasu1" value="1" /> <input type="checkbox" name="kurasu[5]" id="kurasu5" value="5" /> <input type="checkbox" name="kurasu[8]" id="kurasu8" value="8" /> としてあるので、以下のように if(!document.form.kurasu[1].checked　&& !document.form.kurasu[5].checked && !document.form.kurasu[8].checked){ として、アラートを出したいのですが、出来ません。やはり　kurasu[1]　では出来ないでしょうか？他のものは以下で処理しています。 <script type="text/javascript"> function check(){ var flag = 0; var errorMes = new Array(); var chkCount = 0; if(!document.form.tel.checked){ // 「電話番号」の記入をチェック flag = 1; errorMes.push("「電話番号」をご記入ください。\n"); } if(flag){ var n = errorMes.length; var errorStr =""; for(i=0;i<n;i++){ errorStr+= errorMes[i]; } window.alert(errorStr); // 記入漏れがあれば警告ダイアログを表示 return false; // 送信を中止 }else{ return true; // 送信を実行 } } </script>

html標識について勉強中！回答。お願いします

<?xml version="1.0" encoding="UTF-8"?> <!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" id="tbod" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>黒ずみ解消！ケノン脱毛器でワキ脱毛した！≪感想＆体験談≫</title> <meta name="description" content=" ≪このページでは、ケノンでワキ脱毛した赤裸々な脱毛経過写真を大公開中です！≫ ..." /> <meta name="keywords" content="２ｓ,脱毛器ケノン体験中！本当の口コミ＆効果" />  <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="http://tsugaru-hirosaki.jp/styles-base.css" type="text/css" /> <link rel="alternate" type="application/atom+xml" title="Recent Entries" href="http://tsugaru-hirosaki.jp/atom.xml" />  <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-22049822-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> </head> htmlについて初心者なのでいくつか質問させてください。（分かりやすく回答頂けると助かります）１．<?xml version="1.0" encoding="UTF-8"?> <!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" id="tbod" lang="ja" xml:lang="ja"> ２・<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ３・ <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="http://tsugaru-hirosaki.jp/styles-base.css" type="text/css" /> <link rel="alternate" type="application/atom+xml" title="Recent Entries" href="http://tsugaru-hirosaki.jp/atom.xml" />  <script type="text/javascript"> ４・var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-22049822-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); })(); それぞれどういう意味のhtml標識なのでしょうか？また、画像などもこのサイトあるのですが、その画像はどこかしらから取ってきているのか自作で作ったのを使ってるのかとか分かりませんか？勉強をしており、似たようなサイトを作っていきたいので、質問させていただきました。

サイトマップを自動作成できません。

最近ＨＰを作成した超初心者で、サイトマップの作成ができず原因が皆目見当つかず行き詰ってしまいました。サイトマップを自動生成してくれる「sitemap.xml Editor」を利用しているのですが index.html以外のページをサイトマップ化できません。 sitemap.xml Editor https://www.sitemapxml.jp/ ネット上で確認すると、index.htmlのリンクから他のページを表示することができます。現在、ページ数はindex.htmlを含め20程です。先頭のタグは全て共通で下の通りです。基礎的な質問で恐縮ですが、解決のヒントなど教えていただけないｄしょうか？よろしくお願いします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="説明文" /> <meta name="keywords" content="キーワード" /> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/common.js"></script> <title>タイトル</title> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-28512541-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> </head>

IE8で種類が一致しませんとエラーが出てしまいます

初めて質問させていただきます。 javascriptは、勉強しだした全くの初心者ですがよろしくお願い致します。自分で作ったHPで、写真をボタンで順に切り替えるページがあり、ちょうどYahooの知恵袋でぴったりのソースを書いていらっしゃる方をみつけ、参考にさせてもらってページを作ったのですが、先日IE8で確認したところ、種類が一致しませんとエラーが出てしまいました。safariやFirefox(MacでもWindowsでも）では問題ありません。自分で手直しした部分の可能性もあるため、参考にした元のソースで、テストのページを作ってみましたが、やはり同じ　divIMG.appendChild(ary[idx]);　の行がだめなようです。テストのページアドレス http://www.ne.jp/asahi/coo/pipi/ ここでは5枚の画像を入れてありますが右のボタンで5枚目を表示した後さらに押すとエラーになります。下の方　divIMG.appendChild(ary[idx]);の部分でエラーが出ます。 lightbox 等画像を順送りで閲覧出来る方法もあるようですが、実際のHPはこの方法で物件ごとのぺージを沢山作ってしまっているので部分的にソースを修正して回避出来ないものかと考えております。自分でも調べてみましたが、全く頭がついていきません。なにとぞよろしくお願い致します。質問の文字数制限にかかるのでscriptの部分だけ書きます。 <script type="text/javascript"> var ary = []; var idx = 0; var divIMG; var btnF; var btnP; var btnE; var btnT; var aryImgURL = [ 'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg'] function preload(imgs) { for (var i = 0; i < imgs.length; i++) { var elmIMG = new Image(); elmIMG.src = imgs[i]; ary.push(elmIMG); } } function test(e) { var tgt = e.srcElement ? e.srcElement: e.target; switch (tgt.id) { case 'fbtn': if (idx < aryImgURL.length) { idx++; } break; case 'tbtn': idx = 0; break; case 'ebtn': idx = aryImgURL.length - 1; break; case 'pbtn': if (idx > 0) { idx--; } break; } showImage(); changeButtonStatus(); } function showImage() { while (divIMG.hasChildNodes()) { divIMG.removeChild(divIMG.firstChild); } divIMG.appendChild(ary[idx]); } function changeButtonStatus() { if (idx == 0) { btnP.disabled = true; btnT.disabled = true; } else { btnP.disabled = false; btnT.disabled = false; } if (idx == aryImgURL.length - 1) { btnF.disabled = true; btnE.disabled = true; } else { btnF.disabled = false; btnE.disabled = false; } } window.onload = function() { divIMG = document.getElementById('imgarea'); btnF = document.getElementById('fbtn'); btnP = document.getElementById('pbtn'); btnE = document.getElementById('ebtn'); btnT = document.getElementById('tbtn'); preload(aryImgURL); showImage(); changeButtonStatus(); } </script>

javascriptで困っています。教えてください

jQueryMobileを使って地図を表示したいと思っています。４か所にマーカーを表示させ、そのマーカーをクリックするとそれぞれのurlに飛ぶようにしたいのですが、うまくいきません。for文の中のgoogle.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;});のところがおかしいのでしょうか？myMarkerを名前を変えながらgoogle.maps.event.addListenerをしていかないとだめなのでしょうか？教えてください。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Google マップの表示</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <style type="text/css">  </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> $(function() { var data = new Array();//マーカー位置の緯度経度 data.push({position: new google.maps.LatLng(35.681382, 139.766084), content: '東京駅', url:'http://www.jreast.co.jp/estation/stations/1039.html'}); data.push({position: new google.maps.LatLng(34.809445,135.532408), content: '太陽の塔', url:'http://park.expo70.or.jp/'}); data.push({position: new google.maps.LatLng(43.062584,141.353627), content: '時計台', url:'http://www15.ocn.ne.jp/~tokeidai/'}); data.push({position: new google.maps.LatLng(26.694183,127.877963), content: '美ら海水族館', url:'http://oki-churaumi.jp/'}); var latlng = new google.maps.LatLng(36.449567,137.636719); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 　　　for (i = 0; i < data.length; i++) { 　　　var myMarker = new google.maps.Marker({ position: data[i].position, map: map, icon: "km.png" }); google.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;}); } $('#map_content').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng); }); }); </script> </head> <body> <div data-role="page" id="map"> <div data-role="header"> <h1>Google マップの表示</h1> </div> <div data-role="content" id="map_content"> <div id="map_canvas"></div> </div> <div data-role="footer"> <h4>© map</h4> </div> </div> </body> </html>

JSのイベントターゲットが難しい

JSのイベントターゲット (EventTarget)が難しくてよくわからないのですが初心者にもわかるように解説していただけるとありがたいです。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget イベントターゲット(EventTarget)は、DOMイベントを受け取り、それらへのリスナーを持つことが出来るオブジェクトによって実装されるDOMインターフェースです。 Elementと、 documentと、 windowは、ほとんどの共通イベントターゲットですが、例えば、XMLHttpRequest、AudioNode、AudioContextなど、他のオブジェクトもエベントターゲットになることが可能です。多くのイベントターゲット(Element、document、windowを含む)は、 onXXXプロパティと属性を介して、イベントハンドラの設定もサポートします。メソッド .addEventListener() 要素にイベントハンドラを登録します。 .dispatchEvent() DOM内のノードのイベントを実行します。 .removeEventListener() EventTarget.addEventListenerを使用して登録されたイベントリスナーを削除します。イベントを発動させる要素につけるイベントファンクションのようなものなのでしょうか？

wordpressにjqueryを使う

wordpress初心者の者です。現在wordpressで海外のテンプレートを使っています。その中で、wookmarkというjqueryを固定ページに使いたいのですが、 jqueryの元ファイルのhtmlのコードの中に、下記のようなリンク部分があるのですが、１行目の「jquery.min.js」は読み込む必要ありますでしょうか？  <script src="../libs/jquery.min.js"></script>  <script src="../libs/jquery.imagesloaded.js"></script>  <script src="../jquery.wookmark.js"></script> またその下に下記のような記述があるのですが、これはヘッダーに貼付ければよろしいのでしょう？？ご存知の方教えてください。  <script type="text/javascript"> (function ($){ $('#tiles').imagesLoaded(function() { // Prepare layout options. var options = { autoResize: true, // This will auto-update the layout when the browser window is resized. container: $('#main'), // Optional, used for some extra CSS styling offset: 2, // Optional, the distance between grid items itemWidth: 210, // Optional, the width of a grid item fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height }; // Get a reference to your grid items. var handler = $('#tiles li'), filters = $('#filters li'); // Call the layout function. handler.wookmark(options); /** * When a filter is clicked, toggle it's active state and refresh. */ var onClickFilter = function(event) { var item = $(event.currentTarget), activeFilters = []; if (!item.hasClass('active')) { filters.removeClass('active'); } item.toggleClass('active'); // Filter by the currently selected filter if (item.hasClass('active')) { activeFilters.push(item.data('filter')); } handler.wookmarkInstance.filter(activeFilters); } // Capture filter click events. filters.click(onClickFilter); }); })(jQuery); </script>

tweenクラスを使った明度の調整は可能ですか。

ずっとチカチカと、ちょうど電灯が着いたり消えたりするような効果をMCにつけたいと思い、以下のスクリプトをフレームに書きました。 import mx.transitions.Tween; import mx.transitions.easing.*; var myTween:Tween = new Tween(ball, "_alpha", None.easeNone, 100, 0, 0.2, true); myTween.onMotionFinished = function() { this.yoyo(); }; これでも良いことは良いんですが・・　alphaではなく明度（brightness?）で調整できないものかと思っています。しかし、対象のMCのプロパティにbrightness等入力しても反応しません。　これまでに、_x , _xscale , alphaくらいは試してこれたのですが、明度は調整できないのでしょうか。 FlashCS3 AS2.0仕様です。参考サイトをいくつか見てみましたが、alphaについては例が書いてあるのですが、明度がないような気がします。どなたかご教授いただけませんでしょうか。よろしくお願いします。

Perl　JavaScript　ページ自動更新

困っております・・・；；お助けを・・・目的・・・ Perlによる掲示版を設置しており複数のユーザーが見ている中でも、誰かが投稿すれば自動的に更新させたいのですがどのようにするのでしょうか？１、リアルタイムチャット的なものにしたいです現在・・・現在は、擬似的に <script type='text/javascript'> (function(){ var t = setInterval(function(){ location.reload(true); }, 10000); })(); </script> このように10秒毎に、ページ更新をし、書込部分→write.cgi 表示部分→bbs.cgi と分けており、表示部分を、Iframeにて表示させ、書込途中でも、影響がないようにしました。しかし、これではリアルタイムではなく、１０秒毎に更新し続けるので、ユーザーが多い場合、サーバー様に負荷をかけてしまいそうです・・・さらに、更新されるたびに上へと、戻ってしまうので、閲覧中であれば、不快に感じることも・・・色々調べてはみているのですが、 Push通知、Socket.i.o、Comet、Ajax、Websocket ポーリング、ロングポーリング、ストリーミング等といったことが目的を果たせそうなのですが、いずれも、使いかたがわからず、実行できておりません。今参考にしているのは http://engineer.recruit-lifestyle.co.jp/techblog/2015-07-29-node4/ このページ・・・しかし、うまく実行できません

matter.jsのイベントについて教えてください

みんなの回答

関連するQ&A

matter.jsについて教えてください。

matter.jsのテクスチャーについての質問

このJavaScriptソースを解説して下さい

Google Analytics　トラッキングコードについて

このソースはJavaScriptですか？

以下のJAVASCRIPTが、動作しないのですが、その原因がわかりませ

Ajaxで表示させると内容が不変

chart.js4.2でカラー設定をする方法

雑誌のスクリプトの意味がわかりせん２

CSS（スタイルシート）を切り替えるJavascriptについて

ネットバンクのログイン画面に入れない

htmlフォームでチェックボックスの入力漏れを警告

html標識について勉強中！回答。お願いします

サイトマップを自動作成できません。

IE8で種類が一致しませんとエラーが出てしまいます

javascriptで困っています。教えてください

JSのイベントターゲットが難しい

wordpressにjqueryを使う

tweenクラスを使った明度の調整は可能ですか。

Perl　JavaScript　ページ自動更新

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

matter.jsのイベントについて教えてください

みんなの回答

関連するQ&A

matter.jsについて教えてください。

matter.jsのテクスチャーについての質問

このJavaScriptソースを解説して下さい

Google Analytics トラッキングコードについて

このソースはJavaScriptですか？

以下のJAVASCRIPTが、動作しないのですが、その原因がわかりませ

Ajaxで表示させると内容が不変

chart.js4.2でカラー設定をする方法

雑誌のスクリプトの意味がわかりせん２

CSS（スタイルシート）を切り替えるJavascriptについて

ネットバンクのログイン画面に入れない

htmlフォームでチェックボックスの入力漏れを警告

html標識について勉強中！回答。お願いします

サイトマップを自動作成できません。

IE8で種類が一致しませんとエラーが出てしまいます

javascriptで困っています。教えてください

JSのイベントターゲット が難しい

wordpressにjqueryを使う

tweenクラスを使った明度の調整は可能ですか。

Perl JavaScript ページ自動更新

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

Google Analytics　トラッキングコードについて

JSのイベントターゲットが難しい

Perl　JavaScript　ページ自動更新