Javascript: charge une image de l'URL et affiche
Je souhaite préface ceci avec le fait que je suis très nouveau pour JavaScript. J'apprécie votre patience avec moi.
J'essaie de créer un script qui permet à un utilisateur de saisir un nom dans une zone de texte, appuyez sur Soumettre et une image s'affiche en fonction de ce nom.
J'ai réussi à trouver ceci:
<html> <body> <form> <input type="text" value="" id="imagename"> <input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO"> </form> </body> </html> Ce qui fait exactement ce dont j'ai besoin, fournit une image autour de ce qu'un utilisateur saisit. Mais ce que je veux, ce n'est pas pour que l'image s'ouvre dans une nouvelle fenêtre, ou télécharge sur mon ordinateur. Je souhaite qu'elle s'affiche sur la page lorsqu'elle est cliquée comme une image comme l'exemple ici .
Je suis sûr que mon inexpérience avec Javascript est la principale cause de mon incapacité à comprendre cela. Le script ci-dessus est aussi loin que je peux le faire sans vider les choses. Toute aide est appréciée.
Lorsque le bouton est cliqué, obtenez la valeur de l'entrée et utilisez-le pour créer un élément d'image qui est ajouté au corps (ou ailleurs):
<html> <body> <form> <input type="text" id="imagename" value="" /> <input type="button" id="btn" value="GO" /> </form> <script type="text/javascript"> document.getElementById('btn').onclick = function() { var val = document.getElementById('imagename').value, src = 'http://webpage.com/images/' + val +'.png', img = document.createElement('img'); img.src = src; document.body.appendChild(img); } </script> </body> </html>
VIOLON
Le même dans jQuery:
$('#btn').on('click', function() { var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'}); img.appendTo('body'); });
Vous étiez juste manquant une image pour changer l'attribut "src" de:
<html> <body> <form> <input type="text" value="" id="imagename"> <input type="button" onclick="document.getElementById('img1').src = 'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'" value="GO"> <br/> <img id="img1" src="defaultimage.png" /> </form> </body> </html>
Avez-vous quelque chose comme ça:
<html> <head> <title>Z Test</title> </head> <body> <div id="img_home"></div> <button onclick="addimage()" type="button">Add an image</button> <script> function addimage() { var img = new Image(); img.src = "https://www.google.com/images/srpr/logo4w.png" img_home.appendChild(img); } </script> </body>
Vous devez définir correctement l'URL en fonction de la valeur d'entrée. Le seul problème est que vous utilisez window.location.href. Paramètre window.location.href change l'url de la fenêtre actuelle. Ce que vous voulez probablement faire, c'est changer l'attribut src d'une image.
<html> <body> <form> <input type="text" value="" id="imagename"> <input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO"> </form> <img id="the-image"> </body> </html>
Ajoutez un div avec ID imgDiv et faites votre script
document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'
J'ai essayé de rester aussi près de votre original que tp ne vous accable pas avec jQuery et tellement
Tout d'abord, je suggère fortement d'utiliser une bibliothèque ou un cadre pour faire votre Javascript. Mais juste pour quelque chose de très simple, ou pour apprendre à apprendre, c'est bon. (Vous pouvez utiliser jquery, underscore, knockoutjs, angular)
Deuxièmement, il n'est pas conseillé de se lier directement à onclick, ma première suggestion va de cette façon aussi.
C'est ce dont vous avez besoin, c'est de modifier la src d'un img dans votre page.
Dans l'endroit où vous souhaitez afficher votre image, vous devez insérer une étiquette img comme ceci:
Ensuite, vous devez modifier l'onclick pour mettre à jour l'attribut src. La manière la plus simple pour laquelle je peux penser est comme son
onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"
Encore une fois, ce n'est pas la meilleure façon de le faire, mais c'est un début. Je vous recommande d'essayer jQuery et de voir comment pouvez-vous accomplir la même chose en utilisant onclick (conseil … cochez la section sur jquery au sujet des événements)
J'ai fait un violon simple comme exemple de votre poblem à l'aide de certains logos google … tapez 4 o 3 dans la boîte et vous deux images de différentes tailles. (Désolé … Je n'ai pas le temps de rechercher de meilleures images par exemple)