Javascript .src not working

Currently working on the Chore Bot task.

At the beginning code looks like this:

let doorImage1 = document.getelementById(‘door1’);
let botDoorPath = “link”;
door1.onclick = () => {
doorImage1.src = botDoorPath;
}

I am trying to code this on computer on VS Code but the .src thing is not recognized as a function. What am I doing wrong?

1 Like

why didn’t we use inline styles or the <style> tags to load the CSS?

Sorry I put the question in CSS part by accident. It has nothing to do with it, just JavaScript.

I think this is your problem. The quotations look to differ from each other which means it wont be seen as a string and throws an error instead.
Try to rewrite the link and make sure its a string.

also check the quotations for this one. they look a little different as well. Might just be my eyes playing tricks on me tho.

let cardImage1 = document.getelementById(card1);
let botDoorPath = “url(‘Images/Charmander.png’)”;
card1.onclick = () => {
cardImage1.src = botDoorPath;
}

That is not the problem. I have this code. It should be enough to change the image on click. There are no errors. However it is not doing anything. I see that when I type the ==.src== it is not recognized as a built in function. That’s my question, looks like VS CODE doesnt know what .src means am I missing something?

I can add that I can change the image on click with this code

let buttonRole = () =>{
card1.style.backgroundImage = “url(‘Images/Charmander.png’)”;
resetButton.innerHTML = ‘RESET’;
}
resetButton.addEventListener(‘click’, buttonRole);

However I will not be able to make the task like this.

it should work with the src. If it says “.src” is not a function that will probably mean that the object you are getting with let cardImage1 = document.getelementById(card1); does not return the right object.

I do notice that let cardImage1 = document.getelementById(card1); takes a variable name instead of a string. I think you want to use let cardImage1 = document.getelementById("card1"); ?

If this does not fix it could you post the complete code since i dont think your problem lies in the part you posted.

<html>
    <head>
        <title>Pokemon Quiz Game</title>
        <link rel="stylesheet" type="text/css" href="style.css">
     
    </head>
    <body>
        <header><h1>Pokemon Quiz Game</h1></header>

        <div id = board>

            <div id = allCards>
                 <span class = card id = card1></span>
                 <span class = card id = card2></span>
                  <span class = card id = card3></span>
             </div>

        </div>
        <script src="./sciript.js"></script>
    </body>

</html>
body {
    width: 99%;
    height: 97%;
    background-color: rgb(128, 125, 125);
    margin-top: 0px;
   
}

header {
    height: 100px;
    width: 100%;
    background-color: rgb(216, 247, 219);
    display: flex;
    justify-content: center;
    
    
}

h1 {
    align-self: center;
    color: rgba(224, 224, 0, 0.698);
    font-size: 60px;
    -webkit-text-stroke: 3px blue;    
}

#board {
    background-color: rgb(240, 204, 2);
    height: 600px;
    width: 900px;
    margin: 60px auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border-radius: 3%;
    
      
}

.card {
    height: 342px;
    width: 245px;
    background-image: url(https://assets.pokemon.com/assets/cms2/img/cards/web/EX1/EX1_EN_108.png);  
    margin-top: 50px;
    cursor: pointer;
    display: inline-block;
    
    
}

#allCards {
    display: flex;
    width: 100%;
    flex-basis: 100%;
    justify-content: space-evenly;
    
    
    
}

 .resetButton {
    height: 40px;
    width: 100px;
    align-self: bottom;
    cursor: pointer;
    display: block;
    font-size: 20px;
    color: blue;
    background-color: aquamarine
      
} 

let energy = "url('https://assets.pokemon.com/assets/cms2/img/cards/web/EX1/EX1_EN_108.png')";
let charmander = "url('https://assets.pokemon.com/assets/cms2/img/cards/web/DP7/DP7_EN_101.png')";
let charmeleon = "url('https://assets.pokemon.com/assets/cms2/img/cards/web/DP7/DP7_EN_102.png')";
let charizard = "url('https://assets.pokemon.com/assets/cms2/img/cards/web/DP7/DP7_EN_103.png')";
let card1 = document.getElementById('card1');
let card2 = document.getElementById('card2');
let card3 = document.getElementById('card3');
let resetButton = document.createElement("button");
resetButton.innerHTML = 'RESET';
resetButton.className = 'resetButton';
let board = document.getElementById('board');
board.appendChild(resetButton);





let buttonRole = () =>{
    card1.style.backgroundImage = energy;
    card2.style.backgroundImage = energy;
    card3.style.backgroundImage = energy;
    resetButton.innerHTML = 'RESET';
}


resetButton.addEventListener('click', buttonRole);





card1.onclick = () => {
    card1.style.backgroundImage = charmander;
}


This is entire code. As you can see in Javascript I am using style.backgroundImage to change the display on click. What i need to do so I can change the style.backgroundImage to .src ?

1 Like

.src isn’t recognized as a function because botDoorPath isn’t a DOM object. You have a typo in your let assignment. Should be document.getElementById(‘door1’).
‘Element’ needs to be capitalized.

I just made the typo here not in actual code.

Despite it being called sciript (typo?) instead of script the entire code seems to be working in jsfiddle - at least for me. (Also there’s a missing ; in the CSS.)

src in the css is not meant for pictures, it’s for fonts according to this:

so background-image is probably the right thing to do.

Your Javascript is looking good. It works for me atleast.

The reason .src does not work for you is because you display the cards as a <span> element. This element does not have a .src attribute so you wont be able to use it either.
Here is a list of elements that do use the src attribute.

Using the background image as you did is a good solution.

I like your pokemon theme btw. Brings back memorys.

I do want to say that this is not a neat way of defining attributes for your html tho:

<div id = board>
       <div id = allCards>
           <span class = card id = card1></span>
           <span class = card id = card2></span>
           <span class = card id = card3></span>
       </div>
</div>

This is better. Don’t know why the browser even allows it without the quotes.

<div id="board">
       <div id="allCards">
           <span class="card" id="card1"></span>
           <span class="card" id="card2"></span>
           <span class="card" id="card3"></span>
       </div>
</div>
1 Like

Nice thank you for help. Lesson for me that entire code pasting is necessary for solving problem, not just 1 file. Really I am gratefull, I would not find the answer myself. :+1:

1 Like