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

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

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

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

HTML

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

Q&A

解決済

1回答

1541閲覧

html function間の値の取得

satoshi501

総合スコア60

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2016/06/17 02:42

編集2016/06/17 03:23

HTML Functionでの値の取得方法について

お世話になります。
HTMLでのFunctionの使用方法について教えてください。
やりたいこと:

<head>内で作成した関数の中に<body>内で取得した値を渡す。

背景:
HTMLで取得した値を別のスクリプトに渡す。

ソースコード:

<head> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript"> function test1() { webiopi().callMacro( "ChangeSpeed", speed ); } </script> </head> <body> <div style="background:#f44;border-radius: 100%; height: 180px; width: 180px;" id="element"></div> </div> <script type="text/javascript"> <!-- // 匿名関数内で実行 (function (){ // 各エレメントを取得 var element = document.getElementById("element"); // ------------------------------------------------------------ // マウスカーソルが移動するたびに実行される関数 // ------------------------------------------------------------ function MouseMoveFunc(e){ var mouseX = e.clientX ; var mouseY = e.clientY ; } // ------------------------------------------------------------ // イベントのリッスンを開始する // ------------------------------------------------------------ // マウスカーソルが移動するたびに実行されるイベント element.addEventListener("mousemove" , test1);

HTMLの説明:
body内でエレメントを作成し、その座標を取得するHTMLです。
今回行いたいのは、<body>で得た"var mouseX"を<head>内のtest1()の"speed"に渡したいと思っています。

ver mouseXはそのまま<body>内で表示させるには問題なく表示されます。
また、<head>内のspeedを10などの数値に変更してプログラムを実行すると、エレメントをmouseover時に別スクリプトに渡すこともできています。

今回はそのspeedの中身をbodyから可変で渡したいと思っています。

すいませんがご教授お願いいたします。

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

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

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

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

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

kei344

2016/06/17 02:56

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
satoshi501

2016/06/17 03:23

ありがとうございます そのように行いました
Zuishin

2016/06/17 03:42

function test() を function test(speed) と引数を取るように変えて test(mouseX); で呼び出すということですか?
satoshi501

2016/06/17 05:57

ありがとうございます。 すいません自分がちょっと回答して頂いた質問の意味を理解できておりませんが、mouseoverした際の位置を<head>のfunctionに渡したいのです。
Zuishin

2016/06/17 06:05

失礼なことを聞いたらすみません。「引数」という言葉はわかりますか?
satoshi501

2016/06/17 06:15

はい、引数は知っております。 今回のような質問を行っているので信じてもらえないかもしれませんが、普段は別言語でシステムの作成などを行っており、HTMLを作成したことがほぼないためちょっとよくわからなくなっています。
guest

回答1

0

ベストアンサー

test1関数に引数を渡してあげればいけるのではないでしょうか?

//関数部分 function test1(speed) { webiopi().callMacro( "ChangeSpeed", speed ); } //イベント呼び出し部分 element.addEventListener("mousemove" , test1, speed);

投稿2016/06/17 03:56

moresmileman

総合スコア55

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

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

satoshi501

2016/06/17 05:54

ありがとうございます。 イベント呼び出し部分の speedにはどのようにしてmouseXの値を入れればよいでしょうか?
moresmileman

2016/06/17 06:03

mouseXをグローバル変数にしてあげればOKです。 function MouseMoveFunc(e) この変数の外で、mouseXを定義してあげて、関数の中で変更してあげる。 var mouseX = 0; function MouseMoveFunc(e){ mouseX = e.clientX ; var mouseY = e.clientY ; } こういう感じでしょうか?
satoshi501

2016/06/17 07:23

ありがとうございます。 ただ、うまくいきません。 以下のコードでよろしかったでしょうか? ``` <head> function test1(speed) { webiopi().callMacro( "ChangeSpeed", speed ); } </head> <body> var mouseX = 0; function MouseMoveFunc(e){ mouseX = e.clientX ; } speed = mouseX; element.addEventListener("mousemove" , test1, speed); ```
moresmileman

2016/06/17 07:45

element.addEventListener("mousemove" , test1, mouseX); EventListenerの引数を、mouseXにすれば、mouseXが渡るはずです。
kei344

2016/06/17 08:02

To: moresmilemanさん 横から失礼します。 MouseMoveFuncは別のmousemoveで呼ばれていますか?どこからも呼ばれていないのであればマウスの動きを捉えることができません。 それと、MouseMoveFuncの中から直接 webiopi().callMacro( "ChangeSpeed", speed ); を実行すれば良いのでは? あと、speed = mouseX;とすると、要素幅によっては1000とかになりますが、上限は設けなくて大丈夫なものですか?
satoshi501

2016/06/17 08:23

ありがとうございます。 >MouseMoveFuncは別のmousemoveで呼ばれていますか?どこからも呼ばれていないのであればマウスの動きを捉えることができません。 これに関してはのプログラムの値をそのままhtmlに書き込むようにした時、mouseが動くたびに値が変わるのを実行し成功しておりますので大丈夫だと思われます。 >あと、speed = mouseX;とすると、要素幅によっては1000とかになりますが、上限は設けなくて大丈夫なものですか? これに関してはサンプルには書いておりませんが、もう一つエレメントを作成し、そのエレメントからの差異を求めるように計算しておりますので上下左右の各上限が10になるように設定はしてあります。 >それと、MouseMoveFuncの中から直接 webiopi().callMacro( "ChangeSpeed", speed ); を実行すれば良いのでは? これに関してですが、最初にこのように作成してテストしていたのですがうまく行きませんでした。 ただ、今ご指摘されてもう一度そのようにしたところうまくいきました。 おそらく皆様の意見を参考にしながら色々修正した結果、原点に戻ってできたみたいです。 結果行いたいことができました。 皆様ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問