0

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>

5 respuestas 5

2

Yo creo que te estás mareando en un problema puntual. La declaración de un inline handler como "onclick" tiene limitaciones. En particular, adquiere un bind implícito con el elemento que la declara. Cualquier otro parámetro tienes que ponerlo en duro o calcularlo en otro lado.

Digamos que tienes la función tal como la quieres:

function show(boton, txt, text) {
     boton.style.display = "initial"
     txtBox.style.display = "initial"
     text.style.display = "initial"
}

Ya que no tiene sentido pasarle los elementos en duro a la función inline, puedes recurrir a una función auxiliar toggle tal que:

function toggle() {
    let boton = document.getElementById("boton"),
        txtBox = document.getElementById("txt"),
        text = document.getElementById("text");
    show(boton, txtBox, text);
}

y dejamos tu elemento como:

<p id="show" onclick="toggle()">Pulsa aquí para que todo aparezca</p>

En tu pregunta planteas:

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

Me da la idea, entonces, que lo que quieres hacer en p#show es un toggle. El primer click enciende todo, el segundo click apaga todo. Para esto podrías manejar un "estado" mediante un atributo del elemento. Algo simple como el "title":

<p id="show" onclick="toggle(this)" title="encender">Pulsa aquí para que todo aparezca</p>

Si la función toggle verifica que el title es "encender" debe encender todo y cambiar el title a "apagar". El siguiente click detecta que debe "apagar" y apaga todo antes de volver al title original.

function toggle(element) {
  let boton = document.getElementById("boton"),
    txtBox = document.getElementById("txt"),
    text = document.getElementById("text");
  if (element.title === 'encender') {
    show(boton, txtBox, text);
    element.title = 'apagar';
    element.innerText = 'Pulsa para apagar todo';
  } else {
    hide(boton);
    hide(txtBox);
    hide(text);
    element.title = 'encender';
    element.innerText = 'Pulsa para que todo aparezca';
  }
}

function hide(e) {
  e.style.display = "none"
}

function show(boton, txt, text) {
  boton.style.display = "initial"
  txt.style.display = "initial"
  text.style.display = "initial"
}
<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="toggle(this)" title="encender">Pulsa aquí para que todo aparezca</p>

</div>

2

Puedes pasar los id's de los elementos, ejemplo:

<p id="show" onclick="show('boton','txt')">Pulsa aquí para que todo aparezca</p>

function show(button,text) {
        document.getElementById(button).style.display = "initial"
        document.getElementById(text).style.display = "initial"
    }

Otra forma de hacerlo sería pasar el elemento actual y navegar hacia el nodo padre, esto sirve cuando tienes varias secciones con funcionamiento igual:

<p id="show" onclick="show(this)">Pulsa aquí para que todo aparezca</p>

function show(e) {
        parent_node = e.parentNode;
        e.style.display = "initial"
        parent_node.getElementById('boton').style.display = "initial"
        parent_node.getElementById('txt').style.display = "initial"
    }
2

Puedes hacerlo de la siguiente manera obteniento por el id de la etiqueta.

<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(document.getElementById('boton'),document.getElementById('txt'),document.getElementById('text'))">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>

<script>
function hide(e) {
    e.style.display = "none"
}

   function show(button,input,p) {
      button.style.display = "initial"
      input.style.display = "initial"
      p.style.display = "initial"
}

1

Bueno esto es similar a la respuesta anterior, pero puedes pasar los ids que quieras y los mostrara

 
    let boton = document.getElementById("boton")
    let txtBox = document.getElementById("txt")
    let text = document.getElementById("text")

    function hide(e) {
        e.style.display = "none"
    }



    function show() {

 Array.forEach( arguments, (item)=> {  
 let ele = document.getElementById( item);
 ele.style.display = "initial";

} ); 


    }
<!DOCTYPE html>
<html>

<head>
  
</head>

<body>

<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( 'boton', 'txt', 'text')">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>



</body>

1

Lo que intentas en vanilla no se si es posible. Lo que puedes hacer es pasar por parámetro el nombre de clase de los elementos deseados o en su defecto el ID de dichos elementos. Solo recuerda que si vas a trabajar con ID's cada uno de ellos tienen que ser únicos. No puede haber dos elementos con el mismo ID.

Te dejo un ejemplo con vanilla:

function doAction(ele, param1, param2) {
  var a = document.getElementById(param1).innerHTML;
  var b = document.getElementById(param2).innerHTML;
  ele.innerHTML = a + " " + b;
}
<p onclick="doAction(this, 'hello', 'world')">Click en mi</p>

<p id="hello">Hola</p>
<p id="world">Mundo!</p>

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.