2

Desenvolvi uma aplicação em Javascript, Jquery e HTML.

Gostaria de fazer com que quando o usuário clicar no botão btnalterar, a textarea criada altere a sua cor de background.

Alguem tem uma ideia de como fazer isso?

<html>
    <meta charset="UTF-8"> <!-- add special characters -->
    <head>
        <title>Página</title> <!-- Add page title -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- add Jquery CDN -->
        <link href src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"/> <!-- add bootstrap css CDN -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- add Bootstrap CDN -->
        <link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->
    </head>

    <body class="corpo">
        <h1><center>Página Monstra</center></h1>
        <hr/>
        <script type="text/javascript"> // all javascript/jquery code start here

            function add_field() 
            {

                // ------------------------------------------------------
                var form = document.getElementsByTagName('form')[0],
                    input = document.createElement('textarea');
                input.setAttribute('type', 'textarea');
                input.setAttribute('name', 'item');
                form.appendChild(input);

                input = document.createElement('button');
                input.setAttribute('type', 'button');
                input.setAttribute('name', 'item');
                input.setAttribute('class', 'btnalterar');
                form.appendChild(input);
            };

            var count = 0;
            function contador() 
            {
                count++;
                console.log(count); // show count in console

                if(count >= 10){
                    alert("VOCÊ NÃO PODE ADICIONAR MAIS CAIXAS"); // alert dialog
                    $( ".button" ).prop( "disabled", true ); // disable button

                }
            };
        </script>

        <form name="input" method="get">
            <div class="ui-input-text">      
                <div data-role="navbar">
                    <button type="button" class="button" onclick="add_field(); contador();">ADICIONAR CAIXAS DE TEXTO</button><br><br> <!-- Create add button -->
                </div>
            </div>
        </form>

        <!-- SALVAR -->

        <form name="input" method="get">
            <div class="ui-input-text">      
                <div data-role="navbar">
                    <button type="button" class="btnsave">SALVAR</button><br><br> <!-- Create save button -->
                </div>
            </div>
        </form>

    </body>
</html>

2
  • Tens estilos implementados logo a seguir à abertura da tag <body> que deveriam estar no <head> logo a seguir ao bootstrap.css em vez disso.
    – Chun
    24/09/2017 às 13:09
  • Vendo bem ainda há mais erros do que isso. Tinhas um CSS link mal fechado, estava <link href src="..."></script>, quando devia estar <link href="..."/>.
    – Chun
    24/09/2017 às 13:26

1 Resposta 1

1

Sei muito pouco de Javascript, mas você pode programar para quando o btnalterar for clicado, ele mudar o style do textarea:

<html>
    <meta charset="UTF-8"> <!-- add special characters -->
    <head>
        <title>Página</title> <!-- Add page title -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- add Jquery CDN -->
        <link href src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"/> <!-- add bootstrap css CDN -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- add Bootstrap CDN -->
        <link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->
    </head>

    <body class="corpo">
        <h1><center>Página Monstra</center></h1>
        <hr/>
        <script type="text/javascript"> // all javascript/jquery code start here
            function add_field() 
            {
                // ------------------------------------------------------
                var form = document.getElementsByTagName('form')[0],
                    input = document.createElement('textarea');
                input.setAttribute('id',count.toString());
                input.setAttribute('type', 'textarea');
                input.setAttribute('name', 'item');
                form.appendChild(input);

                input = document.createElement('button');
                input.setAttribute('onclick',"document.getElementById(" + count + ").style = 'background-color:blue;';");
                input.setAttribute('type', 'button');
                input.setAttribute('name', 'item');
                input.setAttribute('class', 'btnalterar');
                form.appendChild(input);
            };

            var count = 0;

            function contador() 
            {
                count++;
                console.log(count); // show count in console

                if(count >= 10){
                    alert("VOCÊ NÃO PODE ADICIONAR MAIS CAIXAS"); // alert dialog
                    $( ".button" ).prop( "disabled", true ); // disable button
                }
            };
        </script>

        <form name="input" method="get">
            <div class="ui-input-text">      
                <div data-role="navbar">
                    <button type="button" class="button" onclick="add_field(); contador();">ADICIONAR CAIXAS DE TEXTO</button><br><br> <!-- Create add button -->
                </div>
            </div>
        </form>

        <!-- SALVAR -->

        <form name="input" method="get">
            <div class="ui-input-text">      
                <div data-role="navbar">
                    <button type="button" class="btnsave">SALVAR</button><br><br> <!-- Create save button -->
                </div>
            </div>
        </form>

    </body>
</html>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .