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

Asked

Viewed 770 times

0

I’m starting to study Javascript and Jqueryui am developing the following page: inserir a descrição da imagem aqui

The problem is that when I click on a new date the old one is not reset as Print below: inserir a descrição da imagem aqui

I’ve tried everything to create a Reset function, use . remove but nothing works. I’d like some help! Just follow my code:

$(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>
<!DOCTYPE html>
<html>
<head>
	<title>Teste agora</title>
	<script src="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>

jquery css html5 jquery-ui

  • Where is the chunk that is cleaning? The reset function or just the same chunk..

  • Lucas Costa, in the function Inciadata().

  • Try using this : "var value = $("#date"). val(); $(". phrase"). text("You can drag me: "+value). attr('style', 'color:Orange;');" In the current snippet : "var value =$("#date"). val(); var phrase = $(". phrase"). text(); var N3 = phrase+value; $(". phrase"). text(N3). attr('style', 'color:Orange;');";

  • Lucas Costa did work, thank you so much for your help :)

1 answer

1


A suggestion, would put a SPAN, and set the value, date, inside it, becomes simpler the code, as long as the sentence does not change. It is as below:

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

In the JS code, it’s:

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

    $( "#date" ).change( function () {
        $("#valData").text($("#date").val());           
    });
}

  • Yes, it simplifies Celso very much. Both answers are correct but only Celso’s is enabled to choose the correct answer. Thanks Boys!

Browser other questions tagged jquery css html5 jquery-ui

You are not signed in. Login or sign up in order to post.