将HTML输入到Javascript中

-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>

我得到一个错误“南”当我点击按钮

来源

2014-09-06 Darth_Coder

不，你不知道。你得到'错误ReferenceError：我没有定义'。 – Quentin 2014-09-06 17:43:07

语法错误 - 删除一个输入。 – 2014-09-06 17:45:34

不，我得到“NaN” – 2014-09-06 17:46:36

我想你的意思：

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

来源

2014-09-06 17:44:08

的getElementById返回元素，而不是它的价值。元素* 2 = NaN。

你想要的。

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

此外，您可能需要解析的整数以防万一：

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

来源

2014-09-06 17:44:30

一个没有innerhtml，它有一个值。 – 2014-09-06 17:45:26

@ Al.G。我只看着P.我的坏。 – 2014-09-06 17:46:02

好吧，我删除了我的倒票。 – 2014-09-06 17:48:14

很简单，从HERE你可以找到你需要改变：

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

到

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

来源

2014-09-06 17:49:49

你已经写好了大写字母F的功能，请注意， javascript区分大小写。
输入元素的值可以使用.value属性获得。
在输入表单元素中不需要两次使用输入关键字，只有一次开始。

来源

2014-09-06 17:51:01 Aak

这是一个更好的写法，稍作改进。

最好将javascript写在头上。
通过定义载入后的各种元素，您可以更快速地访问它们。
也不提示内联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处理程序因此也允许您添加多个事件处理程序，但旧的ie不会work.also textContent可能有prblems ...

DEMO

http://jsfiddle.net/frma0zup/

，如果您有任何问题，只是问。

来源

2014-09-06 18:00:22 cocco

工作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变量不包含用户输入的数字，但是
相反，包含输入元素的所有属性。你永远不会指定你想要它包含的数字，所以相反，变量r包含它可以获得关于“radius”元素的所有信息，包括它的颜色，尺寸和其他无用的东西。你不需要的东西需要。你正在寻找它的价值，因此我为什么在该行的末尾添加了.value 。
我还将* 1添加到r的最后，以便如果用户通过任何机会没有输入有效数字，Javascript将更正问题（乘以一会得到相同的结果，但解析为数字）。
您使用的是p元素的总和，但那不会是段落吧？
我使用了一个有序列表将1,2和3添加到每个步骤的开头。

来源

2014-09-06 20:18:06 tomysshadow

将HTML输入到Javascript中

回答

相关问题