How to clear the contents of a variable inside a JQUERY function?

Navigation
0

I'm starting to study Javascript and Jquery I'm developing the following page:

TheproblemisthatwhenIclickonanewdatetheoldoneisnotresetasPrintbelow:

IhavetriedeverythingtocreateaResetfunction,use.removebutnothingworks.Iwouldlikesomehelp!Herearemycode:

$(function() {
InciaData();
MostraData();

});

$.datepicker.regional['pt-BR'] = {
	closeText: 'Fechar',
	prevText: '<Anterior',
	nextText: 'Próximo>',
	currentText: 'Hoje',
	monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho',
	'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
	'Jul','Ago','Set','Out','Nov','Dez'],
	dayNames: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
	dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
	dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
	weekHeader: 'Sm',
	dateFormat: 'dd/mm/yy',
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''
}

function InciaData(){
	//passa formato local
	$.datepicker.setDefaults($.datepicker.regional['pt-BR']);
	//aplica o datepicker 
	$( "#date" ).datepicker();

	$( "#date" ).change( function () {
	//alert("ok");

	var valor =$("#date").val();
	var frase = $(".frase").text();


	var n3 = frase+valor;	
	$(".frase").text(n3).attr('style', 'color:orange;');

});
$(".frase")= $(".frase").val(" ");
}



function MostraData(){
	var barra =$( "#mostraData" );
	barra.draggable();
}
body{
	width: 940px;
	margin-right: auto;
	margin-left: auto;
}
*{
	 box-sizing: border-box;
}
.headerTeste{
	width: 25.0rem;
	height: 15.0rem;
	background-image: url(http://www. 88.com.br/assets/img/ 88.svg);
	background-repeat: no-repeat;
	margin-top: 2em;
	margin-right: auto;
	margin-left: auto;
}
main p{
	font-size: 20px;
	font-weight: bold;
}
.ui-widget-header{
	background-color: #80e5ff;
	color:white;
}
#mostraData{
	margin-top: 3rem;
	width: 150px;
	height: 150px;
	padding: 0.5em;
	background-color: #66ffcc; 
}
.frase{
	color:black;
}

#mostraData:hover { 
   	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
   	-webkit-transform:scale(1.5);
   	-mos-transform:scale(1.5);
	transform:scale(1.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!DOCTYPEhtml><html><head><title>Testeagora</title><scriptsrc="js/jquery.js"></script>
	<link rel="stylesheet" href="css/jquery-ui.min.css">
	<link rel="stylesheet" href="css/estiloM2g.css">
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/scriptJqueryUi.js"></script>
</head>
<body>
	<header class="headerTeste">
		
	</header>
<main>
		<p>Escolha uma Data:</p>
		<input type="text" id="date" name="date">

		<div id="mostraData">
			   <p class="frase">Podem me arrastar: </p>

		</div>
</main>
</body>
</html>
    
asked by anonymous 12.06.2017 / 22:26

1 answer

1

One suggestion would be to place an SPAN, and set the value, date, within it, the code becomes simpler as long as the phrase does not change. It looks like below: 

<div id="mostraData">
    <p class="frase">Podem me arrastar: </p>
    <span id="valData"></span>
</div>

In the JS code, it is: 

function InciaData(){
    //passa formato local
    $.datepicker.setDefaults($.datepicker.regional['pt-BR']);
    //aplica o datepicker 
    $( "#date" ).datepicker();

    $( "#date" ).change( function () {
        $("#valData").text($("#date").val());           
    });
}
    
12.06.2017 / 22:53
doubts Input type date Group PHP Array ()