I have a simple file and a button which I would like when I press it to change the text and after touching it again it returns to the previous text. This is my html code:
What I want is to change the text of the button. That when the box that says " JavaScript Master " is displayed, the button text is " Close ". And when the box is not displayed, the button text is " Open "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Clase 102 </title>
<style>
button{
width: 200px;
height: 40px;
font-size: 20px;
}
#caja{
width: 300px;
height: 50px;
border: 5px dashed black;
background: #ccc;
text-align: center;
line-height: 50px;
color: black;
font-size: 19px;
font-family: Verdana;
margin-top: 15px;
}
</style>
</head>
<body>
<h1> Aprendiendo JQuery Master en JavaScript </h1>
<button id="todoenuno">
Cerrar
</button>
<div id="caja">
Master en JavaScript
</div>
</body>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript" src="js.js"></script>
</html>
js file:
$(document).ready(function(){
$('#todoenuno').click(function(){
var that = $(this);
that.html('Cerrar')
$('#caja').toggle('fast');
})
});
I tried two things, one with an If:
$('#todoenuno').click(function(){
var that = $(this);
that.html('Cerrar')
if( that.html() = 'Cerrar'){
that.html('Abrir')
}
$('#caja').toggle('fast');
})
And then the other, very silly, but good:
that.html('Abrir');
that.html('Cerrar');
I know my query is silly, but thanks to those who help me with this little question.
What you need is to take the click event , take the content of the button to match , and then write it .
It seems to me that the task is simple and therefore can be solved with pure JS like this:
button
and assign it to a variableinnerText
and if its value is Close then I change it and assign it Open and if not I do the opposite