JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Questão 7</h1>
<p>Informe a coordenada do primeiro ponto:</p>

<input type="number" id="x1" placeholder="x1">
<input type="number" id="y1" placeholder="y1">
<br><br>

<p>Informe a coordenada do segundo ponto:</p>
<input type="number" id="x2" placeholder="x2">
<input type="number" id="y2" placeholder="y2">
<br><br>

<button id="botao" onClick="calcularEntaoMostrar()">Calcular</button><br>

<p id="mensagem"></p>

JavaScript

function calcularEntaoMostrar() {
  var x1 = document.getElementById("x1").value;
  var y1 = document.getElementById("y1").value;
  var x2 = document.getElementById("x2").value;
  var y2 = document.getElementById("y2").value;
  
  var dist = distanciaEntrePontos(x1, y1, x2, y2);
  mensagem.innerHTML = "Distância entre os dois pontos: " + dist + ".";
}

function distanciaEntrePontos(x1, y1, x2, y2) {
	var b = x1 - x2;
  var c = y1 - y2;
  var a = Math.sqrt(b*b + c*c);
  
  return a;
}