2

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

这是我的代码

<!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>
4

3 回答 3

1

除了 HTML 问题（请通过验证器运行）之外，主要问题是读取图像大小的代码部分在函数之外。在页面加载时，会发生这种情况。

  1. 函数resizeimage()定义
  2. varsize设置为此时输入中的任何内容
  3. 页面内容已加载。

在 2. 输入甚至还不存在，因为 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;
}

工作示例：http: //jsfiddle.net/KZH5p/

于 2013-10-03T12:03:47.817 回答
1

我会先缓存ID：

var input = document.getElementById('txtbox');
var theImg = document.getElementById('image');

function resizeimage() {
  var size = input.value;
  theImg.height = size;
  theImg.width = size;
}
于 2013-10-03T12:12:53.547 回答
0 

function changeDogsSize() {
    var dogSize = parseInt((id_input).value);
    id_dog.width = dogSize;
}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
     <div class="container bg-light mt-3"></div>

     <!--changing dogs image-->
     <div class="container">
         <img id="id_dog" src="https://i.pinimg.com/originals/e4/9d/75/e49d755afcd02cdbf39d374b42a10ecd.jpg"  alt="dog">
         <input id="id_input" type="text" class="form-control mt-4" id="exampleInputAmount" placeholder="enter img width">
         <button id="id_changeBtn" onclick="changeDogsSize()" type="button" class="btn btn-secondary btn-lg mt-3 text-dark">Change</button>
     </div>
</body>
</html>

于 2020-01-12T07:57:03.390 回答