自動販売機をブラウザ上で作ろうと思っているのですが、
関数内で宣言した変数を別の関数内で計算に使いたいです。
具体的に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}
回答2件
あなたの回答
tips
プレビュー