Fatal编程技术网
  • javascript/
  • Javascript 将img src从输入框输入到div中

Javascript 将img src从输入框输入到div中

javascript

Javascript 将img src从输入框输入到div中,javascript,src,inputbox,Javascript,Src,Inputbox,我正在自学CSS HTML和Javascript 我的这个小项目背后的想法是让用户输入一个img的URL，当用户点击一个按钮时，img应该被插入页面中的一个新的 <html> <head> <script type="text/javascript"> function GetFeed(form){ var imgSrc = form.elements["inputbox1"].value

我正在自学CSS HTML和Javascript

我的这个小项目背后的想法是让用户输入一个img的URL，当用户点击一个按钮时，img应该被插入页面中的一个新的

<html>
    <head>
        <script type="text/javascript">
            function GetFeed(form){
            var imgSrc = form.elements["inputbox1"].value;  
            var imgDiv = document.createElement('div');
            imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
            document.body.appendChild(imgDiv);
            }
        </script>
    </head>
    <body>
        <form name="imgForm">
            enter URL:
            <input type="text" name="inputbox1" value="src" />  
            <input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
        </form>
    </body>
</html>
我试着在stackoverflow上找了几个小时，但我真的不明白我怎么能用其他答案来回答我自己的代码。大部分CSS和HTML代码已经完成，如果可能的话，我只需要javascript部分的帮助

以下是我到目前为止的情况：（对不起，不多）

html代码：

<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />  
<input type="button" value="Get Feed" onclick="GetFeed()"/>
</form>


输入URL:
Javascript代码：

<script type="text/javascript">

function GetFeed(imgForm){

var imgSrc = document.getElementById('src').value;    


}
</script>


函数GetFeed（imgForm）{
var imgSrc=document.getElementById（'src'）.value；
}
有人能帮我吗？我不知道从这里到哪里去。。至少给我一些提示，我如何从txt框中获取值并添加新的
每次插入unser和img的新URL时

感谢您的高级支持。

您应该在
属性中添加
id
：

获得源代码后，可以为
img
标记获取对象，并使用文本框中的值设置其属性。
img
对象的属性由文档对象模型定义：

我想根据您的需要
如何从txt框中获取值并添加一个新的
您需要这个

HTML

<form>
  <input type="text" id="txt">
  <input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
这是一个例子。​

类似的东西将创建一个div，其中包含一个image元素，src等于输入框中的文本。然后将div追加到页面的末尾

<html>
    <head>
        <script type="text/javascript">
            function GetFeed(form){
            var imgSrc = form.elements["inputbox1"].value;  
            var imgDiv = document.createElement('div');
            imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
            document.body.appendChild(imgDiv);
            }
        </script>
    </head>
    <body>
        <form name="imgForm">
            enter URL:
            <input type="text" name="inputbox1" value="src" />  
            <input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
        </form>
    </body>
</html>


函数GetFeed（表单）{
var imgSrc=form.elements[“inputbox1”].value；
var imgDiv=document.createElement（'div'）；
imgDiv.innerHTML=“”
文件.正文.附件（imgDiv）；
}
输入URL:
您的代码应该是这样的： html代码：

<div class="input-group col-md-5" style="margin: 0px auto;">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="button-image">
              Choose
      </button>
    </div>
   <input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
   <img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>
这很好，非常感谢，我认为对我来说最困难的部分是CreateElement和appendChild，我知道你在那里做了什么，我终于可以进入我的小项目的下一阶段了。 
<html>
    <head>
        <script type="text/javascript">
            function GetFeed(form){
            var imgSrc = form.elements["inputbox1"].value;  
            var imgDiv = document.createElement('div');
            imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
            document.body.appendChild(imgDiv);
            }
        </script>
    </head>
    <body>
        <form name="imgForm">
            enter URL:
            <input type="text" name="inputbox1" value="src" />  
            <input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
        </form>
    </body>
</html>

<div class="input-group col-md-5" style="margin: 0px auto;">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="button-image">
              Choose
      </button>
    </div>
   <input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
   <img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>

function getImg(){
        var url = document.getElementById('image_label').value;
        var img = document.getElementById('imgThumb');
        img.src = url;
        return true;
    }