Comment puis-je ajouter une variable javascript HTML image src de la balise

Je savoir cette réponse est ici, mais j'ai été incapable de le trouver (ou au moins reconnaître quand je l'ai vu!). Je suis un noob par rapport à jquery, alors pardonnez-moi s'il vous plaît.

Problème:

J'ai 20 images, nommé 1.png par 20.png. Je voudrais une image différente pour afficher de façon aléatoire à chaque fois qu'un utilisateur clique sur un bouton.

Ce travail:

Mon code javascript pour générer le nombre aléatoire ressemble à ceci:

var randomImage = 1 + Math.floor(Math.random() * 20);

Ce n'est pas...

Ce que je suis en train de faire est de passer le résultat à mon document HTML comme le nom de l'image, c'est-à lit quelque chose comme ceci:

 <img id="randImg" class="img_answer" src="randomImage.png">

J'ai essayé de la concaténation, mais n'arrive pas à comprendre cela. Dois-je créer une fonction qui affecte l'img ID ou une classe? Quelqu'un peut-il m'indiquer la façon la plus propre de faire cela?

  • C'est du Javascript, pas jQuery.
  • Comme @SLaks souligne, Javascript est le langage en cours d'exécution sur les navigateurs en général. jQuery est une bibliothèque qui permet de faire certaines choses en Javascript plus facile. En général, si vous voyez $('truc'), c'est jQuery - le reste est en Javascript.
InformationsquelleAutor Cliff | 2013-03-31
  1. 9
    var randomImage = 1 + Math.floor(Math.random() * 20);    
var imgName = randomImage+".png";
$("#randImg").attr("src",imgName);

    Démo: http://jsfiddle.net/a9Ltw/

    • Quelques secondes plus rapide... 😀
    • Pas tant que ça, mais c'est plus simple.
    • Grâce Mooseman, et tous ceux qui ont aidé. Mooseman, votre jsfiddle code fonctionne comme un charme sur jsfiddle, mais j'ai autre chose à l'origine du problème. Pas d'erreurs de la console et de la nouvelle corriger le chemin de l'image clignote brièvement dans la console, cependant, l'image ne change jamais sur mon site. J'ai plus d'apprendre à faire avant de me demander pour plus d'aide, mais je voulais remercier tous ceux qui ont fait chorus. Cheers, Falaise
    • Heureux de vous aider. Veuillez marquer d'une "meilleure réponse" pour les futurs utilisateurs.
    InformationsquelleAutor Mooseman
  2. 4

    Orthographe un peu pour aider à enseigner:

    Sur votre page, vous auriez quelque chose comme ceci:

    <img id=randomImage />

    Et probablement dans la tête pour masquer l'image jusqu'à ce que vous avez choisi une pour charger, ce:

    <style>
#randomImage {
    width: 400px; height: 200px; /* or whatever the dimensions are */
    visibility: hidden;
}
</style>

    Puis dans votre Javascript:

    var ordinal = 1 + Math.floor(Math.random() * 20);
$('#randomImage').css('visibility', 'visible').attr('src', ordinal + '.png');

    De sorte que le HTML définit la balise img, et quelques premières CSS définit ses dimensions et le masque aussi il n'y a pas laid icône d'image brisée, etc dans certains navigateurs - juste un espace vide.

    Puis finalement le Javascript charge et exécute, en déterminant de façon aléatoire un nombre ordinal. La deuxième ligne de Javascript appelle jquery pour faire l'img visible et l'ensemble de son attribut src de l'image aléatoire.

    InformationsquelleAutor Chris Moschini
  3. 2
    $(document).ready(function() {
    var randomImage = 1 + Math.floor(Math.random() * 20),    
                img = randomImage + ".png";

    $("#randImg").attr("src", img);
});
    InformationsquelleAutor gashu
  4. 1

    Juste ajouter un peu de l'image par défaut pour img marque pour éviter l'affichage de rien si l'utilisateur a désactivé JavaScript et de jQuery dans l'utilisation $("#randImg").attr("src", randomImage + ".png");

    InformationsquelleAutor Lemurr
  5. 0
    var thesoruce = "http://localhost:8080/content/dam/admin/" + id ;

 g_fb.find('p').append('<img src= '+thesoruce +'  height="250px" width="600px">');
    InformationsquelleAutor smac2020