как изменять текст на кнопке по нажатию?
Здравствуйте, есть кнопка, которая по нажатию показывает скрытые строки таблицы и по повторному нажатию скрывает их. Как изменять текст на кнопке при выполнение этого?
<input class="btn button-show" type="button" value="Развернуть"/>
<script>
document.querySelector(".button-hide").onclick = function() {
var elements = document.getElementsByClassName("table-success");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.toggle("box");
}
}
</script>
|
<input class="btn button-show" type="button" value="Развернуть"/>
<script>
document.querySelector('.button-show').onclick = function(){
this.value = this.value == "Развернуть" ? "Свернуть" : "Развернуть";
};
</script>
|
Nastya19,
es6
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.table-success {
display: none;
}
.table-success.box{
display: table-row;
}
.button-show:after{
content: "Развернуть";
}
.button-show.box:after{
content: "Свернуть";
}
.btn{
transition: .5s;
text-shadow: 0 -1px 1px #777;
color: #fff;
outline: none;
border: 2px solid #F64C2B;
border-radius: 5px;
box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
background-image: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
padding: 2px 6px;
}
.btn.box {
}
</style>
</head>
<body>
<table width="400" summary="" >
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr class="table-success">
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
</tbody>
</table>
<span class="btn button-show" ></span>
<script>
document.querySelector(".button-show").onclick = function() {
var elements = document.querySelectorAll(".table-success");
[...elements,this].forEach(e => e.classList.toggle("box"))
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:30. |