Javascript 根据文本框中输入的数据调整图像大小_Javascript_Html

Javascript 根据文本框中输入的数据调整图像大小

javascript html

Javascript 根据文本框中输入的数据调整图像大小,javascript,html,Javascript,Html,我有一个带有图像、按钮和文本框的表单。单击按钮时，我可以将图像的高度和宽度调整为文本框中输入的大小。单击按钮时，我的图像就消失了这是我的密码 <!DOCTYPE HTML> <html> <head> <title>Resize Image</title> </head> <body> <script> function resizeimage() { var

我有一个带有图像、按钮和文本框的表单。单击按钮时，我可以将图像的高度和宽度调整为文本框中输入的大小。单击按钮时，我的图像就消失了

这是我的密码

<!DOCTYPE HTML>
<html>
<head>
    <title>Resize Image</title>
</head>
<body>
<script>
    function resizeimage()
    {
        var theImg = document.getElementById('image');
        theImg.height = size;
        theImg.width = size;
    }
    var size=parseInt(document.getElementById('txtbox'));   
</script>


<form name ="ResizeImage">
<img src = "cookie.jpg" id="image">
</br>
<input type=button value="Resize" onclick="resizeimage()">
</br>
<input type=text id="txtbox"

</form>
</body>
</html>


调整图像大小
函数resizeimage（）
{
var theImg=document.getElementById（'image'）；
高度=尺寸；
宽度=尺寸；
}
var size=parseInt（document.getElementById（'txtbox'）；




除了HTML问题（请通过验证器运行），主要问题是读取图像大小的代码部分不在函数范围内。在页面加载时，会发生这种情况
已定义函数resizeimage（）
varsize
被设置为该点输入中的任何值
页面内容已加载
两点钟。输入甚至还不存在，因为3。尚未完成，因此varsize
设置为undefined
。此后，它不会改变，因为函数resizeimage（）
不会再次尝试读取图像的大小
另外，document.getElementById
返回一个元素。您必须使用它的.value
属性读取用户输入的内容
试试这个：
function resizeimage()
{
    var size=parseInt(document.getElementById('txtbox').value);   
    var theImg = document.getElementById('image');
    theImg.height = size;
    theImg.width = size;
}

工作示例：
我将首先缓存ID：
var input = document.getElementById('txtbox');
var theImg = document.getElementById('image');

function resizeimage() {
  var size = input.value;
  theImg.height = size;
  theImg.width = size;
}


函数changeDogsSize（）{
var dogSize=parseInt（（id_input）.value）；
id_dog.width=狗的大小；
}

改变
尝试样式.高度
。我不确定它是否有效。我想你应该把var size=parseInt（document.getElementById（'txtbox'））放进去编码到函数中，因为现在大小值仅在加载时初始化。