2015-02-06 2 views
1

Я очень новичок в Javascript, поэтому, пожалуйста, прошу прощения за недостаток знаний. Я пытаюсь использовать Javascript, чтобы найти наклон двух точек данных (x1, y1) (x2, y2). Уравнение для наклона m = y1-y2/x2-x1. Вот что я сделал до сих пор в скрипте JS: http://jsfiddle.net/1wvfz0ku/ Проблема в том, что когда я пытаюсь вычислить точки, появляется только NaN. Как я уже сказал, я очень новичок в кодировании в JS, поэтому я не вижу, где я перепутался. Любая помощь будет очень признательна! :-)Почему моя JS-функция не работает правильно?

<!DOCTYPE html> 
<html> 
<body> 
<div style="width:250px;height:auto;margin:auto;"> 
<h1>Find the Slope of Two Data Points</h1> 
<p> 
Find the slope of two sets of points: 
</p> 
<var>M</var>=<p id="slope"></p> 
Enter your points below: 
<form id="points"> 
X<sub>1</sub>: <input type="text" id="x1"/><br/> 
X<sub>2</sub>: <input type="text" id="x2"/><br/> 
Y<sub>1</sub>: <input type="text" id="y1"/><br/> 
Y<sub>2</sub>: <input type="text" id="y2"/><br/> 
</form> 
<script> 
function findSlope() { 
//The points// 
var xOne = document.getElementById("x1").value; 
var xTwo = document.getElementById("x2").value; 
var yOne = document.getElementById("y1").value; 
var yTwo = document.getElementById("y2").value; 

//slope equation// 
var op1 = yTwo - yOne; 
var op2 = xTwo - xOne; 
var answer = op1/op2; 
document.getElementById("slope").innerHTML = answer; 
} 
function reset(){ 
document.getElementById("points","slope").reset(); 
} 
</script> 

<button type="submit" onClick="findSlope()">Find the Slope</button> 
<button type="submit" onClick="reset()">Clear Points</button> 
</div> 
</body> 
</html> 
+0

Работает отлично для меня, как есть: http://jsbin.com/mokoya/1/edit?html,console,output – Aweary

+0

Какой браузер вы тестируете? * Не важно *, но это реальный мир, и если вы используете , у вас будут проблемы – Avery

+0

Я использую старую версию Chrome на MacBook Pro с 2006 года. Возможно, это почему он не работал должным образом ... –

ответ

1

Это works just fineеслиxTwo - xTwo является 0, в этом случае вы пытаетесь разделить число на 0, который определен в JavaScript, чтобы быть NaN.


Это говорит: value свойство элементов всегда является строкой. Просто случается, что все операции, которые вы использовали (-, /), будут неявно конвертировать из строки в число, но если вы использовали +, вы действительно получили очень нечетные результаты (потому что + со строками является конкатенацией , не дополнение). Лучше явно указать, что вы имеете дело с числами, используя parseInt(theString, 10) (если вы имеете дело с десятичной точкой).


Пример позволяет xTwo - xOne быть 0 и разбора входов в качестве десятичной:

function findSlope() { 
 
    //The points// 
 
    var xOne = parseInt(document.getElementById("x1").value, 10); 
 
    var xTwo = parseInt(document.getElementById("x2").value, 10); 
 
    var yOne = parseInt(document.getElementById("y1").value, 10); 
 
    var yTwo = parseInt(document.getElementById("y2").value, 10); 
 

 
    //slope equation// 
 
    var op1 = yTwo - yOne; 
 
    var op2 = xTwo - xOne; 
 
    var answer = op2 === 0 ? "flat or whatever" : op1/op2; 
 
    document.getElementById("slope").innerHTML = answer; 
 
} 
 

 
function reset(){ 
 
    document.getElementById("points","slope").reset(); 
 
}
<div style="width:250px;height:auto;margin:auto;"> 
 
<h1>Find the Slope of Two Data Points</h1> 
 
<p> 
 
Find the slope of two sets of points: 
 
</p> 
 
<var>M</var>=<p id="slope"></p> 
 
Enter your points below: 
 
<form id="points"> 
 
X<sub>1</sub>: <input type="text" id="x1"/><br/> 
 
X<sub>2</sub>: <input type="text" id="x2"/><br/> 
 
Y<sub>1</sub>: <input type="text" id="y1"/><br/> 
 
Y<sub>2</sub>: <input type="text" id="y2"/><br/> 
 
</form> 
 
<button type="submit" onClick="findSlope()">Find the Slope</button> 
 
<button type="submit" onClick="reset()">Clear Points</button>

Смежные вопросы