¿Hay alguna forma de obtener el contenido de un elemento HTML, donde se llama a la función, sin tener que identificarlo por ID o nombre de clase?
ejemplo en lugar de usar:
<button class="colm" type="button" onclick="show('1')">1</button>usamos algo como:
<button class="colm" type="button" onclick="show(getThisElementContent())">1</button> Mi punto es preguntar si es posible hacer esta función por ejemplo, la llamamos getThisElementContent() que puede extraer el HTML interno del Elemento donde se llama en nuestro caso, el elemento innerHTML es 1 .
Claro, define una función llamada logElem :
const logElem = (elem) => console.log({elem});luego en HTML:
<div onclick="logElem(this)">CLICK ME</div>Salud
Hay un par de formas, las más simples incluyen:
Pasando this al controlador de eventos en línea:
function showContent(element) { console.log(element.textContent); } <button class="colm" type="button" onclick="showContent(this)">1</button> Agregar el evento a través de JS y acceder al target del evento:
document.querySelector('.colm').addEventListener('click', showContent); function showContent(event) { console.log(event.target.textContent); } <button class="colm" type="button">1</button>Sí hay. Debe agregar un detector de eventos en JavaScript para que pueda manejar el evento de clic del mouse cuando suceda.
<html> <body> <button id="myButton"> Click Me </button> </body> <script> const button = document.getElementById("myButton") button.addEventListener('click', e => { console.log(e.target.innerHTML); }); </script> </html> El segundo argumento para addEventListener es una función de devolución de llamada que se ejecutará cuando ocurra el evento de click en el botón. Esta función recibirá un parámetro, en este caso lo llamé e , que es de tipo Evento, sobre el cual puede leer aquí: https://developer.mozilla.org/en-US/docs/Web/API/Event
Este objeto de evento tiene un atributo de target que es una referencia al objeto al que se envió originalmente el evento, el botón.