Javascript 输入值更新困境_Javascript_Html_Css

Javascript 输入值更新困境

javascript html css

Javascript 输入值更新困境,javascript,html,css,Javascript,Html,Css,所以我试图实现一个程序，根据用户的输入改变图像的宽度和高度，我可以正常实现，但我想用面向对象编程，所以我的问题是：调用“material”函数时，我需要得到输入元素的值，但是如果我在函数中移动输入元素，“sett”将无法正常工作，因为我在定义它们之前使用了输入元素，如果我将“sett”移动到代码的底部，那么“material”的“caller”参数将无法工作，因为我在定义它之前再次使用了“sett”。这是我的密码：我也忘了删除HTML代码中的“顶部”和“左边”输入元素，所以把与它们相关的任何

所以我试图实现一个程序，根据用户的输入改变图像的宽度和高度，我可以正常实现，但我想用面向对象编程，所以我的问题是：调用“material”函数时，我需要得到输入元素的值，但是如果我在函数中移动输入元素，“sett”将无法正常工作，因为我在定义它们之前使用了输入元素，如果我将“sett”移动到代码的底部，那么“material”的“caller”参数将无法工作，因为我在定义它之前再次使用了“sett”。这是我的密码：

我也忘了删除HTML代码中的“顶部”和“左边”输入元素，所以把与它们相关的任何东西都看作是空白。< /P>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#brazil {position:absolute;display:none;width:200;height:200;}
</style>
</head>
<body>

<input id="width" type="text" placeHolder="width"/>
<input id="height" type="text" placeHolder="height"/>
<input id="top" type="text" placeHolder="Vertical Position"/>
<input id="left" type="text" placeHolder="Horizontal Position"/>
<input type="button" value="Create" onclick="material(sett)"/>

<br>
<img id="brazil" src="brazil.png" alt="brazil"/>



<script>


var  Cons = function(width,height) {
this.width = width;
this.height = height;
}

var brazil = document.getElementById("brazil");

var nwidth = document.getElementById("width").value;
var nheight = document.getElementById("height").value;


var sett = new Cons(nwidth,nheight);

var  material = function(caller) {

brazil.style.width = caller.width;
brazil.style.height = caller.height;
brazil.style.display = "inline";

}


</script>

</body>
</html>


#巴西{位置：绝对；显示：无；宽度：200；高度：200；}


var Cons=功能（宽度、高度）{
这个。宽度=宽度；
高度=高度；
}
var巴西=document.getElementById（“巴西”）；
var nwidth=document.getElementById（“宽度”）.value；
var nheight=document.getElementById（“高度”）.value；
var sett=新Cons（nwidth，nheight）；
var material=函数（调用者）{
brazil.style.width=caller.width；
巴西.style.height=caller.height；
brazil.style.display=“inline”；
}

您有不同的问题。最后，我想你会发现：

var Cons = function(width, height) {
  this.width = width + 'px';
  this.height = height + 'px';
}

var material = function(caller) {
  brazil.style.width = caller.width;
  brazil.style.height = caller.height;
  brazil.style.display = "inline";
}

var brazil = document.getElementById("brazil");
var nwidth = document.getElementById("width");
var nheight = document.getElementById("height");
var button = document.querySelector('input[type="button"]');



button.addEventListener('click', function(){
    var sett = new Cons(nwidth.value, nheight.value);
    material(sett);
});

jsFiddle：我所做的：

使用
```
nheight
```
和nwidth`更改了逻辑，因此不缓存值，而是缓存DOM元素
添加了一个事件侦听器，以便您可以按正确的顺序传递和运行函数
向类/对象添加了
```
+'px'
```
，以便正确呈现

另外，欢迎访问：）


#巴西{位置：绝对；显示：无；宽度：200；高度：200；}


var Cons=功能（宽度、高度）{
这个。宽度=宽度；
高度=高度；
};
var巴西=document.getElementById（“巴西”）；
var sett=函数（）{
返回新Cons（document.getElementById（“宽度”）.value，document.getElementById（“高度”）.value）
};
var material=函数（调用者）{
brazil.style.width=caller.width；
巴西.style.height=caller.height；
brazil.style.display=“inline”；
}

将sett修改为函数也应该有效

简单地说，当值只是一个空字符串时，您仅从pageload的输入中获取值。我知道，我在顶部解释了它，但一定有某种方法？当然有，您需要在单击按钮时获取输入值，是的，我在上面也解释过，但我想知道当点击按钮时如何获取输入值

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        #brazil {position:absolute;display:none;width:200;height:200;}
    </style>
</head>
<body>
    <input id="width" type="text" placeHolder="width"/>
    <input id="height" type="text" placeHolder="height"/>
    <input id="top" type="text" placeHolder="Vertical Position"/>
    <input id="left" type="text" placeHolder="Horizontal Position"/>
    <input type="button" value="Create" onclick="material(sett())"/><br>
    <img id="brazil" src="brazil.png" alt="brazil"/>
    <script>
        var  Cons = function(width,height) {
            this.width = width;
            this.height = height;
        };
        var brazil = document.getElementById("brazil");
        var sett = function(){

            return new Cons(document.getElementById("width").value,document.getElementById("height").value)
        };

        var  material = function(caller) {

            brazil.style.width = caller.width;
            brazil.style.height = caller.height;
            brazil.style.display = "inline";

        }


    </script>

</body>
</html>