/自販機を作成しましたが、ボタンが反映せれません…　初心者です

該当のソースコード

```ここに言語を入力
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>

<style>
    
    .center-box{
        text-align: center;
    }
    .large-text{
        font-size: 2.0rem;
    }  
    

    
    body {
        
    background-color: #EE0000;
    text-align: center;
    margin: 220px 290px 500px 260px;
    font-size: 24px;
    
    }
    
    header {
        
    }
    
main {
    position:relative;
    text-align: center;
}
footer {

    background-color: darkblue;
    border-bottom:1px solid #444;
    text-align: center;
    color: #fff;
}
h1 {
    margin: 0;
}
p {
    font-size:100%;
    text-align: center;
    border-bottom:1px solid #fff;
    height:100px;
}
ul {
    padding: 0;

    border-top: 1px solid #000000;
    display: table;   定義 
    table-layout: fixed;
    width: 100%;
}
li {

    list-style-type:none;*/
    border: 1px solid #666;*/
    background-color: #fff;*/
    display: table-cell;   定義 */
    cursor: pointer;*/

}
li:hover {
    background: #0066CC;
    color:#fff;
}  
button {
    text-align:center;
    border-radius: 40px;
    font-size:100%;
    background-color: #CCCCCC;
    height: 80px;
    color: #fff;
}


</style>



    <body>
        <button id="りんご">りんご</button>
        <button id="おれんじ">おれんじ</button>
        <button id="ぐれーぷ">ぐれーぷ</button>
        <button id="もも">もも</button>
        
        <button id="coin10">10円</button>
        <button id="coin50">50円</button>
        <button id="coin100">100円</button>
        <button id="coin500">500円</button>
     
        <div id="result-div" class="large-text"></div>
        
    
  
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-
            CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
   
        <div style="width:500px; height:250px; background:#0099cc;"></div>
    
        
        <script>
    
        
    $(function(){
    "use strict";
    let total = 0;
    let price = false;
            
 $("りんご").on("click",function() {
    price =120;
     showprice(price);
 });
        
 $("おれんじ").on("click",function() {
    price =140;
     showprice(price);
 });               

$("ぐれーぷ").on("click",function() {
    price =160;
     showprice(price);
 });     
        
$("もも").on("click",function() {
    price =210;
     showprice(price);
 });        
        
$("coin10").on("click",function() {
    pay (10);
 });        
        
 $("coin50").on("click",function() {
    pay (50);
 });        
        
$("coin100").on("click",function() {
    pay (100);
 });        
        
$("coin500").on("click",function() {
    pay (500);
 });        
        
                               
        
function pay(amount){
    total += amount;
    if (price == false){ 
        total = 0;
        $("#result-div").html("商品を選んでね");
        return;
    } else if (total >= price){
            $("#result-div").html("ありがとう～おつりは"+(total -price)+"円です。")
             total = 0;
            price = false;
        }else{
             $("#result-div").html("投入金額"+total);
        }
    }
        
    function showprice (price) {
        
       $("#result-div").html(price+"円投入してください。")
        
    }
    
});
        
  
</script>
</body>
</html>

kei344

2019/12/14 04:13

（質問文は編集できます）「java」と書かれていますが、「JavaScript」の間違いでは？その二つは別言語です。また、質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

y_waiwai

2019/12/14 05:25

このままではコードが読みづらいので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

m.ts10806

2019/12/14 06:02

質問投稿前にプレビュー確認して調整してください。

行動規範の内容に同意します

回答2件

ベストアンサー

以下は直接的な回答ではありません

気になった点を以下に挙げていきます。
おそらく以下が守れていれば自己解決できるはずです。

少なくとも自分が使う言語の基礎文法やメソッドなどのドキュメントを読むようにしましょう。（今回気になったのはCSSのコメントの記法やjQueryのID指定方法）
IDやClass名に日本語を用いるのはやめましょう。日本語は使っても良い仕様ですが余計な手間が後々かかる可能性が高いです。
無駄な空白や改行は消しましょう。空白や改行がないのもダメですがありすぎるのもダメです。
既出のIDやClass名を出してくれたりエラーメッセージを出してくれるエディタを使いましょう。（ちなみに私はAtom）（メモ帳等でやっているなら今すぐやめるべきです）

以下が上を守った時のコードです

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <style>
7    .center-box { text-align: center; }
8    .large-text{ font-size: 2.0rem; }
9    body {
10      background-color: #EE0000;
11      text-align: center;
12      margin: 220px 290px 500px 260px;
13      font-size: 24px;
14    }
15    header {}
16    main {
17      position:relative;
18      text-align: center; 
19    }
20    footer {
21      background-color: darkblue;
22      border-bottom:1px solid #444;
23      text-align: center;
24      color: #fff;
25    }
26    h1 { margin: 0; }
27    p {
28      font-size: 100%;
29      text-align: center;
30      border-bottom: 1px solid #fff;
31      height: 100px;
32    }
33    ul {
34      padding: 0;
35      border-top: 1px solid #000000;
36      display: table; /* 定義 */
37      table-layout: fixed;
38      width: 100%;
39    }
40    li {
41      list-style-type:none;
42      border: 1px solid #666;
43      background-color: #fff;
44      display: table-cell; /* 定義 */
45      cursor: pointer;
46    }
47    li:hover {
48      background: #0066CC;
49      color:#fff;
50    }
51    button {
52      text-align:center;
53      border-radius: 40px;
54      font-size:100%;
55      background-color: #CCCCCC;
56      height: 80px;
57      color: #fff; 
58    }
59  </style>
60</head>
61<body>
62  <button id="apple">りんご</button>
63  <button id="orange">おれんじ</button>
64  <button id="grape">ぐれーぷ</button>
65  <button id="peach">もも</button>
66  <button id="coin10">10円</button>
67  <button id="coin50">50円</button>
68  <button id="coin100">100円</button>
69  <button id="coin500">500円</button>
70  <div id="result-div" class="large-text"></div>
71  <div style="width:500px; height:250px; background:#0099cc;"></div>
72
73  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>
74  <script>
75    $(function(){
76      "use strict";
77      let total = 0;
78      let price = false;
79      $("#apple").on("click",function() {
80        price =120;
81        showprice(price);
82      });
83      $("#orange").on("click",function() {
84        price =140;
85        showprice(price);
86      });
87      $("#grape").on("click",function() {
88        price =160;
89        showprice(price);
90      });   
91      $("#peach").on("click",function() {
92        price =210;
93        showprice(price);
94      });      
95
96      $("#coin10").on("click",function() {
97        pay (10);
98      });      
99      $("#coin50").on("click",function() {
100        pay (50);
101      });      
102      $("#coin100").on("click",function() {
103        pay (100);
104      });      
105      $("#coin500").on("click",function() {
106        pay (500);
107      });      
108
109      function pay(amount){
110        total += amount;
111        if (price == false){
112          total = 0;
113          $("#result-div").html("商品を選んでね");
114          return;
115        } else if (total >= price){
116          $("#result-div").html("ありがとう～おつりは"+(total -price)+"円です。");
117          total = 0;
118          price = false;
119        }else{
120          $("#result-div").html("投入金額"+total);
121        }
122      }
123      function showprice (price) {
124        $("#result-div").html(price+"円投入してください。")
125      }
126    });
127  </script>
128</body>
129</html>
130

サンプル

ちなみに簡素に書くと

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <style>
7    .center-box { text-align: center; }
8    .large-text{ font-size: 2.0rem; }
9    body {
10      background-color: #EE0000;
11      text-align: center;
12      margin: 220px 290px 500px 260px;
13      font-size: 24px;
14    }
15    header {}
16    main {
17      position:relative;
18      text-align: center; 
19    }
20    footer {
21      background-color: darkblue;
22      border-bottom:1px solid #444;
23      text-align: center;
24      color: #fff;
25    }
26    h1 { margin: 0; }
27    p {
28      font-size: 100%;
29      text-align: center;
30      border-bottom: 1px solid #fff;
31      height: 100px;
32    }
33    ul {
34      padding: 0;
35      border-top: 1px solid #000000;
36      display: table; /* 定義 */
37      table-layout: fixed;
38      width: 100%;
39    }
40    li {
41      list-style-type:none;
42      border: 1px solid #666;
43      background-color: #fff;
44      display: table-cell; /* 定義 */
45      cursor: pointer;
46    }
47    li:hover {
48      background: #0066CC;
49      color:#fff;
50    }
51    button {
52      text-align:center;
53      border-radius: 40px;
54      font-size:100%;
55      background-color: #CCCCCC;
56      height: 80px;
57      color: #fff; 
58    }
59  </style>
60</head>
61<body>
62  <button class="fruit" id="apple">りんご</button>
63  <button class="fruit" id="orange">おれんじ</button>
64  <button class="fruit" id="grape">ぐれーぷ</button>
65  <button class="fruit" id="peach">もも</button>
66  <button class="coin" id="coin10">10円</button>
67  <button class="coin" id="coin50">50円</button>
68  <button class="coin" id="coin100">100円</button>
69  <button class="coin" id="coin500">500円</button>
70  <div id="result-div" class="large-text"></div>
71  <div style="width:500px; height:250px; background:#0099cc;"></div>
72
73  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
74  <script>
75    $(function(){
76      "use strict";
77      let total = 0;
78      let price = false;
79      const products = {apple:120,orange:140,grape:160,peach:210};
80      $(".fruit").on("click",function() {
81        price = products[$(this).attr("id")];
82        showprice(price);
83      });
84      $(".coin").on("click",function() {
85        pay(Number($(this).attr("id").replace("coin","")));
86      });
87      
88      function pay(amount){
89        total += amount;
90        if (price == false){
91          total = 0;
92          $("#result-div").html("商品を選んでね");
93          return;
94        } else if (total >= price){
95          $("#result-div").html("ありがとう～おつりは"+(total -price)+"円です。");
96          total = 0;
97          price = false;
98        }else{
99          $("#result-div").html("投入金額"+total);
100        }
101      }
102      function showprice (price) {
103        $("#result-div").html(price+"円投入してください。")
104      }
105    });
106  </script>
107</body>
108</html>
109

投稿2019/12/14 10:50

編集2019/12/15 00:02

kyoya0819

総合スコア10429

退会済みユーザー

2019/12/26 06:43

ありがとうございました。

行動規範の内容に同意します

###回答

各要素のID名で指定しているので、#をつけましょう。
以下の感じです。

$("りんご").on("click",function() {　//間違い
$("#りんご").on("click",function() {　//正解

ちなみに、要素の指定方法は以下です。
タグ名="form"　なら　$("form");
クラス名="className"　なら　$(".className");
ID="formId"　なら　$("#formId");

以上です。

投稿2019/12/14 04:30

KazuSaka

総合スコア640

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

/自販機を作成しましたが、ボタンが反映せれません…　初心者です

該当のソースコード

以下は直接的な回答ではありません

以下が上を守った時のコードです

ちなみに簡素に書くと

関連した質問