Q&A
前提
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なども使用してみようとしたのですが、よく分からず断念しました。
回答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
総合スコア2314
2
javascript
1document.getElementById='(/images/number_1.png)'; 2↓↓↓ 3document.body.background='/images/number_1.png';
投稿2022/11/28 03:34
総合スコア110914
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/12/06 01:12
2022/12/06 01:33
2022/12/06 01:35
2022/12/06 02:00
2022/12/06 02:05
2022/12/07 01:42
2022/12/07 02:56
2022/12/13 03:17
2022/12/13 03:45