JavaScriptによるHTML画面操作、および投稿データのパラメーター取得

今回は、furimaアプリにおける販売価格の入力から10%の手数料と利益の表示について、JavaScriptを利用して行うことが出来た。

app/javascript/packs/application.js

があり、その中に

require("../fee_count")

を入力する。

app/javascript　に　fee_cout.js　を作成。

innerHTMLを利用して表示させた。

金額入力についてgetElementByIdを利用して金額欄と手数料欄、利益欄のidを取得。

変数.valueで数値を取得した。

function fee_count() {

const itemPrice = document.getElementById("item-price");

itemPrice.addEventListener('input',() => {

const countVal = itemPrice.value;

const addTaxPrice = document.getElementById("add-tax-price");

addTaxPrice.innerHTML = `${Math.floor(countVal/10)}`;

const profit = document.getElementById("profit");

profit.innerHTML = `${countVal - Math.floor(countVal/10)}`;

});

};

window.addEventListener('load', fee_count);

new.html.erb　にて、商品出品（投稿）をおこなった。

投稿した商品はコントローラーのストロングパラメーターにて取得がされた。

その際に、どの情報を取得するかparams.require(:item).permit(:item_name,:image・・・)

となったが、ビューファイルではitem_imageと指定していた。しかしながら、アクティブストレージでは画像ファイル？はimageと指定していることから:imageと記載する必要がある。

アクティブストレージのDBが見れないので覚えておこう。

これで商品出品機能は完了。あとはテストコードの記載となる。