0
i know I’ve asked a similar question, but can someone help me with this, I made an application in HTML/Javascript/Jquery ... and I need to change the source of EACH of the TEXTAREAS with a button, take a look, the user clicks add textarea, also adds, a button to change the color and one to increase the font ... I need to add the function of increasing the source in each one ...
If anyone has an idea ...
<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 -->
</head>
<body class="corpo">
<h1><center>Página</center></h1> <!-- -->
<hr/>
<script src="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"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script> <!-- library draggable -->
<link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->
<script type="text/javascript"> // all javascript/jquery code start here
function mover(){
$('#mover').draggable(); // add draggable library
};
function add_field()
{
// ------------------------------------------------------
var form = document.getElementsByTagName('form')[0],
input = document.createElement('button');
input.setAttribute('type', 'button');
input.setAttribute('onclick',"document.getElementById(" + count + ").style = 'background-color:blue;';");
input.setAttribute('name', 'item');
input.setAttribute('class', 'pular');
form.appendChild(input);
input = document.createElement('button');
input.setAttribute('type', 'button');
input.setAttribute('onclick',"document.getElementById(" + count + ").style = 'background-color:white;';");
input.setAttribute('name', 'item');
input.setAttribute('class', 'pular');
form.appendChild(input);
input = document.createElement('button');
input.setAttribute('type', 'button');
input.setAttribute('name', 'item');
input.setAttribute('class', 'pular');
input.setAttribute('id', 'btnaumentar');
input.setAttribute('onclick', 'obterTamanhoFonte();');
form.appendChild(input);
input = document.createElement('textarea');
input.setAttribute('id', count.toString());
input.setAttribute('type', 'textarea');
input.setAttribute('name', 'item');
input.setAttribute('class', 'caixa_descer');
form.appendChild(input);
};
function info(){
alert("ATÉ 10 CAIXAS DE TEXTO");
};
var count = 0;
function contador()
{
count++;
console.log(count); // show count in console
if(count >= 10){
$( ".button" ).prop( "disabled", true ); // disable button
}
};
</script>
<form name="input" method="get" id="mover">
<div class="ui-input-text">
<div data-role="navbar">
<button type="button" class="button" onclick="add_field(); contador(); mover();">ADICIONAR CAIXAS DE TEXTO</button><br><br> <!-- Create add button -->
<!-- <button onclick="info();">i</button> <br><br> -->
</div>
</div>
</form>
<button type="button" id="btnAumentar">Aumentar fonte</button>
<!-- 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>
<div class="mover">
<br>
<button onclick="mover();">Click</button>
</div>
</body>
<script type="text/javascript">
var $btnaumentar = $("#btnaumentar");
var $elemento = $("body #mover");
function obterTamanhoFonte() {
return parseFloat($elemento.css('font-size'));
}
$btnaumentar.on('click', function() {
$elemento.css('font-size', obterTamanhoFonte() + 1);
});
</script>