入力ボックスからdivへのimg srcの取得

私は自分自身でCSS HTMLと今やJavascriptを教えています。入力ボックスからdivへのimg srcの取得

この小さなプロジェクトの背後にあるアイデアは、ユーザーにimgのURLを入力させることです。ユーザーがボタンを押すと、imgはページ内の新しい<div>に挿入されます。

私はstackoverflowで時間を探してみましたが、正直なところ私自身のコードに他の答えを使用する方法を理解できません。 CSSとHTMLコードの大部分はすでに完成していますが、JavaScriptコードの場合は、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のunser挿入と新しい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

あなたは大歓迎です:-) –

あなたの<input>にid属性を追加する必要があります

<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

このようなものは、入力ボックスのテキストと等しいsrcを持つ画像要素でdivを作成します。その後、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

入力ボックスからdivへのimg srcの取得

答えて

関連する問題