Image Preview in JS with JS

Question

私は画像のURLであるtext_fieldを持っており、その画像をimgタグにロードしたいと思います。 image_urlテキストボックスがフォーカスを失ったときに画像を更新して、URLを変更してプレビューを表示することもできます。ここで

は、ビューのための適切なERBです：ロードオン

<script type="text/javascript"> 

document.observe('dom:loaded', function() { 
    $('preview').src = $('image_url').text 
    $('image_url').bind("focusout",function(){ 
    $('preview').src = this.text 
    )} 

}); 

は、私が何を取得し、SRCは変更されません...

<div class="control-group"> 
    <%= f.label :image, :class => 'control-label' %> 
    <div class="controls"> 
     <%= f.text_field :image_url, :class => 'text_field', id: "image_url" %> 
    </div> 
    </div> 

    Preview: <img id="preview" src=""> 

と埋め込まれたJS

Answer 1

検索しようとしているオブジェクトのセレクタを指定する必要があります。また、私は準備ができている文書を使用します。

$(document).ready(function() { 
    $('#preview').src = $('#image_url').text(); 
    $('#image_url').bind("focusout",function(){ 
    $('#preview').src = this.text(); 
    }); 
});