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

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

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

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

Q&A

受付中

背景画像を変更したい

mitsuo320
mitsuo320

総合スコア0

JavaScript

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

2回答

0グッド

0クリップ

224閲覧

投稿2022/11/28 03:27

前提

JavaScriptを使用して貯金アプリを作成しています。
目標金額に対しての貯金額の割合で背景の木が成長するシステムを実装したいのですが、うまく動きません。

実現したいこと

  • 背景画像を計算結果に合わせて変更する

発生している問題・エラーメッセージ

エラーメッセージ

背景画像が変わりません。
エラーメッセージさえ出ません。

該当のソースコード

<script> function keisan() { var mokuhyou = document.getElementById("mokuhyou").value; var tyokingaku = document.getElementById("tyokingaku").value; var nokori = mokuhyou - tyokingaku; document.getElementById("nokori").innerHTML = "目標まで" + nokori + "円です"; } function wariai() { if(nokori <= mokuhyou * 0.25) { document.getElementById='(/images/number_1.png)'; } else if(nokori > mokuhyou * 0.25 && nokori <= mokuhyou * 0.5) { document.getElementById='(/images/number_2.png)'; } else if(nokori > mokuhyou * 0.5 && nokori <= mokuhyou * 0.75) { document.getElementById='(/images/number_3.png)'; } else if(nokori > mokuhyou * 0.75 && nokori <= mokuhyou * 0.99) { document.getElementById='(/images/number_4.png)'; } else { document.getElementById='(/images/number_5.png)'; } } </script> <header> </header> </head> <body background="images/number_1.png"> <h1>money tree</h1> <div class="tyokin" align="center"> 目標金額:<input type="text" value="" id="mokuhyou" placeholder="金額">円<br/> 現在の貯金額:<input type="text" value="" id="tyokingaku" placeholder="金額">円<br/> <button onclick="keisan()" >計算</button> <button onclick="wariai()" >水やり</button> <p id="nokori"></p> <img id="icon" src=""> </div>

試したこと

background_imageなども使用してみようとしたのですが、よく分からず断念しました。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

回答2

2

JavaScriptでスタイルを変更する方法

javascript

1要素.style.CSSプロパティ名 = '値'

修正箇所

javascript

1// 🚫間違い 2document.getElementById='(/images/number_1.png)'; 3 4// ✅正しい例 5document.body.style.backgroundImage = 'url(/images/number_1.png)';

画像が金額によって切り替わらない原因

  • 「水やり」ボタンを押したら取得できるnokoriの中身は、数字ではなくHTML要素そのものです。
    • 例)<p id="nokori">目標まで600円です</p>
  • 要素に数字をかけても何もならない(NaNになる)ので、elseとなっているわけです。

正解コード例

html

1<body style="background-image: url(画像の相対パス1)"> 2 <h1>money tree</h1> 3 <div class="savings" align="center"> 4 目標金額:<input type="text" id="target-amount" placeholder="目標金額を入力してください"><br /> 5 現在の貯金額:<input type="text" id="current-amount" placeholder="現在の貯金額を入力してください"><br /> 6 <button id="btn-calc">計算</button> 7 <button id="btn-water">水やり</button> 8 <p>目標まで<span id="remaining">0</span>円です</p> 9 </div> 10</body>

javascript

1// 必要な要素を取得 2const bodyElement = document.body; 3const targetElement = document.getElementById('target-amount'); 4const currentElement = document.getElementById('current-amount') 5const btnCalc = document.getElementById('btn-calc'); 6const btnWater = document.getElementById('btn-water'); 7const remainingElement = document.getElementById('remaining'); 8 9// ボタンのクリックイベントを設定 10btnCalc.addEventListener('click', showRemainingAmount); 11btnWater.addEventListener('click', changeBackgroundImage); 12 13// 目標金額までの残り金額を計算して表示する関数 14function showRemainingAmount() { 15 const targetAmount = targetElement.value; 16 const currentAmount = currentElement.value; 17 const remainingAmount = targetAmount - currentAmount; 18 19 remainingElement.textContent = remainingAmount; 20} 21 22// 残り金額に応じて背景画像を変更する関数 23function changeBackgroundImage() { 24 const targetAmount = targetElement.value; 25 const remainingAmount = remainingElement.textContent; 26 27 if (remainingAmount <= targetAmount * 0.25) { 28 bodyElement.style.backgroundImage = 'url(画像の相対パス1)'; 29 } else if (remainingAmount <= targetAmount * 0.5) { 30 bodyElement.style.backgroundImage = 'url(画像の相対パス2)'; 31 } else if (remainingAmount <= targetAmount * 0.75) { 32 bodyElement.style.backgroundImage = 'url(画像の相対パス3)'; 33 } else if (remainingAmount <= targetAmount * 0.99) { 34 bodyElement.style.backgroundImage = 'url(画像の相対パス4)'; 35 } else { 36 bodyElement.style.backgroundImage = 'url(画像の相対パス5)'; 37 } 38}

※動作確認をしていないためエラーが生じる可能性があります。申し訳ございません。その際はお手数をおかけいたしますが、エラーの文章をコピペして教えてください。コードを修正いたします。

投稿2022/11/28 12:45

編集2022/12/07 02:56
Cocode

総合スコア2231

spoofy_dragon, mitsuo320👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

mitsuo320

2022/12/06 01:12

回答ありがとうございます。返信遅くなり申し訳ありません。 元画像からは変わるようになったのですが、正しい画像ではなく真っ白な画面になってしまいます。 これは何がおかしいのでしょうか。
Cocode

2022/12/06 01:33

画像のパスは間違っていませんか?
mitsuo320

2022/12/06 01:35

間違っていないと思うのですが、あまり自信はありません。 確認する方法などはあるでしょうか?
Cocode

2022/12/06 02:00

考えられる原因としては、ルートパスにしていますが、ルートを設定していないのではないでしょうか? 相対パスにしてみたらどうでしょう?
Cocode

2022/12/06 02:05

確認方法はわからないですすみません。
mitsuo320

2022/12/07 01:42

画像は表示されるようになりました!ありがとうございます。 度々の質問になり申し訳ないのですが計算結果に関わらずすべてimages/number_5の画像が表示されてしまうのですが、なにか考えられることはあるでしょうか?
Cocode

2022/12/07 02:56

回答を更新しました。ご覧ください
mitsuo320

2022/12/13 03:17

更新ありがとうございます。丁寧でとてもありがたいです。 すべて打ち込んでみました。エラーメッセージが出ることはないのですが、背景が変わらないだけでなく、計算結果さえ出なくなってしまいました。解決方法はございますか?
mitsuo320

2022/12/13 03:45

補足ですが、MONACAを使用して開発しております。 お伝えし忘れていました。すみません。

2

javascript

1document.getElementById='(/images/number_1.png)'; 2↓↓↓ 3document.body.background='/images/number_1.png';

投稿2022/11/28 03:34

yambejp

総合スコア109059

spoofy_dragon, miyabi_takatsuk👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

2022/11/28 12:45

こちらの回答が他のユーザーから「質問に対する回答となっていない投稿」という指摘を受けました。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

JavaScript

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