指定されたHTML 税込計算

Question

初心者のためこのような無礼な文になってしまったことを心よりお詫び申し上げます。
一応、指定されたHTMLにATOM等で自作したものを埋め込む（？）。
そして表示から結果が出るというフローになっています。（説明が下手くそで申し訳ございません。）
結果としてほしいのは、自由な単価を入力し、計算結果のボタンをクリックすると10%課税された結果が表示欄に出てくるという内容です。
ご教授お願いいたします。
指定されているHTMLのコード↓
単価を入力し，「税込み価格計算」ボタンをクリックすると，単価に10%の消費税が加算された「税込み価格（10%）」が表示されるようなプログラムを記述しなさい．整数の数値以外の入力については考えないものとする．
結果が小数となる場合には四捨五入した結果を表示すること．
（ヒント：ユーザの入力値の取得には「.value」を使用する．例えば，getElementById等で取得した入力フォームのオブジェクトXXの値をプログラム内で読み込む場合はXX.valueと記述する．）

</p> <p class="q-body"> 単価：<input id="q4input" type="text" size="4"></input> <br> <button id="q4button">税込み価格計算</button><br> 税込み価格（10%）：<span id="q4output"></span> </p> </div>

今、自作したコードがこちらになります。

ar saori=document.getElementById(q4output);
var satou=""
function btnClickQ(){
var P =document.getElementById(q4Pbutton);

var tax = 1.1;
return price + price * tax;
output.textContent=satou;
}
}
やはり、この自作したコードでは起動しませんでした。

Comments

[thyda.eiqau]

https://teratail.com/help/question-tips
https://teratail.com/help/avoid-asking
をお読みください。

[dodox86]

なぜ、こうも無邪気に丸投げられるのか。

[dodox86]

JavaではなくてJavaScriptでは？　（知らんけど）

[AOJSI]

返信ありがとうございます。
初心者のためこのような無礼な文になってしまったことを心よりお詫び申し上げます。
一応、指定されたHTMLにATOM等で自作したものを埋め込む（？）。
そして表示から結果が出るというフローになっています。（説明が下手くそで申し訳ございません。）
結果としてほしいのは、自由な単価を入力し、計算結果のボタンをクリックすると10%課税された結果が表示欄に出てくるという内容です。
ご教授お願いいたします。
指定されているHTMLのコード↓
単価を入力し，「税込み価格計算」ボタンをクリックすると，単価に10%の消費税が加算された「税込み価格（10%）」が表示されるようなプログラムを記述しなさい．整数の数値以外の入力については考えないものとする．
結果が小数となる場合には四捨五入した結果を表示すること．
（ヒント：ユーザの入力値の取得には「.value」を使用する．例えば，getElementById等で取得した入力フォームのオブジェクトXXの値をプログラム内で読み込む場合はXX.valueと記述する．）
</p>
<p class="q-body">
単価：<input id="q4input" type="text" size="4"></input>
<br>
<button id="q4button">税込み価格計算</button><br>
税込み価格（10%）：<span id="q4output"></span>
</p>
</div>

今、自作したコードがこちらになります。

ar saori=document.getElementById(`q4output`);
var satou=""
function btnClickQ(){
var P =document.getElementById(`q4Pbutton`);

var tax = 1.1;
return price + price * tax;
output.textContent=satou;
}
}
やはり、この自作したコードでは起動しませんでした。

[BeatStar]

まず、基礎からやりましょう。

JavaScriptとJavaは別物です。

メロンとメロンパンぐらい違います。

[BeatStar]

それと、編集ができるので編集しましょう。

コードは"<code>"または"<コード>"のボタンを押して出てくるやつの中に書きましょう。

[BeatStar]

さらにデバッグぐらいはしましょう

[AOJSI]

ご返信ありがとうございます。
BeatStar様の仰る通りだと私も理解しております。
しかしながら、3日掛けても解くことが出来ずこのような質問をさせていただきました。

Answer 1

問題点

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」を取得していない

「取りあえず動く」程度まで改善したコード

<p class="q-body">
    単価：<input id="q4input" type="text" size="4"></input>
    <br>
    <button id="q4button" onclick="btnClickQ()">税込み価格計算</button><br> 税込み価格（10%）：
    <span id="q4output"></span>
</p>
</div>

    var output = document.getElementById("q4output");
    var input = document.getElementById("q4input");
    var satou = "";

    function btnClickQ() {
        var P = document.getElementById("q4button");

        var tax = 1.1;
        satou = input.value * tax;
        output.textContent = Math.round(satou);
    }

改善すればより良いかも？

「var satou = "";」で、変数「satou」を空の文字列にする必要はない。変数宣言だけで良い。
「var tax = 1.1;」で、変数「tax」を関数内ではなく、関数の外側で宣言するべき（軽量化のため）
変数「P」を宣言しない
変数「satou」を関数内で宣言する
「単価」の<input>タグのtype属性をnumberにすることで数字以外の入力を規制
「input」タグに閉じタグはいらない

ここまでのことをすべて踏まえて改善したコード

<p class="q-body">
    <label>単価：<input id="q4input" type="number" size="4"></label>
    <button id="q4button" onclick="btnClickQ()">税込み価格計算</button>
    <p> 税込み価格（10%）： <span id="q4output"></span></p>
</p>

    var output = document.getElementById("q4output");
    var input = document.getElementById("q4input");
    var tax = 10; //％指定

    function btnClickQ() {
        var PriceInTax = input.value * (1 + (tax / 100));
        output.textContent = Math.round(PriceInTax);
    }

最初のコードの面影がありませんね笑
長くなってしまい、すみません。
私もまだまだですが、貴方も諦めずに頑張ってください！！