Estou fazendo o sistema de configurações do MacBook da apple onde dependendo das configurações o preço aumenta na hora. Mas estou com um problema onde se eu clicar mais vezes na config desejada ele continua adicionando os preço. E eu quero limitar para quando eu clicar nele 1 vez ele bloqueia ou não responde mais o click se eu tentar clica de novo.
Vou ter que usar JSFiddle para vocês testar o codigo por conta da parte do código CSS que é muito grande
(Lá em baixo fica o total que é atualizado na hora) (OBS: Eu ja procurei algo relacionado mas não me ajudou)
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';
}
}
Desculpe a organização do codigo
Codigo css ta no JSFiddle, por causa do tamanho