How to append an image in vanilla javascript using a local file?



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








0















I'm very new to coding and we have just started javascript(vanilla). Currently we are working on a word guessing game and I'm trying to have images as clues. These images would be attached to the word and its location on the index. I've researched the web but I'm confused by the various different ways to do this. I've tried a few but I can't seem to get the image to link to my assets folder where the image is located.



alert("Guess the video game!")
var totalGuesses = 9; //total number of guesses
var words = ["SuperMario64", "GoldenEye", "Contra", "StreetFighter",
"MarioKart", "MortalKombat", "StarFox"];
console.log(words);
var userGuess = //keystrokes guessed
var guessesLeft = 0; //amount of guesses left
var wordsGuessed = //word being guessed
var computerChoices;
var wins = 0;
var losses = 0;
var mario = document.createElement("img");
mario.setAttribute("src" , "assets/images/Mario.jpg");



userGuess = ;
wordsGuessed = ;

document.onkeyup = function (event)
alert("Press any key to start")
wordsGuess = String.fromCharCode(event.keyCode);
userGuess = event.key;
//generate random choice of words

Computerchoice = words[0] //Math.(Math.random() * (words.length));

if (computerChoices == words[0])
var mario = document.createElement("img");
mario.setAttribute(src='assets/images/Mario.jpg');
document.getElementById("clue").append(mario);













share|improve this question
























  • Your call to setAttribute function is invalid. You can read more about that function here. Changing the line from mario.setAttribute(src='assets/images/Mario.jpg') to mario.setAttribute("src", "assets/images/Mario.jpg"); as mentioned by Jack will do the trick.

    – Aayush Sharma
    Nov 14 '18 at 5:39


















0















I'm very new to coding and we have just started javascript(vanilla). Currently we are working on a word guessing game and I'm trying to have images as clues. These images would be attached to the word and its location on the index. I've researched the web but I'm confused by the various different ways to do this. I've tried a few but I can't seem to get the image to link to my assets folder where the image is located.



alert("Guess the video game!")
var totalGuesses = 9; //total number of guesses
var words = ["SuperMario64", "GoldenEye", "Contra", "StreetFighter",
"MarioKart", "MortalKombat", "StarFox"];
console.log(words);
var userGuess = //keystrokes guessed
var guessesLeft = 0; //amount of guesses left
var wordsGuessed = //word being guessed
var computerChoices;
var wins = 0;
var losses = 0;
var mario = document.createElement("img");
mario.setAttribute("src" , "assets/images/Mario.jpg");



userGuess = ;
wordsGuessed = ;

document.onkeyup = function (event)
alert("Press any key to start")
wordsGuess = String.fromCharCode(event.keyCode);
userGuess = event.key;
//generate random choice of words

Computerchoice = words[0] //Math.(Math.random() * (words.length));

if (computerChoices == words[0])
var mario = document.createElement("img");
mario.setAttribute(src='assets/images/Mario.jpg');
document.getElementById("clue").append(mario);













share|improve this question
























  • Your call to setAttribute function is invalid. You can read more about that function here. Changing the line from mario.setAttribute(src='assets/images/Mario.jpg') to mario.setAttribute("src", "assets/images/Mario.jpg"); as mentioned by Jack will do the trick.

    – Aayush Sharma
    Nov 14 '18 at 5:39














0












0








0








I'm very new to coding and we have just started javascript(vanilla). Currently we are working on a word guessing game and I'm trying to have images as clues. These images would be attached to the word and its location on the index. I've researched the web but I'm confused by the various different ways to do this. I've tried a few but I can't seem to get the image to link to my assets folder where the image is located.



alert("Guess the video game!")
var totalGuesses = 9; //total number of guesses
var words = ["SuperMario64", "GoldenEye", "Contra", "StreetFighter",
"MarioKart", "MortalKombat", "StarFox"];
console.log(words);
var userGuess = //keystrokes guessed
var guessesLeft = 0; //amount of guesses left
var wordsGuessed = //word being guessed
var computerChoices;
var wins = 0;
var losses = 0;
var mario = document.createElement("img");
mario.setAttribute("src" , "assets/images/Mario.jpg");



userGuess = ;
wordsGuessed = ;

document.onkeyup = function (event)
alert("Press any key to start")
wordsGuess = String.fromCharCode(event.keyCode);
userGuess = event.key;
//generate random choice of words

Computerchoice = words[0] //Math.(Math.random() * (words.length));

if (computerChoices == words[0])
var mario = document.createElement("img");
mario.setAttribute(src='assets/images/Mario.jpg');
document.getElementById("clue").append(mario);













share|improve this question
















I'm very new to coding and we have just started javascript(vanilla). Currently we are working on a word guessing game and I'm trying to have images as clues. These images would be attached to the word and its location on the index. I've researched the web but I'm confused by the various different ways to do this. I've tried a few but I can't seem to get the image to link to my assets folder where the image is located.



alert("Guess the video game!")
var totalGuesses = 9; //total number of guesses
var words = ["SuperMario64", "GoldenEye", "Contra", "StreetFighter",
"MarioKart", "MortalKombat", "StarFox"];
console.log(words);
var userGuess = //keystrokes guessed
var guessesLeft = 0; //amount of guesses left
var wordsGuessed = //word being guessed
var computerChoices;
var wins = 0;
var losses = 0;
var mario = document.createElement("img");
mario.setAttribute("src" , "assets/images/Mario.jpg");



userGuess = ;
wordsGuessed = ;

document.onkeyup = function (event)
alert("Press any key to start")
wordsGuess = String.fromCharCode(event.keyCode);
userGuess = event.key;
//generate random choice of words

Computerchoice = words[0] //Math.(Math.random() * (words.length));

if (computerChoices == words[0])
var mario = document.createElement("img");
mario.setAttribute(src='assets/images/Mario.jpg');
document.getElementById("clue").append(mario);










javascript html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 5:18









Jack Bashford

16.8k51849




16.8k51849










asked Nov 14 '18 at 5:14









Tonybarajas21Tonybarajas21

11




11












  • Your call to setAttribute function is invalid. You can read more about that function here. Changing the line from mario.setAttribute(src='assets/images/Mario.jpg') to mario.setAttribute("src", "assets/images/Mario.jpg"); as mentioned by Jack will do the trick.

    – Aayush Sharma
    Nov 14 '18 at 5:39


















  • Your call to setAttribute function is invalid. You can read more about that function here. Changing the line from mario.setAttribute(src='assets/images/Mario.jpg') to mario.setAttribute("src", "assets/images/Mario.jpg"); as mentioned by Jack will do the trick.

    – Aayush Sharma
    Nov 14 '18 at 5:39

















Your call to setAttribute function is invalid. You can read more about that function here. Changing the line from mario.setAttribute(src='assets/images/Mario.jpg') to mario.setAttribute("src", "assets/images/Mario.jpg"); as mentioned by Jack will do the trick.

– Aayush Sharma
Nov 14 '18 at 5:39






Your call to setAttribute function is invalid. You can read more about that function here. Changing the line from mario.setAttribute(src='assets/images/Mario.jpg') to mario.setAttribute("src", "assets/images/Mario.jpg"); as mentioned by Jack will do the trick.

– Aayush Sharma
Nov 14 '18 at 5:39













2 Answers
2






active

oldest

votes


















0














The only problem is the second time you are setting the src attribute of the img element:



mario.setAttribute(src='assets/images/Mario.jpg');


This is invalid JavaScript. Changing it to this (which is already in your code - keep using techniques consistently) fixes your problem:



mario.setAttribute("src", "assets/images/Mario.jpg");





share|improve this answer






























    0














    You can simply set like this:



    var mario = document.createElement("img");
    mario.src = "assets/images/Mario.jpg";





    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function ()
      StackExchange.using("externalEditor", function ()
      StackExchange.using("snippets", function ()
      StackExchange.snippets.init();
      );
      );
      , "code-snippets");

      StackExchange.ready(function()
      var channelOptions =
      tags: "".split(" "),
      id: "1"
      ;
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function()
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled)
      StackExchange.using("snippets", function()
      createEditor();
      );

      else
      createEditor();

      );

      function createEditor()
      StackExchange.prepareEditor(
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader:
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      ,
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      );



      );













      draft saved

      draft discarded


















      StackExchange.ready(
      function ()
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293576%2fhow-to-append-an-image-in-vanilla-javascript-using-a-local-file%23new-answer', 'question_page');

      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      The only problem is the second time you are setting the src attribute of the img element:



      mario.setAttribute(src='assets/images/Mario.jpg');


      This is invalid JavaScript. Changing it to this (which is already in your code - keep using techniques consistently) fixes your problem:



      mario.setAttribute("src", "assets/images/Mario.jpg");





      share|improve this answer



























        0














        The only problem is the second time you are setting the src attribute of the img element:



        mario.setAttribute(src='assets/images/Mario.jpg');


        This is invalid JavaScript. Changing it to this (which is already in your code - keep using techniques consistently) fixes your problem:



        mario.setAttribute("src", "assets/images/Mario.jpg");





        share|improve this answer

























          0












          0








          0







          The only problem is the second time you are setting the src attribute of the img element:



          mario.setAttribute(src='assets/images/Mario.jpg');


          This is invalid JavaScript. Changing it to this (which is already in your code - keep using techniques consistently) fixes your problem:



          mario.setAttribute("src", "assets/images/Mario.jpg");





          share|improve this answer













          The only problem is the second time you are setting the src attribute of the img element:



          mario.setAttribute(src='assets/images/Mario.jpg');


          This is invalid JavaScript. Changing it to this (which is already in your code - keep using techniques consistently) fixes your problem:



          mario.setAttribute("src", "assets/images/Mario.jpg");






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 14 '18 at 5:17









          Jack BashfordJack Bashford

          16.8k51849




          16.8k51849























              0














              You can simply set like this:



              var mario = document.createElement("img");
              mario.src = "assets/images/Mario.jpg";





              share|improve this answer



























                0














                You can simply set like this:



                var mario = document.createElement("img");
                mario.src = "assets/images/Mario.jpg";





                share|improve this answer

























                  0












                  0








                  0







                  You can simply set like this:



                  var mario = document.createElement("img");
                  mario.src = "assets/images/Mario.jpg";





                  share|improve this answer













                  You can simply set like this:



                  var mario = document.createElement("img");
                  mario.src = "assets/images/Mario.jpg";






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 14 '18 at 5:20









                  Lovlesh PokraLovlesh Pokra

                  1213




                  1213



























                      draft saved

                      draft discarded
















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid


                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.

                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function ()
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293576%2fhow-to-append-an-image-in-vanilla-javascript-using-a-local-file%23new-answer', 'question_page');

                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

                      Crossroads (UK TV series)

                      ữḛḳṊẴ ẋ,Ẩṙ,ỹḛẪẠứụỿṞṦ,Ṉẍừ,ứ Ị,Ḵ,ṏ ṇỪḎḰṰọửḊ ṾḨḮữẑỶṑỗḮṣṉẃ Ữẩụ,ṓ,ḹẕḪḫỞṿḭ ỒṱṨẁṋṜ ḅẈ ṉ ứṀḱṑỒḵ,ḏ,ḊḖỹẊ Ẻḷổ,ṥ ẔḲẪụḣể Ṱ ḭỏựẶ Ồ Ṩ,ẂḿṡḾồ ỗṗṡịṞẤḵṽẃ ṸḒẄẘ,ủẞẵṦṟầṓế