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

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

ただいまの
回答率

87.94%

javaScript ボタンをクリックしたとき、画像をランダムで表示し同時に100ずつカウントを増やすプログラム

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,521

score 8

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
javascriptについて質問です。
ボタンをクリックして、1.画像をランダムで表示させる 2.カウントが100ずつ増えていく機能を作りたいです。また、これらを1つの画面で完成させたいと思っています。
1と2のそれぞれの機能は動作できましたが、2つ同時に機能させることができません。
イメージといたしまして、家事をして0円貯金しましたという言葉と貯金するボタンを最初の画面に表示します。
ボタンをクリックすると、0円の文字が100円に変わり、家事をして100円貯金しましたの言葉とボタンの間に画像を表示させたいです。
さらに、ボタンをクリックすることで、200円、300円と金額が増え、画像もクリックするたびにランダムに表示させたいです。
また、画面を閉じても金額は0円に戻らず、クリックして増えた金額を保存して、次に画面を開いたら、増えた金額からスタートできるようにしたいです。
わかりにくい説明ですが、改善点を教えていただけると助かります。
宜しくお願いいたします。

※style.cssのソースコードを記載していなかったので追加で載せています。

該当のソースコード

[index.html]
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>クリックアプリ</title>
    <script type="text/javascript">
      var Count = 0;
      function CountUp() {
        document.getElementById("Output").innerHTML = Count+=100;
      }
      function getImage() {
        var image=new
        Array("image1.jpg","image2.jpg","image3.jpg");
        var randomNum=(Math.floor(Math.random()*3));
        document.write("<img src="+image[randomNum]+">");
      }

    </script>
</head>
<body>
    <p>家事をして<br><span id="Output">0</span><br>貯金しました</p>
    <input type="button" value="貯金する"  onclick="CountUp(); getImage()">
  </div>
</body>
</html>

[style.css]
body {
  background-color: #F0F8FF;
  padding: 15px;
  font-size: 30px;
  color: #666;
}
input {
  background-color: #FFFF00;
  font-size: 40px;
  color:     #000000;
  position: absolute;
    left: 70px;
    bottom: 100px;
}
img {
  position: absolute;
  left: 150px;
  bottom: 100;
}

試したこと

できるかな?と思った形で試してみましたが駄目でした。
[script]
function getImage() {
document.getElementById("OutPut").innerHTML = ("<imgsrc="+image[randomNum]+">");
var image=new
Array("image1.jpg","image2.jpg","image3.jpg");
var randomNum=(Math.floor(Math.random()*3));
}
[body]
<p>家事をして<br><span id="Output">0</span>円<br>貯金しました</p>
<p><span id="OutPut"></span></p>
<input type="button" value="貯金する"  onclick="CountUp(); getImage()">

[script]
function getImage() {
document.getElementById("output").innerHTML = document.write("<img src="+image[randomNum]+">");
var image=new
Array("image1.jpg","image2.jpg","image3.jpg");
var randomNum=(Math.floor(Math.random()*3));
}
[head]
<p>家事をして<br><span id="Output">0</span>円<br>貯金しました</p>
<input type="button" value="貯金する"  onclick="CountUp(); getImage()">

補足情報(FW/ツールのバージョンなど)

monacaを使用しています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • dameo

    2019/11/20 00:56

    やり方がないとは言いませんが、現状の技術力だと難しいと思います。
    方法1: ローカルHTMLファイルとして実行すると仮定して、FileAPIを使用して保存する
    方法2: サーバからダウンロードするHTMLファイルと仮定して、LocalStorageかサーバー上に保存する
    申し訳ありませんが、別の機会に質問して頂くとして、私の回答からは除外させて頂きます。

    なお、不快に思ってたりはしませんよ。
    出来ることの組み合わせで考えてもらわないと、深海魚なのに空を飛びたいみたいな妄想まで質問できちゃうので、困るだけです。

    キャンセル

  • dameo

    2019/11/20 01:08 編集

    回答しようと思いましたが、ryouichiさんので十分なので、やめときました。
    一応補足だけ…
    onclickの中に複数の呼び出しがあっても、間違いというわけではありません。
    ちゃんと呼び出されます。onclickの中は、function(event){}の中身を記述する形になります。

    皆さん複数書いちゃダメと言ってるのは、ここに複数の文を記述すると、
    ・可読性が低下する
    ・普通HTML内では文字参照で記述しないといけない<>"のような文字を書く人が出てくる
    ため、あまり長くならないようにする慣習があるからです。
    実際onclick自体を嫌って、JavaScriptの中からEventHandlerをHTML要素に設定する人も多いです。

    キャンセル

  • gakuseikun

    2019/11/20 10:32

    ご丁寧に回答ありがとうございます。
    できないことが多いので、このような場をお借りして学びを深めたらと思いましたが、勉強が足りず申し訳ありません。
    アドバイスいただいたことをうまく活用していきます。
    ありがとうございました。

    キャンセル

回答 2

checkベストアンサー

+3

はじめまして。こんな感じでしょうか?

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>クリックアプリ</title>
</head>
<body>

    <img class="js-image-insertarea" src="">

    <p>家事をして<br><span id="Output">0</span><br>貯金しました</p>

    <input class="js-trigger-button" type="button" value="貯金する">

    <script type="text/javascript">

      // グローバルに変数が露出してしまうので、即時関数で囲いましょう
      ( function() {

        var Count = 0;

        // 毎回要素を取得しにいくことで計算量がやや増えるので
        // 先に要素を確保して、そちらを対象としましょう。
        var outputElement = document.getElementById("Output")
        var imageElement  = document.querySelector('.js-image-insertarea')

        // innerHTMLを利用するより、textContentを利用する方が良さそうです。
        function CountUp() {
          outputElement.textContent = Count += 100;
        }

        // おそらく画像が’追加される’よりも'切り替わる'方がご要望なのかな、
        // と思いましたので画像のパスを書き換える方法を採用しています。
        function getImage() {

          var image = new Array("image1.jpg","image2.jpg","image3.jpg");
          var randomNum = ( Math.floor( Math.random() * 3 ) );

          // document.writeはあまりよろしくないので、別の方法で要素を追加します。
          imageElement.src = image[ randomNum ]
        }

        // 実行する関数をひとまとめにしましょう。
        function onClickTriggerButton() {
          CountUp(); getImage();
        }

        // onclickで紐づけるのはあまりグッドプラクティスではないので
        // addEventListenerを使ってみましょう
        document.querySelector( '.js-trigger-button' ).addEventListener( 'click', onClickTriggerButton )

      })()

    </script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/19 22:21

    はじめまして。
    ご回答ありがとうございます。
    ソースだけでなく、丁寧な説明までしていただきありがとうございます。
    画像を切り替えるという考え方もあるのかと、とても勉強になります。
    こちらで、やってみます。
    ありがとうございました。

    キャンセル

+2

同時に動作できません。

まずは、HTMLタグの on〜 とある中に関数を1つしか書けないと覚えましょう。
追記)
正確には、JavaScript の 1 文に当たる ";" までしか解釈されません。

<input type="button" value="貯金する"  onclick="onClickButton()">

なので、同時にやりたい事を1つの関数にまとめましょう。

function onClickButton (){
  CountUp();
  getImage();
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/20 18:31

    出典はないです。javascript: で始める書き方は危険とされているので、教えないほうがいいとの判断からですね。

    キャンセル

  • 2019/11/21 12:11

    唐突にjavascript:の話をされても。
    ここにあるように属性値は FunctionBody 同等になるため、冗長とまでは言いませんが解決になっていないように見えます。
    https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes

    キャンセル

  • 2019/11/21 12:34

    > 唐突にjavascript:の話をされても。
    ごめんなさい、Anchor と勘違いしていました。正確な回答は「カンマ(,) で結合していけば動くよ」ですね。「Javascriptの1文の終端セミコロン(;)を含めているから動かない 」と。ご指摘ありがとうございます。

    キャンセル

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

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る