我正在嘗試改變div元素的大小動態

我想通過textbox的輸入值動態地改變div元素的高度和寬度。這是我寫了下面的代碼：的html代碼：我正在嘗試改變div元素的大小動態

<input type="textbox" id="width" name="width"> 
<input type="textbox" id="height" name="height"> 
<button type="button" id="btn">ChangeSize</button> 
<div id="sketch" style="width:100px;height:100px;border:1px solid black;"></div>

JavaScript代碼：

fucntion changeWidth() 
{ 
    document.getElementById("sketch").style.width =  document.getElementById("width").value; 
} 
function changeHeight() 
{ 
    document.getElementById("sketch").style.height = document.getElementById("height").value; 
} 
documnet.getElementById("btn").addEventListener("click",function(){ 
    changeWidth(); 
    changeHeight(); 
},false);

但上面的代碼是不擴散核武器條約的工作。你能否讓我知道我在代碼中犯了什麼錯誤。

在此先感謝。

來源

2014-02-21 user3188826

請檢查ans and fiddle posted below –

'document.getElementById' is correct，但'documne t.getElementById'不是 –

對於初學者你拼錯了單詞，「功能」爲「溫控功能」 1號線。

您還拼錯「文件」作爲「documnet」。

我不是一個判斷。我是地球上最差的拼寫器。

來源

2014-02-21 05:56:40 Ecksley

也是文件拼寫錯誤 – Nimmi

是的，在這裏我拼錯了，但在我的代碼中它是正確的。儘管它不工作。 – user3188826

請看這個小提琴 http://jsfiddle.net/QJqDn/ – Nimmi

寬度和高度的值需要與「PX」的字符串：

function changeWidth() 
{ 
    document.getElementById("sketch").style.width = document.getElementById("width").value + "px"; 
} 
function changeHeight() 
{ 
    document.getElementById("sketch").style.height = document.getElementById("height").value + "px"; 
}

來源

2014-02-21 05:58:15 Quinn

一些錯別字和瑣碎的錯誤，

function changeWidth() { 
    document.getElementById("sketch").style.width = document.getElementById("width").value + "px"; 
} 

function changeHeight() { 
    document.getElementById("sketch").style.height = document.getElementById("height").value + "px"; // append unit to value. 
} 

document.getElementById("btn").addEventListener("click", function() { 
    changeWidth(); 
    changeHeight(); 
}, false);

DEMO

來源

2014-02-21 05:58:31

我正在嘗試改變div元素的大小動態

回答

相關問題