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

回答

相關問題