Some simple examples to get started

<div class="container">
<button onclick = "changeText(this)">Click Me</button>
</div>

<script>
function changeText(id){
  id.innerHTML = 'You Clicked';
}
</script>

<div class="header">
<h1 id = "heading"> Title to be changed </h1>
</div>

<div class="container">
<button onclick = "changeText2()">Click Me ok</button>
</div>

<script>
function changeText2(){
   var heading = document.getElementById('heading');
   heading.innerHTML = 'You Clicked, so new title';
}
</script>

<div>
<p id = "para">  </p>
</div>

<div class="container">
<button onclick = "changeText3()">Show Current Date</button>
</div>

<script>
function changeText3(){
   var heading = document.getElementById('para');
   heading.innerHTML = Date();
}
</script>

Example using d3.js library

knitr::opts_chunk$set(echo = T, message = F, warning = F)

library(tidyverse)
library(jsonlite)

send_df_to_js <- function(df){
  cat(
    paste(
    '<script>
      var data = ',toJSON(df),';
    </script>'
    , sep="")
  )
}

n <- 300
random_data <- data_frame(x = runif(n)*10) %>% 
  mutate(y = 0.5*x^3 - 1.3*x^2 + rnorm(n, mean = 0, sd = 80),
         group = paste("group", sample(c(1,2,3), n, replace = T)))

send_df_to_js(random_data)

var point_vals = d3.select("#viz").append("p").text("Mouseover some data!");

//Get how wide our page is in pixels so we can draw our plot in it
var page_width = 900;
  
// set the dimensions and margins of the graph
var margin = 20,
    width = 600,
    height = 600;
    
// Find max data values
var x_extent = d3.extent(data, d => d.x);
var y_extent = d3.extent(data, d => d.y);

// Set the scales 
var x = d3.scaleLinear()
  .domain(x_extent)
  .range([0, width]);
  
var y = d3.scaleLinear()
  .domain(y_extent)
  .range([height, 0]);

//Set up our SVG element
var svg = d3.select("#viz").append("svg")
    .attr("width", width + 2*margin)
    .attr("height", height + 2*margin)
  .append("g")
    .attr("transform",
          "translate(" + margin + "," + margin + ")");

var bounce_select = d3.transition()
    .duration(1000)
    .ease(d3.easeElastic.period(0.4));
    
// Add the scatterplot
svg.selectAll(".dots")
    .data(data)
  .enter().append("circle")
    .attr("class", "dots")
    .attr("fill", d => d.group === "group 1"? "steelblue":"orangered")
    .attr("fill-opacity", 0.3)
    .attr("r", 5)
    .attr("cx", d => x(d.x) )
    .attr("cy", d => y(d.y) )
    .on("mouseover", function(d){
       d3.selectAll(".dots").attr("r", 5) //make sure all the dots are small
       d3.select(this)
        .transition(bounce_select)
        .attr("r", 10);
      
       point_vals.text("X:" + d.x + " Y:" + d.y) //change the title of the graph to the datapoint
    });
    
// Draw the axes    
// Add the X Axis
svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

// Add the Y Axis
svg.append("g")
    .call(d3.axisLeft(y));