Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fbezerra

Js sujo

Por , em Javascript

Recommended Posts

fbezerra    0

fbezerra
Postado

Bom dia devs tudo bem? eu fiz um script para empresa onde os funcionários preenche as informações necessárias, até aí ok.. o ruim é o meu código que esta muito sujo eu queria otimizar ele, alguém pode me ajudar? muito obrigado

Segue o codigo abaixo: 

<!DOCTYPE html>
<html lang="pt_BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Script SQ</title>
    <style rel="stylesheet" type="text/css">
        body {
    
    margin: 0 auto;
        }
        .yellow{
            background-color:rgb(248, 248, 54);
        }
      </style>
</head>
<body>
    <div class="container-fluid">
        
        
         <div class="row">
        <div class="col">
                <center><img src="logo.png"> </center>
        <form>
    <br>Nome do Cliente:<br>
    <input type="text" class="form-control" name="nomeCliente" id="nomeCliente" placeholder="Nome do Cliente"><br>
    Código_Cliente / N° projeto vinculado:<br>
    <input type="text" class="form-control" name="CodCliente" id="CodCliente" placeholder="Código_Cliente / N° projeto vinculado"><br>
    Sistema:<br>
    <input type="text" class="form-control" name="sistema" id="sistema" placeholder="FOLHA OFFICE SAGE"><br>
    Base (banco de dados):<br>
    <input type="text" class="form-control" name="base" id="base" placeholder="SQL/DBF"><br>
    Versão / Release:<br>
    <input type="text" class="form-control" name="versao" id="versao" placeholder="Versão"><br>
    Certificado:<br>
    <input type="text" class="form-control" name="certificado" id="certificado" placeholder="A1/A3"><br>
    Empresa:<br>
    <input type="text" class="form-control" name="empresa" id="empresa" placeholder="0012"><br>
    Vigência:<br>
    <input type="text" class="form-control" name="vigencia" id="vigencia" placeholder="07/18"><br>
    Descrição(Erro/mensagem/print/arquivo):<br>
    <textarea type="text" class="form-control" name="descricao" id="descricao" placeholder="Descrição"></textarea><br>
    Solução Detalhada:<br>
    <textarea type="text" class="form-control" name="solucaoDetalhada" id="solucaoDetalhada" placeholder="Solução detalhada"></textarea><br>
    Pendência:<br>
    <input type="text" class="form-control" name="pendencia" id="pendencia" placeholder="Nada"><br>
    Tempo Considerado:<br>
    <input type="text" class="form-control" name="tempoConsiderado" id="tempoConsiderado" placeholder="1:00"><br>
    <input type="button" class="btn btn-info" id="btnMostrar" value="Mostrar" style="float:right; margin-bottom: 10px;" onclick="mostrar();">
    
    </form>
    </div>
    <div class="col yellow">
            <center><h3>SCRIPT ATENDIMENTO SQ</h3></center>
    <div id="conteudo"></div>
    
</div>
    </div>
</div>
    <script type="text/javascript">
    function mostrar(){
    
        var nomeCliente = document.getElementById('nomeCliente').value;
        var CodCliente = document.getElementById('CodCliente').value;
        var sistema = document.getElementById('sistema').value;
        var versao = document.getElementById('versao').value;
        var certificado = document.getElementById('certificado').value;
        var empresa = document.getElementById('empresa').value;
        var vigencia = document.getElementById('vigencia').value;
        var descricao = document.getElementById('descricao').value;
        var solucaoDetalhada = document.getElementById('solucaoDetalhada').value;
        var pendencia = document.getElementById('pendencia').value;
        var tempoConsiderado = document.getElementById('tempoConsiderado').value;

    var conteudo = "";

        document.getElementById('conteudo').innerHTML = " <br><span style='font-weight:bold'> " + "Nome do Cliente: </span>" + nomeCliente + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Código_Cliente / N° projeto vinculado: </span>" + CodCliente + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Sistema: </span>" + sistema + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Versão/Release: </span>" + versao + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Certificado: </span>" + certificado + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Empresa: </span>" + empresa + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Vigência </span>" + vigencia + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Descrição: </span>" + descricao + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Solução Detalhada: </span>" + solucaoDetalhada + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Descrição(Erro/mensagem/print/arquivo): </span>" + pendencia + "<br>";
        document.getElementById('conteudo').innerHTML += "<span style='font-weight:bold'> " + "Tempo Considerado: </span>" + tempoConsiderado + "<br>";   

        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;

        
    
    
</script>


</body>
</html>

eu queria também inserir um botão para copiar o 'conteudo' para facilitar pro funcionário se não tem que ficar selecionando e copiando com o mouse.

muito obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

A tag <center> é obsoleta em HTML5

 

Dica:

Você está consultado o documento diversas vezes para buscar o elemento de id conteudo.

Isso torna a página mais pesada para carregar.

 

Você pode fazer assim que fica melhor: 

document.getElementById('conteudo').innerHTML = "A\n"
" B\n"
" C\n"

// Ou assim
document.getElementById('conteudo').innerHTML = "A";
                                              + " B";
                                              + " C";

 

4 horas atrás, fbezerra disse:

eu queria também inserir um botão para copiar o 'conteudo' para facilitar pro funcionário se não tem que ficar selecionando e copiando com o mouse.

muito obrigado

 

Simples basta usar a API do navegador clipboard, fiz algo bem genérico aqui para você ver como proceder 

<div id="copiar_texto">Esse texto será copiado para área de transferência</div>

<button type="button" onclick="copiar();">Copiar o texto</button>

<script>
    function copiar() {
        var texto = document.getElementById('copiar_texto').innerText;
        navigator.clipboard.writeText(texto).then(function () {
            console.log('copiado');
        }, function () {
            console.warn('Erro ao copiar');
        });
    }
</script>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito