問題点
document.getElementByIdの引数にダブルクオーテーション(引用符)が足りない
ソースコードの中に「}」が余分にある
変数「output」が定義されていない
「return price + price * tax;」のあとに「output.textContent = satou;」がある。returnのあとのソースコードは無視される
「return price + price * tax;」では、税率が110%になってしまう
「return price + price * tax;」で値を返す意味がない(返り値を利用していない)
変数「satou」の内容は常に空であり、「output.textContent = satou;」を実行しても何も変化しない。
×「q4Pbutton」○「q4button」
「var P = document.getElementById("q4button");」を実行する意味がない。(変数「P」は一回も使用されない)
関数「btnClickQ()」は実行されていない
変数「price」は定義されていない
変数「P」は使用されていない
「q4input」を取得していない
「取りあえず動く」程度まで改善したコード
html
1<p class="q-body">
2 単価:<input id="q4input" type="text" size="4"></input>
3 <br>
4 <button id="q4button" onclick="btnClickQ()">税込み価格計算</button><br> 税込み価格(10%):
5 <span id="q4output"></span>
6</p>
7</div>
javascript
1 var output = document.getElementById("q4output");
2 var input = document.getElementById("q4input");
3 var satou = "";
4
5 function btnClickQ() {
6 var P = document.getElementById("q4button");
7
8 var tax = 1.1;
9 satou = input.value * tax;
10 output.textContent = Math.round(satou);
11 }
改善すればより良いかも?
「var satou = "";」で、変数「satou」を空の文字列にする必要はない。変数宣言だけで良い。
「var tax = 1.1;」で、変数「tax」を関数内ではなく、関数の外側で宣言するべき(軽量化のため)
変数「P」を宣言しない
変数「satou」を関数内で宣言する
「単価」の<input>
タグのtype
属性をnumber
にすることで数字以外の入力を規制
「input」タグに閉じタグはいらない
ここまでのことをすべて踏まえて改善したコード
html
1<p class="q-body">
2 <label>単価:<input id="q4input" type="number" size="4"></label>
3 <button id="q4button" onclick="btnClickQ()">税込み価格計算</button>
4 <p> 税込み価格(10%): <span id="q4output"></span></p>
5</p>
javascript
1 var output = document.getElementById("q4output");
2 var input = document.getElementById("q4input");
3 var tax = 10; //%指定
4
5 function btnClickQ() {
6 var PriceInTax = input.value * (1 + (tax / 100));
7 output.textContent = Math.round(PriceInTax);
8 }
最初のコードの面影がありませんね笑
長くなってしまい、すみません。
私もまだまだですが、貴方も諦めずに頑張ってください!!