Olá pessoal, alguém poderia me dar uma força de como posso fazer para quando o formulário de remover peça estiver com o display 'block'(mostrando na tela), caso o usuário aperte o botão para adicionar peça, apareça uma mensagem de erro e não apareça o formulário de adicionar peça. OBS: Sou bem iniciante na linguagem JS.
Código HTML:
<div class="operacao">
<ul>
<li><button id="add">Adicionar Item</button></li>
<li><button id="remo">Remover Item</button></li>
</ul>
</div>
<div class="container">
<form class="entrada-usuario">
<fieldset>
<legend>Selecione para qual cliente é a peça:</legend>
<br>
<select class="input-padrao">
<option>1</option>
</select>
</fieldset>
<br>
<br>
<label for="codigo-desenho">Insira o N°/Código do desenho da peça:</label>
<br>
<br>
<input type="text" id="codigo-desenho" class="input-padrao" required placeholder="Insira o N° ou Código aqui">
<br>
<label for="quantidade">Insira a quantidade de peças:</label>
<br>
<input type="number" id="quantidade" class="input-padrao" required placeholder="0" min="0">
<br>
<input type="submit" id="enviar" value="Adicionar Peça" class="btn">
</form>
</div>
<div class="container-2">
<form class="remover-usuario">
<fieldset>
<legend>Selecione de qual cliente é a peça:</legend>
<br>
<select class="input-padrao">
<option>1</option>
</select>
</fieldset>
<br>
<label for="codigo-desenho">Insira o N°/Código do desenho da peça:</label>
<br>
<input type="text" id="codigo-desenho" class="input-padrao" required placeholder="Insira o N° ou Código aqui">
<br>
<label for="quantidade">Insira a quantidade de peças:</label>
<br>
<input type="number" id="quantidade" class="input-padrao" required placeholder="0" min="0">
<br>
<input type="submit" id="remover" value="Remover Peça" class="btn">
</form>
</div>
<div>
<h2 id="informar"></h2>
</div>
CÓDIGO CSS:
.operacao button{
background-color:inherit;
display: inline-block;
width:20%;
margin: 0 6.5%;
text-align:center;
border: 2px solid black;
border-radius: 5px;
padding: 20px;
box-sizing: border-box;
font-size: 26px;
font-weight: bold;
}
.operacao li{
display: inline-block;
width:20%;
margin: 0 6.5%;
text-align:center;
padding: 20px;
box-sizing: border-box;
font-size: 26px;
font-weight: bold;
}
.operacao ul{
margin: 50px auto 50px auto;
}
.operacao button{
width:100%;
}
.container{
display: none;
}
.container-2{
display:none;
}
form{
text-align: center;
width:33%;
height:auto;
display: absolute;
border: 2px solid black;
border-radius: 5px;
padding-top: 30px;
padding-bottom: 30px;
font-size: 20px;
font-weight: bold;
margin-bottom:30px;
}
.input-padrao {
font-size: 14px;
background-color: aquamarine;
text-align: center;
border-radius: 5px;
height:2.5em;
width:40%;
}
select, option{
font-size: 14px;
font-weight: bold;
height:2.5em;
width:auto;
text-transform: uppercase;
}
.btn{
font-size: 18px;
height:3.0em;
width:33%;
background-color: blue;
color: white;
border-radius: 6px;
}
#informar{
font-size: 24px;
text-align: center;
font-weight: bold;
color: red;
text-decoration: underline red;
text-transform: uppercase;
}
Código JS:
var btnAdd = document.querySelector('#add');
var btnRemo = document.querySelector('#remo');
var container = document.querySelector('.container')
var container2 = document.querySelector('.container-2')
var informe = document.getElementById("informar")
btnAdd.addEventListener('click', function() {
if(container.style.display === 'block'){
container.style.display = 'none';
informe.innerHTML = ""
}
else{
container.style.display = 'block'
informe.innerHTML = ""
}
}
)
btnRemo.addEventListener('click', function() {
if(container2.style.display === 'block'){
container2.style.display = 'none';
informe.innerHTML = ""
}
else{
container2.style.display = 'block'
informe.innerHTML = ""
}
if(container.style.display === 'block'){
container2.style.display = 'none';
informe.innerHTML = "Não é possível adicionar e remover peças ao mesmo tempo, por favor feche o formulário de uma operação";
}
else if(container2.style.display ==='block'){
container.style.display = 'none'
informe.innerHTML = "Não é possível adicionar e remover peças ao mesmo tempo, por favor feche o formulário de uma operação";
}
}
)