Reacciones en documentos Rmarkdown con JavaScript

Acceder y manipular el DOM

El Document Object Model (DOM) es una representación de los elementos de nuestro documento que el navegador crea en el momento que está cargando la página. Esta representación permite acceder y manipular con javaScript los distintos elementos, permitiendo modificar programáticamente su contenido, estructura y formato.

Para ilustrar lo que se puede hacer con esto, vease el chunk de código siguiente, en el que se coloca el ejemplo de un documento que contiene un h1 inicialmente sin contenido, pero al que se le agrega texto con js.

Aquí, con el método .getElementById() se selecciona un elemento del documento y con él se le agrega un valor a la propiedad .innerHTML, colocando el texto deseado. De esta manera se pueden ir modificando los diferentes atributos de los elementos.

<h1 id='title'>  </h1>
<p>El título de este documento se coloca con javascript</p>

<script>
const title = document.getElementById('title');
title.innerHTML = 'Tíltulo del documento';
</script>

Algo como esto es lo que se hará para que los botones que hemos definido cambien el atributo src (source o fuente) de la imagen. A continuación los pasos para hacerlo.

//Creando constantes con los elementos del DOM que hay que manipular
const btnGoku = document.getElementById('goku');
const btnVegeta = document.getElementById('vegeta');
const characterImg = document.getElementById('character-img');

Adicional a los elementos que serán modificados, es buena idea crear constantes que contengan los colores que deberán tener los botones cunado se les de click. También crear dos constantes con los url de las imagenes.

// colores azul y naranja que tendrán los botones cuando estén activados o no
const blue = '#072083';
const orange = '#F85B1A';

// url de las imagenes de goku y vegueta
const gokuUrl = 'http://www.pngmart.com/files/2/Goku-PNG-File.png';
const vegetaUrl = 'http://www.pngmart.com/files/2/Vegeta-PNG-HD.png';

Teniendo esto, simplemente hay que lograr que al hacer click en el botón de Goku la el src de la imagen sea el path a la de Goku y el color cambie de naranja a azul. Otro comportamiento necesario es que el color del botón de Vegueta debe cambiar a color naranja.

Todo esto se hace agregando una función al atributo onclick de los botones.

btnGoku.onclick = () => {
  // cambia el src de la imagen
  characterImg.src = gokuUrl;
  // coloca el background azul al botón activo
  btnGoku.style.backgroundColor = blue;
  // coloca el relleno naranja al botón inactivo
  btnVegeta.style.backgroundColor = orange;
}

btnVegeta.onclick = () => {
  characterImg.src = vegetaUrl;
  btnVegeta.style.backgroundColor = blue;
  btnGoku.style.backgroundColor = orange;  
}

A continuación el script completo que hay que colocar al final del documento para que todo funcione.

<script>
const btnGoku = document.getElementById('goku');
const btnVegeta = document.getElementById('vegeta');
const characterImg = document.getElementById('character-img');

const blue = '#072083';
const orange = '#F85B1A';

const gokuUrl = 'http://www.pngmart.com/files/2/Goku-PNG-File.png';
const vegetaUrl = 'http://www.pngmart.com/files/2/Vegeta-PNG-HD.png';

btnGoku.onclick = () => {
  characterImg.src = gokuUrl;
  btnGoku.style.backgroundColor = blue;
  btnVegeta.style.backgroundColor = orange;
}

btnVegeta.onclick = () => {
  characterImg.src = vegetaUrl;
  btnVegeta.style.backgroundColor = blue;
  btnGoku.style.backgroundColor = orange;  
}

btnGoku.style.backgroundColor = blue;
</script>