I want to implement prototype for calculate system in javascript with rails
Seemingly it’s not wrong code but doesn’t execute it
this code attempt to get html elements
then caluculate value for each types
I checked process with console.log
so that I noticed that I couldn’t go to in the if state
could you like to help me?
estimate js
function estimate(Genre, Amount) {
var estimated;
if(Genre == "Add Genre ") {
estimated = Amount * 11111;
price.value = estimated;
} else if (Genre == "Add Topic") {
estimated = Amount * 11111;
price.value = estimated;
}
}
export default estimate;
application js
var initAmount = 1;
var Genre;
var selected = document.getElementById("selected")
var amount = document.getElementById("amount")
var price = document.getElementById("price");
document.addEventListener('turbolinks:load', () => {
amount.addEventListener("change", function(){
Amount = this.value;
Amount = parseInt(selectedAmount);
estimate(Genre, Amount);
}
selected.addEventListener("change", function(){
console.log('Selected Genre:', Genre);
Genre = this.value;
estimate(Genre, Amount);
});
}
_form.hrml.erb
<%= form_with model: @order, url: checkouts_path ,remote: true do |f| %>
<div class ="field col-12">
<% f.label :ad_type %><br />
<%= f.select :ad_type, ["Choose Type", t("layout.add_genre"),
t("layout.add_topic") ], {}, {id: "selected"} %><br />
</div>
<div class ="field col-12">
<%= f.label :amount %><br />
<%= f.number_field :amount,value: 1, id: "amount" %><br />
</div>
<div class ="field col-12">
<%= f.label :price %><br />
<%= f.text_field :price ,readonly: true,id: "price"%><br />
</div>
<div class="actions col-12 ">
<%= f.submit "checkout", class: "site-btn mb-sm-1" %>
</br>
</div>
<% end %>
locales en.yml
en:
layout:
add_genre: Add Genre
add_topic: Add Topic