У меня есть это (Uncaught TypeError: невозможно установить свойство sr c из нуля) эта ошибка

Question

Я всегда получаю эту ошибку, когда пытаюсь запустить ее на своем компьютере. Пожалуйста, помогите мне, я застрял. Я перепробовал все, что есть на inte rnet, чтобы решить эту проблему, но все они не работали в моем случае!

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

function generateCat() {
  let image = document.getElementById("img");
  let div = document.getElementById("flex-cat-gen");
  image.src = "http://thecatapi.com/api/images/get?format=src&type=gif";
  div.appendChild(image);
}

.container-2 {
  border: 1px solid red;
  margin: 0 auto;
  width: 75%;
  text-align: center;
  `enter code here`
}

.flex-box-container-2 {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  justify-content: space-around;
  border: 1px solid green;
}

.flex-box-container-2 img {
  border: 1px solid blue;
  padding: 10px;
}

<title>Cat Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="container-2">
  <h1>Cat Generator</h1>
  <div>
    <button class="btn btn-success" id="cat-generator" onclick="generateCat()">Generate Cat</button>
  </div>
  <div class="flex-box-container-2" id="flex-cat-gen"></div>
</div>

Answer 1

Вам нужно ЛИБО создать изображение и добавить ИЛИ иметь изображение и изменить sr c

function generateCat() {
  // change existing src
  let image = document.getElementById("img");
  image.src = "http://thecatapi.com/api/images/get?format=src&type=gif";

  // appending new image object
  let div = document.getElementById("flex-cat-gen2");
  let imageObject = document.createElement("img")
  imageObject.src = "http://thecatapi.com/api/images/get?format=src&type=gif";
  div.appendChild(imageObject);
}

.container-2 {
  border: 1px solid red;
  margin: 0 auto;
  width: 75%;
  text-align: center;
  `enter code here`
}

.flex-box-container-2 {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  justify-content: space-around;
  border: 1px solid green;
}

.flex-box-container-2 img {
  border: 1px solid blue;
  padding: 10px;
}

<title>Cat Generator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="container-2">
  <h1>Cat Generator</h1>
  <div>
    <button class="btn btn-success" id="cat-generator" onclick="generateCat()">Generate Cat</button>
  </div>
  <div class="flex-box-container-2" id="flex-cat-gen1">
    <img id="img" />
  </div>
  <div class="flex-box-container-2" id="flex-cat-gen2">
  </div>
</div>

Answer 2

отсутствует img, который вы пытаетесь выбрать на странице. Как вы можете выбрать без создания?

function generateCat() {
  let image = document.createElement("img"); //I created the img element myself.
  let div = document.getElementById("flex-cat-gen");
  image.src = "http://thecatapi.com/api/images/get?format=src&type=gif";
  div.appendChild(image);
}

или вы можете выбрать с помощью id после добавления тега img на свою страницу. вы получаете эту ошибку, потому что выбираете то, чего не существует

function generateCat() {
  let image = document.getElementById("img");
  let div = document.getElementById("flex-cat-gen");
  image.src = "http://thecatapi.com/api/images/get?format=src&type=gif";
  div.appendChild(image);
}