Q&A
現状ではどういう動作をするんでしょうか
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
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を使用しています。
ご質問ありがとうございます。
現状では、画面に家事をして0円貯金しましたの文字が出ていて、その下にボタンが表示されています。
ボタンを押すと、画像がランダムで表示されます。画像の画面にはボタンなどはなく、更新しないと元の画面に戻りません。また、貯金の0円の金額はカウントされません。
わかりにくい説明で済みません。
よろしくお願いいたします。
とりあえず</div>は要らないと思いますよ。
あとdocument.write()だと画像だけになっちゃうので、いいのかな？と思いました。
何を知りたいのか今ひとつよく分からなかった(ボヤケていた)ので、そこをもう少し詰めた方が回答しやすいと思いますよ。
なお、今すでに回答あるので、そちらで良ければ気にしないでください。
ご回答ありがとうございます。
自分の勉強不足で、わかりずらい説明になり誠にすみません。
もう一度試してみて、できなかったらまた質問させていただきます。
質問は分かりやすくなりました。ありがとうございます。
ただ「画面を閉じても金額は0円に戻らず」は実現出来ると思って書いていますか？
今までのコードの延長線上にない機能ですが…
ご質問ありがとうございます。
現在質問投稿している内容を作ることができましたら、保存する機能を付けたいと考えています。
イメージといたしまして、10回クリックし1000円になった金額を保存します。次に起動させた際に、金額が1000円からスタートできるようにしたいと考えています。
私の勉強不足で、そもそも私のイメージしている保存機能が実現できるかわかりません。
様々な機能を一度に作成することもできないため、少しずつ機能を増やしていこうと考えております。
そのため、私より知識のある方にアドバイスをいただきたく質問投稿させていただいております。
もし、私の勉強不足のてんで不快に思われたのでしたら、誠に申し訳ありません。
やり方がないとは言いませんが、現状の技術力だと難しいと思います。
方法1: ローカルHTMLファイルとして実行すると仮定して、FileAPIを使用して保存する
方法2: サーバからダウンロードするHTMLファイルと仮定して、LocalStorageかサーバー上に保存する
申し訳ありませんが、別の機会に質問して頂くとして、私の回答からは除外させて頂きます。
なお、不快に思ってたりはしませんよ。
出来ることの組み合わせで考えてもらわないと、深海魚なのに空を飛びたいみたいな妄想まで質問できちゃうので、困るだけです。
回答しようと思いましたが、ryouichiさんので十分なので、やめときました。
一応補足だけ…
onclickの中に複数の呼び出しがあっても、間違いというわけではありません。
ちゃんと呼び出されます。onclickの中は、function(event){}の中身を記述する形になります。
皆さん複数書いちゃダメと言ってるのは、ここに複数の文を記述すると、
・可読性が低下する
・普通HTML内では文字参照で記述しないといけない<>"のような文字を書く人が出てくる
ため、あまり長くならないようにする慣習があるからです。
実際onclick自体を嫌って、JavaScriptの中からEventHandlerをHTML要素に設定する人も多いです。
ご丁寧に回答ありがとうございます。
できないことが多いので、このような場をお借りして学びを深めたらと思いましたが、勉強が足りず申し訳ありません。
アドバイスいただいたことをうまく活用していきます。
ありがとうございました。
回答2件
0
ベストアンサー
はじめまして。こんな感じでしょうか？
<!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 10:40
総合スコア79
はじめまして。
ご回答ありがとうございます。
ソースだけでなく、丁寧な説明までしていただきありがとうございます。
画像を切り替えるという考え方もあるのかと、とても勉強になります。
こちらで、やってみます。
ありがとうございました。
0
同時に動作できません。
まずは、HTMLタグの on〜 とある中に関数を１つしか書けないと覚えましょう。
追記)
正確には、JavaScript の 1 文に当たる ";" までしか解釈されません。
<input type="button" value="貯金する" onclick="onClickButton()">
なので、同時にやりたい事を１つの関数にまとめましょう。
function onClickButton (){ CountUp(); getImage(); }
投稿2019/11/19 10:36
編集2019/11/21 04:08
総合スコア5434
ご回答ありがとうございます。
まだまだ、勉強不足で関数が一つしか書けないのを知りませんでした。
やりたいことを一つにまとめるやり方も出てきませんでした。
試してみます。
ありがとうございます。
「１つしか書けない」というのは出典があるのでしょうか？
出典はないです。javascript: で始める書き方は危険とされているので、教えないほうがいいとの判断からですね。
唐突にjavascript:の話をされても。
ここにあるように属性値は FunctionBody 同等になるため、冗長とまでは言いませんが解決になっていないように見えます。
https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes
> 唐突にjavascript:の話をされても。
ごめんなさい、Anchor と勘違いしていました。正確な回答は「カンマ（,） で結合していけば動くよ」ですね。「Javascriptの1文の終端セミコロン（;）を含めているから動かない 」と。ご指摘ありがとうございます。
あなたの回答
tips
プレビュー
