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

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

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

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

593閲覧

jquery ui で、dialogを表示していますが、dialog内で計算結果などを出力する方法はありますか?

WalkerGolden

総合スコア8

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/12/06 07:16

###jquery ui で、dialogを表示、その中で、計算結果を表示したい。
ここに質問したいことを詳細に書いてください
jqueryもそうですが、javascriptに関しても素人です。
jqueryを活用すると、javascriptをある程度簡単に活用できることをしり、勉強中です。
dialogの表示方法を勉強中ですが、dialog内で、足し算をして、その結果を同じdialog内に表示をしたいです。
一度dialogを表示すると、ボタンを押して、違う場所に出力等のやり方はネットで検索をするとでてきますが、dialog内での、処理の仕方は検索方法が見当違いなのかまったくでてきません。

アドバイスをいただければと、質問させていただきました。

###発生している問題・エラーメッセージ
dialogに表示はできるが、そこから、dialog内で、処理をする方法がわからない。

エラーメッセージ

###該当のソースコード

<!DOCTYPE html> <html lang="ja"> <meta charset=utf-8> <link rel="stylesheet" href="jquery-ui.css"> <script src="jquery.js"></script> <script src="jquery-ui.js"></script> <script type="text/javascript"> $(function(){ $("#a").dialog({ autoOpen:false, }); $("#link").click(function(){ $("#a").dialog("open"); }); }); </script> <body> <a href="#" id="link" class="ui-state-default ui-corner-all" style="width:20px; display:block; padding:5px;"> <span class="ui-icon ui-icon-newwin"></span> </a> <div id="a" title="掛け算"> <form methot="post">

<input type="text" size="3" id="su1" />+<input type="text" size="3"id="su1" /><input type="button" value="=" onClick="kei" />
<br />
結果

</form> </div> </body> </html>

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
javascript jquery ui

jQuery UI 1.12

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

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

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

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

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

kei344

2017/12/06 07:18

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

回答1

0

jQuery UIのdialogを使っているようですが、計算中は出したり消したりしないので……ふつうにすればいいです。

出力先追加。idが重複していたので修正します。

HTML

1<input type="text" size="3" id="su1" />+<input type="text" size="3" id="su2" /><input type="button" value="=" onclick="kei(event);" /> 2<br /> 3結果 4<output name="output"></output>

JavaScript

1function kei(event) { 2 var ans = parseFloat($('#su1').val()) + parseFloat($('#su2').val()); 3 $('[name="output"]').val(ans.toString()); 4}

投稿2017/12/06 07:30

x_x

総合スコア13749

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問