Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite. Será que tem algum usuário para me ajudar num trabalho escolar?Tenho que fazer um sistema de gerenciamento de armários,estou tendo problemas com um código.
Manda o seu código para nos dar uma noção desse problema.
A ideia é que quando selecionarmos a opção de "Pendente"/"Pago" a cor mude automaticamente,mas não estou conseguindo fazer isso.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<title> Easy Lockers </title>
<style type="text/css">
html, body {
height: 100%; width:100%;
}
body {
overflow: hidden;
background-color: #b8b9ba;
margin: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.espaco {
width: 1%;
float: left;
background-color: #b8b9ba;
}
.container-menu {
overflow: hidden;
width: 15%;
height: 97%;
float: left;
border: 3px solid #8f9599;
border-radius: 10px;
background-color: #8f9599;
text-align: xcenter;
}
.grid-container {
display: grid;
height: 97%;
grid-template-columns: auto auto auto auto auto auto auto auto auto auto ;
grid-gap: 10px;
border-radius:10px;
background-color: #8f9599;
padding: 9px;
width: 82%;
}
.grid-container > div {
height:100%;
border: 2px solid #0d2f4c;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.8);
text-align:center;
font-size: 30px;
}
.btn-menu {
color: #fff;
background-color: #286090;
border:1px solid #0d2f4c;
border-radius:10px;
display:inline-block;
width: 85%;
height 20px;
cursor:pointer;
font-size:20px;
padding:8px 25px;
}
.btn-menu:hover {
color: #fff;
background-color: #0f4d82;
border-color: #204d74;
}
.btn-grade {
color: #fff;
border:1px solid #0d2f4c;
border-radius:8px;
width: 100%;
height:100%;
cursor:pointer;
font-size:20px;
padding:8px 25px;
background-color: #286090;
}
.btn-grade:hover {
color: #fff;
background-color: #0f4d82;
border-color: #204d74;
}
.btn-grade2 {
color: #fff;
border:1px solid #0d2f4c;
border-radius:8px;
width: 100%;
height:100%;
cursor:pointer;
font-size:20px;
padding:8px 25px;
background-color: #286090;
}
.btn-grade2:hover {
color: #fff;
background-color: #0f4d82;
border-color: #204d74;
}
.fechar{
text-decoration:none;
}
#btn{
width: 100px;
padding: 10px;
border: 1px solid black;
background-color: green;
color: white;
top: 40%;
left: 13%;
}
#btn:active{
box-shadow: none;
outline: none;
transform: scale(0.9);
}
</style>
</head>
<body>
<div class = "container-menu">
<h3><img src="logoetec.png"/><h3>
<img width="100%" src="easylockers.png"/>
<br>
<br>
<br>
<input type="button" class="btn-menu" value="Bloco 1" onclick="location. href= 'Bloco A.html'">
<input type="button" class="btn-menu" value="Bloco 2" onclick="location. href= 'Bloco B.html'">
<input type="button" class="btn-menu" value="Bloco 3" onclick="location. href= 'Bloco C.html'">
<input type="button" class="btn-menu" value="Bloco 4" onclick="location. href= 'Bloco D.html'">
</div>
<div class ="espaco">
<h3></h3>
</div>
<div class="grid-container">
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="001" id="1"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade2" value="002" id="2"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="003" id="3"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="004" id="4"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="005" id="5"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="006" id="6"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="007" id="7"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="008" id="8"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="009" id="9"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="010" id="10"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="011" id="11"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="012" id="12"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="013" id="13"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="014" id="14"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="015" id="15"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="016" id="16"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="017" id="17"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="018" id="18"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="019" id="19"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="020" id="20"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="021" id="21"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="022" id="22"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="023" id="23"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="024" id="24"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="025" id="25"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="026" id="26"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="027" id="27"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="028" id="28"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="029" id="29"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="030" id="30"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="031" id="31"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="032" id="32"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="033" id="33"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="034" id="34"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="035" id="35"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="036" id="36"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="037" id="37"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="038" id="38"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="039" id="39"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="040" id="40"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="041" id="41"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="042" id="42"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="043" id="43"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="044" id="44"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="045" id="45"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="046" id="46"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="047" id="47"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="048" id="48"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="049" id="49"></div>
<div><input type="button" href="#myModal" data-toggle="modal" class="btn-grade" value="050" id="50"></div>
<div class="modal fade" id="myModal" role="dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<form role="form">
<div class="form-group">
<label for="Nome"><h4>Nome</h4></label>
<input type="text" class="form-control" id="Nome" placeholder="">
</div>
<div class="form-group">
<label for="Nome"><h4>RM</h4></label>
<input type="text" class="form-control" id="RM" placeholder="">
</div>
<div class="form-group">
<label for="psw"> <h4>Turma</h4></label>
<input type="text" class="form-control" id="Turma" placeholder="">
</div>
<div class="form-group">
<label for="psw"><h4> Telefone </h4></label>
<input type="text" class="form-control" id="Telefone" placeholder="">
</div>
<div class="form-group">
<label for="psw"><h4> Email </h4></label>
<input type="text" class="form-control" id="Email" placeholder="">
</div>
<div class="form-group">
<label for="psw"><h4> Data de locação </h4></label>
<input type="text" class="form-control" id="Data de locação" placeholder="">
</div>
<label for="pago">Pago</label>
<input type="checkbox" name="" id="pago"><br>
<label for="pendente">Pendente</label>
<input type="checkbox" name="" id="pen"><br>
<label for="desocupado">Desocupado</label>
<input type="checkbox" name="" id="des"><br><br><br><br><br><br>
<button id="btn" onclick="sla()">Salvar</button>
</form>
</div>
</div>
<div class="modal fade" id="myModal2" role="dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<form role="form">
<div class="form-group">
<label for="Nome"><h4>Nome</h4></label>
<input type="text" class="form-control" id="Nome" placeholder="">
</div>
<div class="form-group">
<label for="Nome"><h4>RM</h4></label>
<input type="text" class="form-control" id="RM" placeholder="">
</div>
<div class="form-group">
<label for="psw"> <h4>Turma</h4></label>
<input type="text" class="form-control" id="Turma" placeholder="">
</div>
<div class="form-group">
<label for="psw"><h4> Telefone </h4></label>
<input type="text" class="form-control" id="Telefone" placeholder="">
</div>
<div class="form-group">
<label for="psw"><h4> Email </h4></label>
<input type="text" class="form-control" id="Email" placeholder="">
</div>
<div class="form-group">
<label for="psw"><h4> Data de locação </h4></label>
<input type="text" class="form-control" id="Data de locação" placeholder="">
</div>
<label for="pago">Pago</label>
<input type="checkbox" name="" id="pago"><br>
<label for="pendente">Pendente</label>
<input type="checkbox" name="" id="pen"><br>
<label for="desocupado">Desocupado</label>
<input type="checkbox" name="" id="des"><br><br><br><br><br><br>
<button id="btn2" onclick="sla2()">Salvar</button>
</form>
</div>
</div>
<script type="text/javascript">
function sla2(){
botao = document.getElementById("2");
pago = document.getElementById("pago");
pendente = document.getElementById("pen");
desocupado= document.getElementById("des");
if(pago.checked == true){
botao.style.backgroundColor = "#7dc67b";
}
if(pendente.checked == true){
botao.style.backgroundColor = "#ba4141";
}
if(desocupado.checked == true){
botao.style.backgroundColor = "#286090";
}
}
</script>
<script type="text/javascript">
function sla(){
botao = document.getElementById("1");
pago = document.getElementById("pago");
pendente = document.getElementById("pen");
desocupado= document.getElementById("des");
if(pago.checked == true){
botao.style.backgroundColor = "#7dc67b";
}
if(pendente.checked == true){
botao.style.backgroundColor = "#ba4141";
}
if(desocupado.checked == true){
botao.style.backgroundColor = "#286090";
}
}
</script>
<script type="text/javascript">
document.getElementById("btn").addEventListener("click", function(event){
event.preventDefault();
});
</script>
<script type="text/javascript">
document.getElementById("btn2").addEventListener("click", function(event){
event.preventDefault();
});
</script>
</body>
</html>Olá!
Veja se isso te ajuda:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title> Easy Lockers </title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #e7eaed;
margin: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 600px;
}
.espaco {
width: 1%;
float: left;
background-color: #b8b9ba;
}
.container-menu {
overflow: hidden;
width: 15%;
height: 97%;
float: left;
border: 3px solid #8f9599;
border-radius: 10px;
background-color: #fff;
text-align: center;
}
.grid-container {
display: grid;
height: 97%;
grid-template-columns: auto auto auto auto auto;
grid-gap: 10px;
border-radius: 10px;
background-color: #fff;
padding: 9px;
width: 82.4%;
}
.grid-container a {
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.grid-container a.pago {
background-color: #7dc67b;
background-color: #ba4141;
background-color: #286090;
}
.btn-menu {
color: #fff;
background-color: #286090;
border: 1px solid #0d2f4c;
border-radius: 10px;
display: inline-block;
width: 85%;
height 20px;
cursor: pointer;
font-size: 20px;
padding: 8px 25px;
}
.btn-menu:hover {
color: #fff;
background-color: #0f4d82;
border-color: #204d74;
}
</style>
</head>
<body>
<div class="container-menu">
<h3><img src="logoetec.png"/></h3>
<img width="100%" src="easylockers.png"/>
<br>
<br>
<br>
<input type="button" class="btn-menu" value="Bloco 1" onclick="location. href= 'Bloco-A.html'">
<input type="button" class="btn-menu" value="Bloco 2" onclick="location. href= 'Bloco-B.html'">
<input type="button" class="btn-menu" value="Bloco 3" onclick="location. href= 'Bloco-C.html'">
<input type="button" class="btn-menu" value="Bloco 4" onclick="location. href= './'">
</div>
<div class="espaco"></div>
<div class="grid-container"></div><div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Armário <span>Nº</span></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form role="form" class="modal-form">
<input type="hidden" name="element-id" value="">
<div class="modal-body">
<div class="row">
<div class="col-12 form-group">
<label for="Nome">Nome</label>
<input type="text" class="form-control" id="Nome" name="nome">
</div>
<div class="col-sm-6 form-group">
<label for="RM">RM</label>
<input type="text" class="form-control" id="RM" name="rm">
</div>
<div class="col-sm-6 form-group">
<label for="Turma">Turma</label>
<input type="text" class="form-control" id="Turma" name="turma">
</div>
<div class="col-sm-6 form-group">
<label for="Telefone"> Telefone </label>
<input type="text" class="form-control" id="Telefone" name="telefone">
</div>
<div class="col-sm-6 form-group">
<label for="Email"> Email </label>
<input type="email" class="form-control" id="Email" name="email">
</div>
<div class="col-sm-6 form-group">
<label for="Data de locação"> Data de locação </label>
<input type="date" class="form-control" id="Data de locação" name="data-de-locacao">
</div>
<div class="col-12">
<label>Status</label>
<div class="custom-control custom-radio">
<input id="Pago" type="radio" class="custom-control-input" name="status" value="1">
<label class="custom-control-label" for="Pago">Pago</label>
</div>
<div class="custom-control custom-radio">
<input id="Pendente" type="radio" class="custom-control-input" name="status" value="2">
<label class="custom-control-label" for="Pendente">Pendente</label>
</div>
<div class="custom-control custom-radio">
<input id="Desocupado" type="radio" class="custom-control-input" name="status" value="0" checked>
<label class="custom-control-label" for="Desocupado">Desocupado</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Salvar</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
// define dados gerais dos armários
var armarios = {
'quantidade': 50
};
// cria os clicable buttons dos armários
var clicable_buttons = '';
for (i = 1; i <= armarios.quantidade; i++) {
clicable_buttons += '<a href="#myModal" data-toggle="modal" id="element-' + i + '" class="btn btn-primary">' + (i).pad(3) + '</a>';
}
$('.grid-container').html(clicable_buttons);
// quando uma modal for 'chamada'
$('#myModal').on('show.bs.modal', function (event) {
var element = $(event.relatedTarget) // element that triggered the modal
var armario_number = element.html();
var modal = $(this);
modal.find('.modal-title').text('Armário Nº ' + armario_number);
modal.find('input[name="element-id"]').val(element.prop('id'));
});
var clicable_status = {
"0": 'primary',
"1": 'success',
"2": 'danger',
}
// quando o formulário modal for submetido
$('.modal-form').submit(function (e) {
e.preventDefault();
// coloca os dados do form num array
var data = $(this).serializeArray();
// troca o estilo do clicable element
$('#' + data[0].value).removeAttr('class').addClass('btn btn-' + clicable_status[data[7].value]);
// esconde a modal
$('#myModal').modal('hide');
// reseta o modal-form
$(this).trigger('reset');
});
});
Number.prototype.pad = function (size) {
var s = String(this);
while (s.length < (size || 2)) {
s = "0" + s;
}
return s;
}
</script>
</body>
</html>
Passe mais detalhes;