JSFiddleで計算結果を出力する方法
JavaScriptの実験ができて共有したり公開したりできるツール「JSFiddle」ですが、仕様変更があったらしく、使い勝手が変わっています。
特にJavaScriptを実行して計算結果を出力する方法が分からず困っていましたが、ようやく分かりましたので、メモとして残しておきます。
最も簡単なのは「alert("計算結果");」とする方法です。しかしダイアログで表示されるので開くたびに閉じる必要があり煩わしいです。
そこでjQueryを使う方法を考えます。
四分割の左下の枠の「JAVASCRIPT」というボタンをクリックします(これがボタンに見えないのが曲者)。
ここで設定ができます。
Languageは「JavaScript」のままとします。
Frameworks & Extensionsは「jQuery」を選びます。ヴァージョンが色々ありますが、edgeや3.0.0は正式版ではないようです。正式版の最新は2.2.0ですが、JSFiddleにおける最新は2.1.4なのでこれを選べばいいと思います。もし正しく動作しない場合は別のヴァージョンを選びます。
次にコードを書きます。サンプルを示します。
左上の枠の「HTML」は次のようにします。
テキストボックスとボタンとDIVタグを表示します。
<input type="button" id="mybutton" value="Button">
<div id="result"></div>
左下の枠の「JAVASCRIPT」は次のようにします。
ボタンをクリックするとテキストボックスの値を取得して計算結果をDIVタグの中に表示します。
var v;
v = $("#mytext").val();
$("#result").html(v * 2);
});
次で試せます。
https://jsfiddle.net/y88x6Lmn/
[ 2016年1月13日 | カテゴリー: JavaScript | タグ: JSFiddle ]
« クレジットカード番号をチェックする | キャラクター入り住民票 »
コメント
-
＞しろうさん
全くわかりません。そのような高度なことをやろうとしたこともありません。
JSFiddleはウェブサイトなので適当なコードを入力して確かめていただけると良いかと思います。
よろしくおねがいします。
失礼します。１つだけ確認させてください。
このアプリはオブジェクト入力しその結果をコード出力みたいな感じのことはできますか。
https://gyazo.com/22b7c409081ed696910e8d58601892d6
アドビのDreamweaverやBlueGriffonはできるみたいです。