So confused...can anyone help?

JavaScript
1

Hello all,

I am learning Javascript and have been trying to make a simple flashcard game, but am getting hung up on what I thought would be the pretty simple task of getting a card to flip over. I absolutely cannot understand why this is not working. I can get the card to “flip” from the front to back onclick, but not back to front on the subsequent click and it really seems like my code should work. Anyone out there able to take a look and tell me what I’m doing wrong? The Html below is followed by the javascript.

<html>
  <head>
    <meta charset="UTF-8">
    <title>Flashcards</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css" />    
  </head>
  <body>
    <div class="notecard-wrapper">
	    <div class ="notecard" id="notecard"> 
		    <img src="assets/front.png" alt="notecard" id="image" />
			<div class="textwrap">
				<p id="text">Text Here</p>    
			</div>
	    </div>
    </div>
  <script type="text/javascript" src="scripts.js"></script>
  </body>
</html>

JAVASCRIPT

var card = document.getElementById('image');

notecard.addEventListener('click', flipCard);

function flipCard(){
	if(card.src = "assets/front.png"){
		card.src = "assets/back.png";
			} else if (card.src = "assets/back.png"){
		   card.src = "assets/front.png";
	};
};	`
2 
`if(card.src = "assets/front.png"){ // invalid syntax`

your syntax is wrong. operators should be === or == when inside the condition

3

Thanks! I thought that might be the issue, but I’ve tried using both double and triple equal signs, but when I do, nothing works at all.

4

well you have other problems then. = isnt valid syntax so its probably your logic. give me a sec to run it in my editor

5

Is notecard defined somewhere else?
Looks like you are adding a listener to an undefined element

6

sorry, I left that out of my cut and paste, this is above var card:

var notecard = document.getElementById('notecard');

8

i think you have an issue with the scope that card operates in. maybe you want to reset the card variable everytime the function is called. other wise its remains unchanged. i could be wrong but try that.

// var card = document.getElementById('image'); 

notecard.addEventListener('click', flipCard);

flipCard(){
    let card = document.getElementbyid('image');    
    let front = "assets/front.png"
    let back = "assets/back.png"
    if (card.src == front) {
        card.src = back
    } else {
        card.src = front
    }
}
9

Thanks for this. I didn’t have any luck with it — it did the same thing (wouldn’t let the back card flip back to the front) — but I really appreciate your time. I guess it’s just bad coding and I’ll find another way to do it. Still, it dumbfounds me as I don’t understand why it doesn’t work.

10

Another thing to look out for is that the src is pointing to the right path. Depending on where the image is being serve, you’ll have to include the host. Though if it is localhost, browsers are smart enough to look in your file system with ./assets/

11

Pretty sure element.src will give you the absolute path and you are comparing it to a relative path.

const img = document.getElementById('img');

img.addEventListener('click', () => {
  if (img.src.match(/front/)) {
    img.src = 'assets/back.jpg';
  } else {
    img.src = 'assets/front.jpg';
  }
});