JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

x1 : <input name=x1><br>
y1: <input name=y1><br>
x2: <input name=x2><br>
y2: <input name=y2><br>
<button id="docalc">CALCULATE</button>

<div id="result" style="padding: 10px; border: 1px solid #000"></div>

JavaScript

function square(a, b) {
	return (a - b) * (a-b);
}

function distant(x1, y1, x2, y2) {
	return Math.sqrt( square(x2, x1) + square(y2, y1) )
}

function calc1(){
	x1 = parseInt( $('input[name=x1]') );
	x2 = parseInt( $('input[name=x2]') );
	y1 = parseInt( $('input[name=y1]') );
	y2 = parseInt( $('input[name=y2]') );

	$('#result').html( distant(x1, y1, x2, y2) );

}

$('#docalc').on('click', function(){ calc1(); });