JSFiddleで計算結果を出力する方法

Pocket

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="text" id="mytext" value="100">
<input type="button" id="mybutton" value="Button">
<div id="result"></div>

左下の枠の「JAVASCRIPT」は次のようにします。
ボタンをクリックするとテキストボックスの値を取得して計算結果をDIVタグの中に表示します。

$("#mybutton").click(function() {
  var v;
  v = $("#mytext").val();
  $("#result").html(v * 2);
});

次で試せます。

https://jsfiddle.net/y88x6Lmn/

[ 2016年1月13日 | カテゴリー: JavaScript | タグ: ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報