A story that turbolinks was confused by doing something wrong

This article uses the installed Rails 6.0.0 About JavaScript in it. While making a copy app of the flea market app with Rails, I implemented the selling price with JavaScript! 9b24e01a49b7e4729ba9f315f7554ca5.png

item_price.js


window.addEventListener('load', () => {
  const itemPrice = document.getElementById("item-price");
  itemPrice.addEventListener("input", () => {
    const inputValue = itemPrice.value;
   

  const addTaxDom = document.getElementById("add-tax-price");
  addTaxDom.innerHTML = (Math.floor(inputValue * 0.1));
    

  const saleProfit = document.getElementById("profit"); 
    const value_result = inputValue * 0.1
    saleProfit.innerHTML = (Math.floor(inputValue - value_result));      
  })
});

The implementation was successful and I was happy to move on to the next implementation, and sometimes when I entered the price to list, the commission and profit calculation did not work. Why? As a result of various trials and errors, it seems that this description was bad.

require("turbolinks").start()


This description is the description defined in application.js. Please pay attention to "turbolinks" in this. The meaning is "a library for speeding up page transitions by Ajax". It's a great advantage, but it seems that it sometimes has bad Java Script, causes small bugs, does not call ready, does not change header, etc. Lol I would like to use it because it has merits, but what kind of time is it used?

How to use turbolinks

If you want to speed up page rendering even at higher development costs When the amount of Javascript description is small Sites that mainly return views created from Rails, etc.

On the contrary, sites of a scale that does not need to speed up page rendering, etc. When the amount of Javascript description is large If you write css or JavaScript separately for each page, the merit of using it will be reduced.

Summary

When using Turbolinks, you need to understand the behavior well. We recommend that you carefully consider the merits and demerits of the product before operating it.

Recommended Posts

A story that turbolinks was confused by doing something wrong
The story of making it possible to build a project that was built by Maven with Ant
A story about creating a service that tells a story of a portfolio by developing alone
[Java] The story that the expected array was not obtained by the String.split method.
A story that was embarrassing to give anison file to the production environment
About the matter that was confused by "param is missing or the value is empty:".
A story that an inexperienced beginner was having trouble setting up Rails Server.
Point memo that was moss when building a docker container created by a colleague
A story that I was really into when I did triple DES with ruby