從輸入框中獲取img src轉換爲div

我自學自己的CSS HTML和現在的Javascript。從輸入框中獲取img src轉換爲div

這個小項目背後的想法是讓用戶輸入一個img的URL，當用戶點擊一個按鈕時，img應該被插入頁面內的新的<div>。

我試着在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>

Javascript代碼：

<script type="text/javascript"> 

function GetFeed(imgForm){ 

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


} 
</script>

誰能幫助我嗎？我不知道該從哪裏出發..至少給我一些指示器如何從txt框中獲取值併爲每次img添加一個新的插入和新URL時添加一個新的 <div><img src="user input from txt box should go here"/></div>？

謝謝先進。

來源

2012-03-26 user1294097

我根據您的需要想how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div>你需要這個

HTML

<form> 
    <input type="text" id="txt"> 
    <input id="btn" type="button" value="Get Image" onclick="getImg();" /> 
</form> 
<div id="images"></div>

JS（去在你的頭標籤內）

function getImg(){ 
    var url=document.getElementById('txt').value; 
    var div=document.createElement('div'); 
    var img=document.createElement('img'); 
    img.src=url; 
    div.appendChild(img); 
    document.getElementById('images').appendChild(div); 
    return false; 
}

這是example。

來源

2012-03-27 00:13:09

這個偉大的工程，非常感謝，我覺得對我來說最難的部分是creatElement和使用appendChild，我看你做了什麼，還有我終於可以移動到我的小項目的下一階段。 – user1294097 2012-03-27 01:10:39

不客氣:-) – 2012-03-27 01:11:23

您應該添加一個id屬性您<input>：

<input type="text" name="inputbox1" id="box1" value="src" />

...那麼，調整你的代碼：

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

一旦你的源代碼，你可以回到一個對象img標記，並使用文本框中的值設置其屬性。該img對象的屬性是由文檔對象模型定義：

http://www.w3schools.com/jsref/dom_obj_image.asp

來源

2012-03-27 00:01:20 RMorrisey

類似這樣的東西會創建一個div，其圖像元素的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>

來源

2012-03-27 00:14:08 monknomo

從輸入框中獲取img src轉換爲div

回答

相關問題