Ändern der Bildquelle mit Hilfe von JavaScript

Question

Ich habe einen Code-Schnipsel, die wie folgt lautet:

<div id="image_input"> 
    <img src="missing-image.png" name="image_comp" /> 
    <input type="text" name="image_url" size="37" /> 
</div> 

Ich möchte, dass, wenn jemand unfocus image_url oder sogar ein onChange Ereignis tun, eine Funktion Javascript changeImage() angehoben werden genannt (das ich schon wissen, wie zu tun, jetzt kommt, was ich nicht tun) und ändern Sie die image_comp Änderungen an der URL, die in image_url geschrieben wird. Wie macht man das?

Answer 1

document.getElementsByName("image_comp")[0].src = document.getElementsByName("image_url")[0].src; 

wenn Sie mehrere Elemente mit dem gleichen Namen, den Sie ihnen Schleife Trog oder IDs verwenden, wenn Sie sicher sein wollen, dass es Sie dies tun für nur 1 Element.

Answer 2

<div id="image_input"> 
    <img src="missing-image.png" id="image_comp" /> 
    <input type="text" name="image_url" id="image_url" size="37" /> 
</div> 

<script type="text/javascript"> 
    jQuery('#image_url').bind('change blur', function() { 
     jQuery('#image_comp').attr('src', this.value); 
    }); 
</script> 

Answer 3

<div id="image_input"> 
    <img src="missing-image.png" name="image_comp" id="image_comp" /> 
    <input type="text" name="image_url" size="37" id="image_url" /> 
</div> 

Sie können ids für beide Elemente definieren und diese in Ihrer onChange Funktion:

document.getElementById('image_comp').src = document.getElementById('image_url').value;