консоль показывает net :: ERR_FILE_NOT_FOUND при попытке innerHTML

Question

Я новичок в программировании и следую этому видеоуроку, чтобы создать игру «камень, ножницы, бумага». Я сделал функцию JavaScript с внутренним HTML, но я продолжаю получать сообщение об ошибке, когда проверяю ее в журнале консоли. В моем коде humandiv.inner HTML работает просто найти; однако botdiv.inner HTML создает net :: ERR_FILE_NOT_FOUND. Есть идеи, что происходит?

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);<br> document.getElementById("flexboxrpsdiv").appendChild(botdiv); }

Answer 1

Я думаю, вы пытаетесь передать результат бота и игры человека как изображение бота. Он будет работать нормально, если вы исправите это

Итак, вы пытаетесь получить доступ к базе данных изображений объектов с помощью ключ {message: "You Lost!", color: "red"}; которую он не может найти; отсюда возникает ошибка ERR_FILE_NOT_FOUND

Обычная структура объекта JSON выглядит следующим образом: JSON: {key: value}; Значение может быть другим JSON, что, в свою очередь, означает, что u может иметь JSON следующей структуры:

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

, всегда рекомендуется сделать переменную json согласной

из кода, как я понимаю, вам просто нужен ключ JSON в качестве вывода, вы можете сделать что-то вроде этого:

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

, поэтому приведенный выше код дает только ключ объекта. честно говоря, я бы посоветовал сохранить ключ в другой такой переменной и использовать их в коде. Вот моя версия с лучшими на мой взгляд практиками:

   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

Answer 2

В соответствии с вашим комментарием

humanimagechoice имеет рок в качестве значения, и поэтому он работал с imagesdatabase[humanimagechoice], потому что база данных изображений ['rock'] содержит значение.

Хотя botimagechoice имеет {message: "You Lost!", color: "red"} в качестве значения

И вы пытаетесь прочитать imagesdatabase[{message: "You Lost!", color: "red"}], когда пишете imagesdatabase[botimagechoice], что не является допустимым синтаксисом, поэтому вы получаете ошибку.

Вы botimagechoice должна быть строка вроде rock.