首页>问答>javascript>通过form input输入数

通过form input输入数据无法改变body宽度,该如何解决?

2018-01-29 17:43 分类:javascript
问题描述:
我正在学习Web开发,我有一个问题,通过用户表单的输入,然后依赖这个输入值设置容器的宽度。
首先我在html中设置了用户表单:

<form class="changesize" action="#">
    Width: <input type="text" name="width" id="txt_width">
   <input type="button" name="submit" value="Change Container Size" 
   onclick="containersize();">
</form>
<!--html教程,html问答-->
以下HTML是我希望随其中的文本调整大小的容器。
<div id="container"> 
<p>Lorem ipsum dolor s...</p> 
</div>
现在JS应该获取这个输入,然后改变容器的宽度。
function containersize(){
  var containerwidth = document.getElementById('txt_width'); // js教程
  var formatwidth = containerwidth.text + ".px";
  var container = document.getElementById('container'); // js问答
  container.style.width = formatwidth;
}
解决方案:
问题产生的原因是字符串拼接错误,你在字符串拼接时应该将将“.px”改为“px”,以及将文本更改为值以获取输入的值,代码如下:

function containersize(){
  var containerwidth = document.getElementById('txt_width'); // form表单
  var formatwidth = containerwidth.value + "px";
  console.log(formatwidth);
  var container = document.getElementById('container'); // input输入域
  container.style.width = formatwidth;
}
<form class="changesize" action="#">
    Width: <input type="text" name="width" id="txt_width">
   <input type="button" name="submit" value="Change Container Size" 
   onclick="containersize();">
</form>
<!--form表单-->

The following HTML is the container i wish to resize along with the text within it.
<div id="container">
<p>Lorem ipsum dolor s...</p>
</div>

Now this is the JS which should take this input and then change the container width.

总结:
在开发中,字符串拼接是一项很基本并且重要的工作,在html模板拼接时很容易发生错误,所以一定要多加练习。
最新教程最新教程 更多>>
html2018-01-31 16:39
css2018-01-31 16:37