Cómo hacer que el botón desaparezca al hacer clic

Question

Este es mi código

 function show() {
          var today = new Date();
          var h = today.getHours();
          var m = today.getMinutes();
          if (h < 10) h = "0" + h;
          if (m < 10) m = "0" + m;
          document.getElementById("pressbtn1").innerHTML  = h+":"+m;
        }

<html>
      <button id="pressbtn1" onClick="show()">Press</button>
  
 </html>

Cómo hacer que el botón desaparezca al hacer clic, solo quiero mostrar la hora, no la hora del botón

javascript html css

1

Kheng Yung 24 sep. 2019 a las 09:28

Answer 1

Use otra etiqueta oculta para ese propósito, por ejemplo:

<span id="timeHolder" style="display: none"><span>
<button id="pressbtn1" onClick="show()">Press</button>

Y entonces:

var timeHolder = document.getElementById("timeHolder");
timeHolder.innerHTML  = h+":"+m;
timeHolder.style.display = 'block';
document.getElementById("pressbtn1").style.display = 'none';

Este será un enfoque bastante claro.

2

Bilal Siddiqui 1 oct. 2019 a las 09:24

Answer 2

<button id="pressbtn1" onClick="show()">Press</button>
<script>
function show() {
                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                if (h < 10) h = "0" + h;
                if (m < 10) m = "0" + m;
                document.getElementById("pressbtn1").parentElement.innerHTML  = h+":"+m;
              }
</script>

El código anterior mostrará la hora en el padre del botón, que es la etiqueta del cuerpo en este caso, significa que en lugar de tener una etiqueta de botón dentro de la etiqueta del cuerpo, tendrá texto de fecha y hora dentro de la etiqueta del cuerpo

0

Hamza Dahmoun 24 sep. 2019 a las 08:48

Answer 3

Puede usar CSS básico para eliminar los estilos de botón predeterminados.

var button = document.getElementById("pressbtn1");

function show() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  if (h < 10) h = "0" + h;
  if (m < 10) m = "0" + m;
  button.innerHTML = h + ":" + m;
  button.classList.add('hasTime');
}

.hasTime {
  background: #fff;
  border: none;
  outline: none;
}

<button id="pressbtn1" onClick="show()">Press</button>

3

Nidhin Joseph 24 sep. 2019 a las 06:34

Answer 4

Puede usar el método remove ().

function show() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  if (h < 10) h = "0" + h;
  if (m < 10) m = "0" + m;
  document.getElementById("a").innerHTML = h + ":" + m;
  document.getElementById("pressbtn1").remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<button id="pressbtn1" onClick="show()">Press</button>
<p id="a"></p>

</html>

3

Foram 24 sep. 2019 a las 07:46

Answer 5

Establezca la visibilidad en oculta usando element.style.visibility=hidden y ponga la hora en un párrafo

function show() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  if (h < 10) h = "0" + h;
  if (m < 10) m = "0" + m;
  document.getElementById("a").innerHTML = h + ":" + m;
  document.getElementById("pressbtn1").style.visibility = "hidden"
}

<html>
<button id="pressbtn1" onClick="show()">Press</button>
<p id="a"></p>

</html>

2

ellipsis 24 sep. 2019 a las 06:30

Cómo hacer que el botón desaparezca al hacer clic

5 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript