控制台在尝试 innerHTML 时显示 net::ERR_FILE_NOT_FOUND

Question

I am really new to coding and I am following this video tutorial to make a rock, paper, scissors game. I made a JavaScript function with innerHTML, but I keep getting an error when I test it out in the console log. In my code, the humandiv.innerHTML works just find; however, the botdiv.innerHTML is creating the net::ERR_FILE_NOT_FOUND. Any idea what is going on?

function rpsfrontend(humanimagechoice, botimagechoice, finalmessage) {
    var imagesdatabase = {
        "rock": document.getElementById("rock").src,
        "paper": document.getElementById("paper").src,
        "scissors": document.getElementById("scissors").src,
    }
    // lets remove all images
    document.getElementById("rock").remove();
    document.getElementById("paper").remove();
    document.getElementById("scissors").remove();

    var humandiv = document.createElement("div");
    var botdiv = document.createElement("div");
    var messagediv = document.createElement("div");

    humandiv.innerHTML = "<img src='" + imagesdatabase[humanimagechoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
    botdiv.innerHTML = "<img src='" + imagesdatabase[botimagechoice] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>" 

document.getElementById("flexboxrpsdiv").appendChild(humandiv);
document.getElementById("flexboxrpsdiv").appendChild(botdiv); }

Answer 1

As per your comment

humanimagechoice has rock as a value and therefore it worked with imagesdatabase[humanimagechoice] because imagesdatabase['rock'] holds a value.

While botimagechoice has {message: "You Lost,": color: "red"} as a value

And you are trying to read imagesdatabase[{message: "You Lost,": color: "red"}] when you write imagesdatabase[botimagechoice] which is not a valid syntax hence you are getting the error.

You botimagechoice should be some string like rock .

Answer 2

I think you are trying to pass the result of the bot and the human game as the bot image.It's going to work fine if u correct that

So you are trying to access the object imagesdatabase with the key {message: "You Lost,": color: "red"} ; which it is not able to find; hence the error ERR_FILE_NOT_FOUND

The usual Structure os a JSON object is as follows: JSON:{key:value}; The value can be another JSON in turn meaning u can have a JSON of the following structure

const imagesdatabase = {
        "rock": document.getElementById("rock").src,
        "paper": document.getElementById("paper").src,
        "scissors": document.getElementById("scissors").src,
    }

it is always a good idea to make the json variable a consant

from the code as per my understanding, you just need the JSON key as the output, you could do something like this:

humandiv.innerHTML = "<img src='" + Object.keys(imagesdatabase[humanimagechoice])[0] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>"
botdiv.innerHTML = "<img src='" + Object.keys(imagesdatabase[botimagechoice])[0] + "' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>" 

so the code above gives just the key of the object. frankly, I would suggest storing the key in another variable like this and using them in the code. Here is my version with what I think are the best practices:

   let imageDatabase;
//function to set the imageDatabse variable
function setImageDatabase() {
  imageDatabase = {
    "rock": document.getElementById("rock").src,
    "paper": document.getElementById("paper").src,
    "scissors": document.getElementById("scissors").src,
  }
};

//function to set the inner html

function setInnerHtml(botImageChoice, humanImageChoice) {
  const humanDiv = document.createElement("div");
  const botDiv = document.createElement("div");
  const messageDiv = document.createElement("div");
  //try to follow camel casing where ever possible
  //use backtics for better readibility
  humandiv.innerHTML = `<img src=' ${imagesDatabase[humanImageChoice]}' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>`;
  botdiv.innerHTML = `<img src=' ${imagesDatabase[botImageChoiceKey]}' height=150 width=150 style='box-shadow: 0px 10px 50px rgba(37, 50, 233, 1);'>`
  document.getElementById("flexboxrpsdiv").appendChild(humanDiv);

  document.getElementById("flexboxrpsdiv").appendChild(botDiv);

  /*you might also want to append the result of the game here*/
}
// the function to remove the images
function removeImages() {
  document.getElementById("rock").remove();
  document.getElementById("paper").remove();
  document.getElementById("scissors").remove();

}

//your actual caller function
function rpsfrontend(humanimagechoice, botimagechoice, finalmessage) {
  /*avoid using var , and try making the variables as const/let where ever possible,trust me it helps a lot in the future*/

  /* why not make this a seperate function,it is a good practise to make one function to do one job
  var imageDatabase = {
    "rock": document.getElementById("rock").src,
    "paper": document.getElementById("paper").src,
    "scissors": document.getElementById("scissors").src,
  }
  document.getElementById("rock").remove();
  document.getElementById("paper").remove();
  document.getElementById("scissors").remove();
  */

  setImageDatabase();
  removeImages();
  setInnerHtml(botImageChoice, humanImageChoice);

  /*
  botImageChoice is 'rock'
  humanImageChoice is 'paper'
  in this case the structure of the you will get

  imageDatabase[botImageChoice] as imageDatabase['rock'] with respective value

  and similaraly for the 
  imageDatabase[humanImageChoice] as imageDatabase['paper'] with respective value*/

}

//call the function here; hope this helps;:) happy coding