Я пытаюсь динамически изменять размер элемента div

Question

Я пытаюсь изменить высоту и ширину элемента 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); 

Но приведенный выше код нтр работает. Не могли бы вы сообщить мне, какую ошибку я совершил в своем коде.

Заранее спасибо.

Answer 1

Для начала вы опечатка слова «функция», как «fucntion» на линии 1.

Вы также опечатку «документ» как «documnet».

Я не судить. Я - худший заклинатель на Земле.

Answer 2

Значения ширины и высоты должны быть строкой с "рх":

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

Answer 3

Некоторые опечатки и тривиальные ошибки,

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