I am developing an application in HTML / JavaScript / Jquery and would like to know how I change the color of TEXTAREA SOURCE by clicking on the button ...
Does anyone have an idea?
<html>
<head>
<!-- <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> -->
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- add bootstrap css CDN -->
<link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--addJqueryCDN--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- add Bootstrap CDN -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script><!--librarydraggable--><h1><center>Página</center></h1><!--TitlePage--><hr/><!--Ocódigoabaixoéapenasumatemplatedevesercolocadoforadoformulário--><divid="template">
<button type="button" id="btnCaixaAzul" name="item" class="pular"> </button>
<button type="button" id="btnCaixaBranco" name="item" class="pular"> </button>
<button type="button" id="btnCaixaVerde" name="item" class="pular"> </button>
<button type="button" id="btnCaixaAmarela" name="item" class="pular"> </button>
<button type="button" id="btnCaixaVermelho" name="item" class="pular"> </button>
<button type="button" id="btnCaixaPreta" name="item" class="pular"> </button>
<button type="button" id="btnAumentarFonte" class="pular">↑</button>
<button type="button" id="btnDiminuirFonte" class="pular">↓</button>
<button type="button" id="btnCorText" name="item" class="pular"> COR </button>
<textarea id="0" type="textarea" name="item" class="caixa_descer"></textarea>
</div>
<!-- Fim do template -->
<form name="input" method="get" id="mover">
<div class="ui-input-text">
<div data-role="navbar">
<button type="button" class="button" id="btnAddCaixaTexto">ADICIONAR CAIXAS DE TEXTO</button><br><br> <!-- Create add button -->
<!-- <button onclick="info();">i</button> <br><br> -->
</div>
</div>
</form>
<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>
<div class="mover">
<br>
<button onclick="mover();">Click</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
var _clone_index = 0;
$("#btnAddCaixaTexto").on('click', function(){
// Vamos usar um número de índice exclusivo para cada nova instância do item clonado
_clone_index++;
// Verifica a quantidade de caixa já adicionada
if (_clone_index <= 10) {
$(this).parent().parent().after($("#template").clone().attr("id","_clone_" + _clone_index));
// Tornar o clone visível alterando CSS
$("#_clone_" + _clone_index).css("display","inline");
// Altera o atributo id da tag textarea
$("#_clone_" + _clone_index + " textarea").attr('id', _clone_index);
// Método para alterar o fundo da textarea
$("#_clone_" + _clone_index).on('click', "#btnCaixaAzul", function(){
// Altera o fundo da textarea para Azul
$(this).parent().find("textarea").css({"background": "blue"});
});
// Método para alterar o fundo da textarea
$("#_clone_" + _clone_index).on('click', "#btnCaixaBranco", function(){
// Altera o fundo da textarea para Branco
$(this).parent().find("textarea").css({"background": "white"});
});
$("#_clone_" + _clone_index).on('click', "#btnCaixaVerde", function(){
// Altera o fundo da textarea para Verde
$(this).parent().find("textarea").css({"background": "green"});
});
$("#_clone_" + _clone_index).on('click', "#btnCaixaAmarela", function(){
// Altera o fundo da textarea para Amarelo
$(this).parent().find("textarea").css({"background": "yellow"});
});
$("#_clone_" + _clone_index).on('click', "#btnCaixaVermelho", function(){
// Altera o fundo da textarea para Vermelho
$(this).parent().find("textarea").css({"background": "red"});
});
$("#_clone_" + _clone_index).on('click', "#btnCaixaPreta", function(){
// Altera o fundo da textarea para Preto
$(this).parent().find("textarea").css({"background": "black"});
});
// Método para Aumentar a fonte da textarea
$("#_clone_" + _clone_index).on('click', "#btnAumentarFonte", function(){
// Armazena o tamanho atual da fonte
var tamanhoAtual = parseFloat($(this).parent().find("textarea").css("font-size"));
// Incrementa + 1 no valor atual, e aplica o novo tamanho
$(this).parent().find("textarea").css({"font-size": tamanhoAtual+1});
});
// Método para Diminuir a fonte da textarea
$("#_clone_" + _clone_index).on('click', "#btnDiminuirFonte", function(){
// Armazena o tamanho atual da fonte
var tamanhoAtual = parseFloat($(this).parent().find("textarea").css("font-size"));
// Incrementa - 1 no valor atual, e aplica o novo tamanho
$(this).parent().find("textarea").css({"font-size": tamanhoAtual-1});
});
} else {
// Caso for maior que 10, exibe a mensagem
// e desabilita o botão
alert("ATÉ 10 CAIXAS DE TEXTO");
$(this).prop("disabled", true); // Desabilita o botão #btnAddCaixaTexto
}
mover();
});
function mover(){
$('#mover').draggable(); // add draggable library
};
});
</script>
</body>
</html>