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

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

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

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

Q&A

2回答

538閲覧

背景画像を変更したい

mitsuo320

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿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なども使用してみようとしたのですが、よく分からず断念しました。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

総合スコア2314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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を使用して開発しております。 お伝えし忘れていました。すみません。
guest

0

javascript

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

投稿2022/11/28 03:34

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問