Question

我试图通过textbox的输入值动态地改变div元素的高度和宽度。以下是我编写的代码： HTML代码：

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

但上面的代码是npt工作。能不能让我知道我在代码中犯了什么错误。

提前致谢。

Answer 1

一些错别字和琐碎的错误，

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

Answer 2

对于初学者，你在第1行拼错了'function'这个词作为'function'。

您还将'文档'拼错为'文档'。

我不是一个要判断的人。我是地球上最糟糕的拼写者。

Answer 3

宽度和高度的值必须是带有“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";
}

我试图动态地改变div元素的大小

3 个答案: