0
I’m making the settings system of apple Macbook where depending on the settings the price increases on time. But I have a problem where if I click more often on the desired config it keeps adding the price. And I want to limit to when I click it 1 time it blocks or no longer responds to the click if I try to click again.
I’m going to have to use Jsfiddle for you to test the code on account of the very large CSS code part
(Down there is the total that is updated on time) (NOTE: I’ve looked for something related but it didn’t help me)
html
<!DOCTYPE html>
<html>
<head>
<title>13-inch MacBookPro - @CauaS</title>
<link rel="stylesheet" href="Mac.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav class="NavUp">
<ul>
<li>aa</li>
</ul>
</nav>
<header class="McP"> <!-- Specs-->
<h3>MacBook Pro</h3>
<p>Overview</p>
<p>macOS</p>
<p>Tech Specs</p>
<hr>
</header>
<section class="trade"> <!--Trade ----->
<h4>Add a trade-in</h4>
<p>Get a refund of up to $2530 when you trade in an eligible computer, or recycle it for free.*</p>
<a href="#">Get Started</a>
<hr>
</section>
<div class="Info">
<div class="img"></div>
<h1>Customize your 13-inch <br>
MacBook Pro - Space Gray</h1>
<section class="specs">
<p>1.4GHz quad‑core 8th‑generation Intel Core i5 processor, Turbo Boost up to 3.9GHz <br>
</p>
<p>8GB 2133MHz LPDDR3 memory</p>
<p>128GB SSD storage</p>
<p>Retina display with True Tone</p>
<p>Intel Iris Plus Graphics 645 </p>
<p>Two Thunderbolt 3 ports</p>
<p>Backlit Keyboard - US English</p>
<hr>
</section>
<section class="ModificProcessor"> <!-- COnfig Process-->
<h6>Processor</h6>
<a href="#" class="Better">What processor is right for you ?</a>
<div class="Hz14"> <!-- config 1.4Hz-->
<p><strong> 1.4GHz quad‑core 8th‑generation <br>
Intel Core i5 processor, <br>
Turbo Boost up to 3.9GHz</strong></p>
</div>
<div class="Hz17"> <!-- config 1.7Hz-->
<p><strong>1.7GHz quad‑core 8th‑generation <br>
Intel Core i7 processor, <br>
Turbo Boost up to 4.5GHz
</strong> + $300.00</p>
</div>
</section>
<section class="ModificMemory"> <!-- config Memory-->
<h6>Memory</h6>
<a href="" class="BetterMemory">How much memory is right for you?
</a>
<div class="GB8"><br> <strong> 8GB 2133MHz LPDDR3
Memory</strong></div>
<div class="GB16"><br><strong> 16GB 2133MHz LPDDR3 Memory
</strong>+ $200.00 </div>
</section>
</div>
<nav class="NavDown"> <!-- Barra parte de baixo-->
<hr>
<p class="Pick">Pickup:</p>
<a href="#" class="Check">Check availability</a>
<div class="imgShop"></div>
<p class="Deli">Delivery:</p>
<p class="Stock">In Stock <br>
Free Shopping</p>
<a href="" class="Get">Get delivery dates</a>
<div class="imgBox"></div>
<h1 class="price">$</h1>
</nav>
<script src="Mac.js"></script>
</body>
Javascript
var Price = document.querySelector('.price');
//Processor
var Config1 = document.querySelector('.Hz14'); //1.4Hz , quad-core ,i5
var Config2 = document.querySelector('.Hz17'); //1.7Hz, quad-core, i7
//Memory
var Memory8 = document.querySelector('.GB8'); //8GB
var Memory16 = document.querySelector('.GB16'); //16GB
NormalPrice = 1.299;
Price.innerHTML = NormalPrice;
/*Porcessor*/
Config2.onmouseenter = function() {
Config2.style.borderColor = '#888888';
}
Config2.onmouseout = function() {
Config2.style.borderColor = '#cfcfcf';
}
Config2.onclick = function() {
Config1.style.border = '0.5px solid #cfcfcf';
Config2.style.border = '1.5px solid #0070c9';
NormalPrice = NormalPrice + 0.300;
Price.innerHTML = NormalPrice ;
Config2.onmouseout = function() {
Config2.style.borderColor = '#0070c9';
}
}
//Memory
Memory16.onmouseenter = function() {
Memory16.style.borderColor = '#888888';
}
Memory16.onmouseout = function() {
Memory16.style.borderColor = '#cfcfcf';
}
Memory16.onclick = function() {
Memory8.style.border = '0.5px solid #cfcfcf';
Memory16.style.border = '1.5px solid #0070c9';
NormalPrice = NormalPrice + 0.200;
Price.innerHTML = NormalPrice;
Memory16.onmouseout = function() {
Memory16.style.borderColor = '#0070c9';
}
}
Sorry about the code organization
css code in Jsfiddle, because of the size
Please put your code in the POST, avoid putting only in Jsfiddle
– Jakson Fischer
You might need something like this: https://www.javatips.net/api/ant-master/rxlibrary/src/main/java/support/adapters/debounced/DebouncedClickHandler.java
– Reginaldo Rigo