tengo un HTML, donde al hacer el evento mouseover
sobre un botón, un input:text, y un p, estos se ocultan, y luego al hacer click sobre otro p estos vuelven a mostrarse, el problema es que el tag p lo tengo así
<p id="show" onclick="show()">Pulsa aquí para que todo aparezca</p>
y quiero que quede así
<p id="show" onclick="show(button, input, p)">Pulsa aquí para que todo aparezca</p>
para después en JS hacer
function show(button, input, p) {
button.style.display = "initial"
input.style.display = "initial"
p.style.display = "initial"
}
el código es:
<center>
<div id="app">
<button id="boton" onmouseover="hide(this)">Botón que desaparece</button>
<br>
<br>
<input type="text" name="txt" id="txt" value="Caja que desaparece" onmouseover="hide(this)">
<br>
<p id="text" onmouseover="hide(this)">Texto que desaparece</p>
<p id="show" onclick="show()">Pulsa aquí para que todo aparezca</p>
<!-- en show(), quiero pasar por parametro el button, el input y el p -->
<!-- que quede show(button, input, text) -->
<!-- para poder ocultarlos al hacer click -->
</div>
</center>
<script>
let boton = document.getElementById("boton")
let txtBox = document.getElementById("txt")
let text = document.getElementById("text")
function hide(e) {
e.style.display = "none"
}
function show() {
boton.style.display = "initial"
txtBox.style.display = "initial"
text.style.display = "initial"
}
</script>