CP_textbox_number

CP_textbox_number

HTML

<div data-role="page" id="slopeCalculator" data-theme = "e">
  <div data-role="header">
    <h1>Slope Calculator</h1>
  </div>
	
  <center><img src="slope.png" width="204" height="82" alt=""/></center>
	
  <div data-role="fieldcontain">
    <label for="number6">x2:</label>
    <input type="number" name="number6" id="snumber1" value=""  />
  </div>
	
  <div data-role="fieldcontain">
    <label for="number6">y2:</label>
    <input type="number" name="number7" id="snumber2" value=""  />
  </div>
	
  <div data-role="fieldcontain">
    <label for="number11">x1:</label>
    <input type="number" name="number8" id="snumber3" value=""  />
  </div>
	
  <div data-role="fieldcontain">
    <label for="number12">y1:</label>
    <input type="number" name="number9" id="snumber4" value=""  />
  </div>
	
  <div data-role="fieldcontain">
    <label for="number13">Slope:</label>
    <input type="number" name="number10" id="sanswer" value=""  />
  </div>
	<div data-role="controlgroup">
		<a href="#" data-role="button" onClick = "getSlope()">Solve</a>	
		<a href="#" data-role="button" onClick = "slopeClear()">Clear</a>	
		<a href="#homePage" data-role="button" data-icon="back">Return to home</a>
	</div>
  </div>
  <div data-role="footer">
    <h4>Riley Haluzak</h4>
  </div>

JavaScript

function getSlope(){
	var snumber1 = document.getElementById("snumber1");
	var snumber2 = document.getElementById("snumber2");
	var snumber3 = document.getElementById("snumber3");
	var snumber4 = document.getElementById("snumber4");
	var sanswer = document.getElementById("sanswer");
	
	var x2 = parseFloat(snumber1.value);
	var y2 = parseFloat(snumber2.value);
	var x1 = parseFloat(snumber3.value);
	var y1 = parseFloat(snumber4.value);
	
	var y3 = y2 - y1;
	var x3 = x2 - x1;
	
	sanswer.value = Number(y3/x3);
	
}