0
respostas

Problemas JavaScript

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";
    } 
    }
)