Ola
Fiz uma modificação no html incluindo uma parte onde marca os ingressos adquiridos. E passei uns dois ou três dias tentando montar o arquivo.js. Achei o comando .replace e e tentei modifica-lo inúmeras vezes ate que o resultado fosse satisfatório. No entanto descobri que o .replace troca apenas uma vez as variaveis , Logo no meu codigo o cliente pode comprar apenas uma quantidade por vez, se comprar 10 ingressos de pista e quiser mais ingressos de pista não funciona kkkk. Todo esse trabalho me deixou feliz porque tentei ate chegar em algum lugar mas triste por não conseguir de outra forma. Agora vou lá quietinha ver o resultado que voces oferecem kkkkkk. Favor não reparar na quantidade de variaveis tambem.. (acho que exagerei). Tive que dividir em duas partes que não cabia tudo aqui.
html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/_reset.css">
<link rel="stylesheet" href="./styles/style.css">
<title>e-Ticket</title>
</head>
<body>
<header>
<img class="logo" src="./assets/PNG/Logo e-tricket.png" alt="Logo">
</header>
<main class="container">
<div class="grafismo"></div>
<h1>Compre seu <span>ingresso</span></h1>
<form action="">
<label class="input-group">
Escolha o tipo
<select name="tipo-ingresso" id="tipo-ingresso">
<option value="inferior">Cadeira inferior</option>
<option value="superior">Cadeira superior</option>
<option value="pista">Pista</option>
</select>
</label>
<label class="input-group">Qtde.
<input type="number" id="qtd" placeholder="00" min="1" max="10">
</label>
<button onclick="comprar()" type="button">Comprar</button>
</form>
<img class="hachuras" src="./assets/SVG/Hachuras.svg" alt="">
<section>
<h2>Quantidade adquririda</h2>
<ul class="lista1">
<li>Pista<span id="compra-pista"> 0 </span></li>
<li>Cadeira superior<span id="compra-superior"> 0 </span></li>
<li>Cadeira inferior<span id="compra-inferior"> 0 </span></li>
</ul>
<img src="./assets/PNG/ingressoazul.jpg" alt="ingresso azul" width="200" height="150">
</section>
<img class="hachuras" src="./assets/SVG/Hachuras.svg" alt="">
<section>
<h2>Quantidade disponível</h2>
<ul class="lista2">
<li>Pista<span id="qtd-pista">100</span></li>
<li>Cadeira superior<span id="qtd-superior">200</span></li>
<li>Cadeira inferior<span id="qtd-inferior">400</span></li>
</ul>
<img src="./assets/Ingresso.svg" alt="">
</section>
</main>
<script src="js/app.js"></script>
</body>
</html>
