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

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

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

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

Q&A

解決済

2回答

461閲覧

JavaScriptの関数内変数を別の関数で使用できないでしょうか?

katopa165

総合スコア19

JavaScript

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

0グッド

1クリップ

投稿2019/09/03 11:50

編集2019/09/03 12:14

自動販売機をブラウザ上で作ろうと思っているのですが、
関数内で宣言した変数を別の関数内で計算に使いたいです。

具体的にsetItem()内の変数priceをbuy()の中で使用したいです。
コンソールを見てもエラーは出ていません。

どうすればいいでしょうか?
教えて頂きたいです。

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css"> 9 <script src='main.js' type="text/javascript"></script> 10</head> 11<body> 12 <main> 13 <div class="mainInner"> 14 <h1>自販機</h1> 15 <ul class="items"> 16 <li class="item" onclick='setItem(0)'>トマト 120</li> 17 <li class="item" onclick='setItem(1)'>人参 120</li> 18 <li class="item" onclick='setItem(2)'>じゃがいも 120</li> 19 <li class="item" onclick='setItem(3)'>大根 150</li> 20 <li class="item" onclick='setItem(4)'>ピーマン 160</li> 21 <li class="item" onclick='setItem(5)'>マンゴー 170</li> 22 </ul> 23 <input id='cash' type="text"> 24 <button onclick="cashIn()" class='cashIn'>cashIn</button> 25 <p class="haveCash">1000円</p> 26 <p class='selectItems'></p> 27 <p class='boughtItems'></p> 28 <button onclick='buy()' id='buy'>買う</button> 29 </div> 30 </main> 31</body> 32</html>

JavaScript

1let price; 2 3function cashIn(){ 4 var money = document.querySelector('#cash').value; 5 document.querySelector('.haveCash').textContent = money + '円'; 6 document.querySelector('.haveCash').value = money; 7}; 8 9const items = [ 10 {item: 'とまと' , 11 price: 120}, 12 {item: '人参' , 13 price: 120}, 14 {item: 'じゃがいも' , 15 price: 120 }, 16 {item: '大根' , 17 price: 150 }, 18 {item: 'ピーマン' , 19 price: 160 }, 20 {item: 'マンゴー' , 21 price: 170 }, 22] 23 24function setItem(e){ 25 console.log(items[e]); 26 document.querySelector('.selectItems').textContent = (items[e].item); 27 let price = items[e].price; 28 return price; 29} 30 31function buy(){ 32 const value = document.querySelector('.haveCash').value; 33 function sum(){ 34 var sum = value - price; 35 } 36 document.querySelector('.boughtItems').textContent = sum(); 37}

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

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

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

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

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

kei344

2019/09/03 12:07

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
katopa165

2019/09/03 12:16

アドバイス頂きありがとうございます。 自分なりに困っていることを具体的に書いてみました。
guest

回答2

0

ベストアンサー

同時に1商品しか買わないなら。

js

1function setItem(e){ 2 console.log(items[e]); 3 document.querySelector('.selectItems').textContent = (items[e].item); 4 /*let*/ price = items[e].price; // letを付けるとこの関数内にスコープが縛られる 5 // return price; 6}

無限に在庫があり押せば押すだけ購入する場合なら。

js

1let price = 0; // 初期値を設定 2// 中略 3function setItem(e){ 4 console.log(items[e]); 5 document.querySelector('.selectItems').textContent = (items[e].item); 6 /*let*/ price += items[e].price; // 加算 7 // return price; 8}

投稿2019/09/03 12:29

kei344

総合スコア69364

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

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

0

投稿2019/09/03 12:13

Take_it

総合スコア357

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問