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

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);



}



}

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

asked Nov 14 '18 at 5:14

Tonybarajas21

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

add a comment |

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);



}



}

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

asked Nov 14 '18 at 5:14

Tonybarajas21

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

add a comment |

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);



}



}

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

asked Nov 14 '18 at 5:14

Tonybarajas21

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

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

asked Nov 14 '18 at 5:14

Tonybarajas21

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

asked Nov 14 '18 at 5:14

Tonybarajas21

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

edited Nov 14 '18 at 5:18

Jack Bashford

7,77831438

asked Nov 14 '18 at 5:14

Tonybarajas21

asked Nov 14 '18 at 5:14

Tonybarajas21

asked Nov 14 '18 at 5:14

Tonybarajas21

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

add a comment |

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

add a comment |

2 Answers
2

active

oldest

votes

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");

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

add a comment |

You can simply set like this:

var mario = document.createElement("img");

mario.src = "assets/images/Mario.jpg";

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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");

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

add a comment |

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");

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

add a comment |

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");

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

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");

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

answered Nov 14 '18 at 5:17

Jack Bashford

7,77831438

add a comment |

You can simply set like this:

var mario = document.createElement("img");

mario.src = "assets/images/Mario.jpg";

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

add a comment |

You can simply set like this:

var mario = document.createElement("img");

mario.src = "assets/images/Mario.jpg";

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

add a comment |

You can simply set like this:

var mario = document.createElement("img");

mario.src = "assets/images/Mario.jpg";

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

You can simply set like this:

var mario = document.createElement("img");

mario.src = "assets/images/Mario.jpg";

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

answered Nov 14 '18 at 5:20

Lovlesh Pokra

1063

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky