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

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

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

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

jQuery

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

HTML

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

Q&A

解決済

2回答

1204閲覧

増やした分だけ減ったらアラートするようにする(先入れ先出し)

oadj

総合スコア7

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2016/08/24 13:27

javascriptを練習中なのですが、下記のように初期値が100のボックスと、数を乱数で増減させるhuyasu、herasuがあるとします。

ここで、たとえば最初にherasuボタンを3回押して
30、52,11という数字が加算されて、合計が193になったとします。
次に、herasuボタンを押していき、huyasuボタンで増やした数の分がへったら、すなわち30増やした分が0,52増やした分が0,11増やした分が0になったらアラートで知らせる、ということをしたいです。

つまり、商品とかの管理で言う、先入れ先出しのようなことをやりたいです。

長い時間考えてもさっぱり分かりませんでした。どのようにすればできるでしょうか?
~HTML~
<input type="number" id="test" value="100">
<input type="button" id="huyasu">
<input type="button" id="herasu">

~JS~
var ran = Math.floor( Math.random() * 100 );
$("#huyasu").on("click",function(){
$("#test").val($("#test").val()+ran)
}
$("#herasu").on("click",function(){
$("#test").val($("#test").val()-ran)
}
いろいろやり方があるかなーと思っていますが、どなたか、一例お示しくだされば幸いです。

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

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

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

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

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

kei344

2016/08/24 13:47

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

回答2

0

ベストアンサー

とりあえず自分もそれっぽい例を書いてみました。また、質問内のコードの指摘についてはfield_onionさんと同じ意見です。

先入れ先出し、ということなので、次のようなことかと考えています。

  • まず#huyasuボタンを押すとランダムに値が増加する
  • #herasuボタンを押すとランダムに値が減少する
  • このときに減った値が先程#huyasuボタンで増やした量を全て打ち消していたら、そのことをalertで知らせる

また、どれくらい増えたり減ったりしているのかが分かりやすいように、どんな値が追加されて、それがどれくらい減ったのかを表示するようにしてみました。

実際に動作している様子はこちらで確認できます。→http://jsbin.com/mohajiwuqu

html

1<!doctype html> 2 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <title>増減ボタン</title> 7 </head> 8 <body> 9 <input type="number" id="test" value="100"> 10 <input type="button" id="huyasu" value="+"> 11 <input type="button" id="herasu" value="-"> 12 13 <ul id="log"> 14 </ul> 15 16 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 17 <script> 18 $(function () { 19 // jQueryでHTMLの要素を取得 20 var test = $('#test'); 21 var log = $('#log'); 22 23 // `#test`に表示されている値の基準値(最初は100) 24 var base = parseInt(test.val(), 10); 25 // 現在残っている中で一番最初に追加された値(元々の値から減っている可能性がある) 26 // 0の場合は、残っている値が無い状態 27 var topValue = 0; 28 // 追加された元々の値達を格納する配列 29 var originalValues = []; 30 31 // `#test`と`#log`の表示を更新する関数 32 function update() { 33 // `#log`の中身を一旦削除 34 log.empty() 35 // 残っている値の合計を計算する変数 36 var sum = topValue; 37 // 残っている値が存在するなら、`#log`にそれらの情報を追加する 38 if (topValue !== 0) { 39 log.append($('<li>').text('追加された値: ' + originalValues[0] + ' (残っている値: ' + topValue + ')')); 40 for (var i = 1; i < originalValues.length; i++) { 41 log.append($('<li>').text('追加された値: ' + originalValues[i])); 42 // `#log`に追加しつつ残っている値の合計の計算も進める 43 sum += originalValues[i]; 44 } 45 } 46 // 残っている値の合計を基準値と足し合わせて表示 47 test.val(base + sum); 48 } 49 50 // `#huyasu`をクリックした時 51 $('#huyasu').on('click', function () { 52 var rnd = Math.floor(Math.random() * 100) + 1; 53 // 追加された値の配列に追加 54 originalValues.push(rnd); 55 // もし残っている値が無いなら、 56 // 一番最初に追加された値ということになるのでtopValueに値をセット 57 if (topValue === 0) { 58 topValue = rnd; 59 } 60 // `#test`と`#log`の表示を更新 61 update(); 62 }); 63 64 // `#herasu`をクリックした時 65 $('#herasu').on('click', function () { 66 var rnd = Math.floor(Math.random() * 100) + 1; 67 // 予め残っている値を減らしておく 68 topValue -= rnd; 69 // ここで残っている値が0以下なら無くなったということなのでalertしていく 70 while (topValue <= 0 && originalValues.length >= 1) { 71 // originalValues.shift()は配列の0番目の要素を取り出して削除し、その値を返すメソッド 72 alert(originalValues.shift() + "が0になりました"); 73 // 追加された元々の値が無くなってしまったら、 74 // このループは成り立たないので、 75 // ループから抜ける 76 if (originalValues.length === 0) { 77 break; 78 } 79 // 次の残っている値を計算する 80 topValue = originalValues[0] + topValue; 81 } 82 // ループを抜けたあとの残っている値が0未満だったら、 83 // 基準となる値を調節して、 84 // 残っている値が何も無い状態にする 85 if (topValue < 0) { 86 base += topValue; 87 topValue = 0; 88 } 89 // `#test`と`#log`の表示を更新 90 update(); 91 }); 92 }) 93 </script> 94 </body> 95</html> 96

投稿2016/08/24 14:08

編集2016/08/24 14:43
MakeNowJust

総合スコア545

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

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

0

とりあえず元コードに問題があるんですが、
文法エラー

  • clickイベントが閉じていないので動かない。

毎回乱数は発生しない。

  • ranは乱数で設定された値が1度入るだけでその後は変わりません。

で、最初に増やして、次に減らして…ということですよね。

まず、乱数なので、何が増えたかは別途覚えておかないといけません。
また、減らす場合も乱数なので、増やした分ちょうど減るとは限りません。

ランダムな値が減っていった場合どうなるかというイメージがわからないので、例は書けませんが、
とりあえず現在の問題を修正して、乱数の履歴も表示できるように直しますので、

それで表示される値でどういう処理にしたいのか紙の上で整理してみてください。

html

1<input type="number" id="test" value="100"> 2<input type="button" id="huyasu"> 3<input type="button" id="herasu"> 4<div id="list"></div>

javascript

1// 値ではなく関数にする。これなら呼ぶたびに乱数を得られる。 2var ran = function(){ 3 return Math.floor( Math.random() * 100 ); 4} 5// 乱数の履歴を入れる配列 6var vals = []; 7 8$("#huyasu").on("click",function(){ 9 var val = ran(); 10 vals.push(val); 11 $("#test").val($("#test").val()*1+val); 12 13 $("#list").text(vals); // 履歴を表示 14}); 15$("#herasu").on("click",function(){ 16 var val = ran(); 17 vals.push(val*-1); 18 $("#test").val($("#test").val()*1-val); 19 20 $("#list").text(vals); // 履歴を表示 21});

投稿2016/08/24 13:43

flied_onion

総合スコア2604

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問