2014-09-06 3 views
-5

Я хочу создать веб-сайт, который может определять окружность круга, когда пользователь вводит радиус. Я сделал код, но он не работает. Можешь мне сказать почему?Вход HTML в Javascript

<html> 
<head> 
</head> 
<body> 
<form id="ty"> 
Give radius: <input type="number" input id="radius"> 
</form> 
<p id="sum"> htht </p> 
<button type="button" onclick="my()"> Click on me</button> 
<script> 
Function my() { 
var r= document.getElementById("radius"); 
var a= r*2; 
document.getElementById("sum").innerHTML=a; 
} 
</script> 
</body> 
</html> 

Я получаю сообщение об ошибке "NaN", когда я нажимаю на кнопку

+0

Нет, вы этого не сделаете. Вы получаете 'error ReferenceError: my не определен'. – Quentin

+0

синтаксическая ошибка - удалить один вход. –

+0

нет, я получаю «NaN» –

ответ

0

Я думаю, что вы имеете в виду:

var r = document.getElementById("radius").value; 
0

getElementByID возвращает элемент, а не его значение. элемент * 2 = NaN.

Вы хотите.

var r = document.getElementById("radius").value; 

Кроме того, вы можете разобрать число на всякий случай:

var r = parseInt(document.getElementById("radius").value); 
+0

не имеет innerhtml, он имеет значение. –

+0

@ Al.G. Я смотрел только на П. Мой плохой. –

+0

ОК, я удалил свой голос. –

0

Очень простой, из HERE вы можете найти вам нужно изменить:

var r= document.getElementById("radius"); 

в

var r= document.getElementById("radius").value; 
0
  1. Вы написали в верхнем регистре F функцию, обратите внимание, что javascript чувствителен к регистру.

  2. Значение элемента ввода может получить с использованием свойства .value.

  3. Элемент формы ввода не требуется дважды, используя ключевое слово , только один раз при запуске.

0

Здесь более удобный способ написать это с некоторыми незначительными улучшениями.

  1. Предпочтительно написать javascript в голове.
  2. путем определения различных элементов onload позже у вас есть более быстрый & легкий доступ к ним.
  3. также встроенный javascript не предлагается, не записывайте js внутри атрибутов html.

Тогда говорить о своих ошибках:

function не Function

document.getElementById('radius') должен быть document.getElementById('radius').value

<html> 
<head> 
<script> 
var radiusBox,sumBox,button; 

function my(){ 
sumBox.innerHTML=radiusBox.value*2 
// the use of textContent is more appropiate but works only on newer browsers 
} 

window.onload=function(){ 
radiusBox=document.getElementById('radius'); 
sumBox=document.getElementById('sum'); 
button=document.getElementById('button'); 
button.onclick=my 
} 
</script> 
</head> 
<body> 
<form id="ty"> 
    Give radius:<input type="number" id="radius"> 
</form> 
<p id="sum">Enter a number</p> 
<button id="button">Click on me</button> 
</body> 
</html> 

писать это таким образом он совместит с любым браузером, который поддерживает JavaScript, более новый способ будет использовать addEventListener, чтобы добавить load и click обработчик, таким образом, также позволяет добавлять несколько обработчиков событий, но старая т. Е. Не работает. Кроме того, текстКонтент может иметь prblems ...

DEMO

http://jsfiddle.net/frma0zup/

если у вас есть какие-либо вопросы, просто спросите.

1

Разработка HTML демо:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Language" content="en"> 
<meta charset="UTF-8"> 
<title>Radius to Circumference</title> 
</head> 
<body> 
<form name="ty"> 
<ol> 
<li>Give radius: <input type="number" name="radius"></input></li> 
<li><input type="button" onClick="my();" value="convert"></input></li> 
<li>Get circumference: <input type="number" name="sum"></input></li> 
</ol> 
</form> 
<script LANGUAGE="Javascript"> 
function my() { 
var r = document.ty.radius.value*1; 
var a = r*2; 
document.ty.sum.value = a; 
} 
</script> 
</body> 
</html> 
  • при написании HTML, вы должны быть уверены, чтобы использовать соответствующие семантику. Укажите тип документа, набор символов и язык!
  • избегать использования кнопок, которые говорят такие вещи, как «Нажмите на меня!» Это избыточно, потому что пользователь должен прочитать, что они собираются делать , прежде чем они это сделают. Вместо этого напишите, что кнопка будет делать на самой кнопке (в этом случае «Конвертировать» - это то, что я использовал).
  • Вы не указали название в своей голове.
  • и два разных элемента с различными целями . В этом случае вы хотите.
  • «Функция» не должна быть капитализирована.
  • Ваша переменная r не содержит номер, в который был помещен пользователь, но
    скорее содержит все свойства элемента ввода. Вы никогда не указания вы хотите номер он размещен, поэтому вместо того, переменный г
    содержал всю информацию, которую он мог бы получить об элементе
    «радиус», включая его цвета, его размер и другие бесполезные вещей, которые вы не необходимость. Вы ищете его ценность, следовательно, почему я добавил .value в конце этой строки.
  • Я также добавил * 1 в конец строки r, так что если пользователь любой шанс не ввел действительное число, Javascript исправит ошибку (умножение на единицу дает тот же результат, но разобранный в число).
  • Вы использовали элемент p для суммы, но это не было бы пунктом , не так ли?
  • Я использовал упорядоченный список, чтобы добавить 1, 2 и 3 в начало каждого шага .
Смежные вопросы