TypeError：无法访问属性“src”，图像为空答案

【问题标题】：TypeError: can't access property "src", image is nullTypeError：无法访问属性“src”，图像为空
【发布时间】：2020-09-06 22:33:01
【问题描述】：

我想要做的是打开网络，一条消息说我要打开什么图像。当您单击“jugar”按钮时，必须出现随机图像，但不会出现。错误说在第 9 行（最后一行）这是代码，在 HTML、javascript 和 css 中。

document.addEventListener('DOMContentLoaded', function(event) {
})
const catbutton=document.getElementById('catbutton')
const cubebutton=document.getElementById('cubebutton')
const image=document.getElementById('image')
var arr= ["pr1.jpg", "pr2.jpg"]
const randomElement = arr[Math.floor(Math.random() * arr.length)];
alert(randomElement)
image.src=(randomElement)

/* WARNING: importando fuente y ajustes basicos de la web */
@import url('https://fonts.googleapis.com/css2?family=Jockey+One&display=swap');

html, body{
  height:100%;
  margin: 0;
  font-family: 'Jockey One', sans-serif;

  background-image: radial-gradient(#65bee5, #0f3558);

}
/* WARNING: fin de importando fuente y ajustes basicos de la web */



/* WARNING: pantalla de carga al entrar a la web */
.fondo{
  height:100%;
  width: 100%;
  background-image: radial-gradient(#65bee5, #0f3558);

  display:flex;
  justify-content: center;
  align-items: center;
}

.pantalla-carga{
  display:flex;
  vertical-align: middle;

  animation-name: pantalla-carga;
  animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.pantalla-carga>p{
  padding: 5px;
  font-size: 100px;
  color: #ffc51b;
  -webkit-text-stroke: 3px white;
  letter-spacing: 5px;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pantalla-carga>p::first-letter{
  font-size: 130px;

}

@keyframes pantalla-carga { /* WARNING: animaciones del texto para la pantalla de carga y para el titulo */
  from {                    /* WARNING: de la pantalla de inicio o menu */
    transform: scale(1,1);
  }

  to {
    transform: scale(1.05, 1.05);
  }

}
/* WARNING: fin de la pantalla de carga al entrar a la web */



/* WARNING: pantalla de inicio de la web o menu */
.pantalla-principal{
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  flex-flow: column;

  height:100%;
  width: 100%;
  background-image: radial-gradient(#65bee5, #0f3558);

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pantalla-principal-titulo>p{
  font-size: 100px;
  color: #ffc51b;
  -webkit-text-stroke: 3px white;
  letter-spacing: 5px;

  animation-name: pantalla-carga;
  animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate-reverse;

  margin-top: -40px;   /* WARNING: cambiar para responsive */
}

.pantalla-principal-botones{
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  flex-flow: column;

  margin-top: -100px; /* WARNING: cambiar para responsive */
}

.pantalla-principal-botones>button{
  background: #ffc51b;
  color: white;
  letter-spacing: 5px;
  font-size: 30px;
  font-family: 'Jockey One', sans-serif;
  width: 300px;
  height: 80px;
  margin: 10px;
  border-radius: 30px;
  border: 3px solid white;

  cursor: pointer;
}
/* WARNING: fin de la pantalla de inicio de la web o menu */

/* WARNING: pantalla de jugo de la web */
.pantalla-juego{
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  flex-flow: column;

  height:100%;
  width: 100%;
  background-image: radial-gradient(#65bee5, #0f3558);

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pantalla-juego-general{
  display: flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  flex-flow: column;

  height:100%;
  width: 100%;
  margin-top: -140px;   /* WARNING: cambiar para responsive */
}

.pantalla-juego-general>p{
  font-size: 100px;
  color: #ffc51b;
  -webkit-text-stroke: 3px white;
  letter-spacing: 5px;

  animation-name: pantalla-carga;
  animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate-reverse;

  margin-bottom: -20px;   /* WARNING: cambiar para responsive */
}

.pantalla-juego-general>img{
  height: 300px;
  border-radius: 30px;
  border: 3px solid white;
  margin: 10px;
}

.pantalla-juego-botones>button{
  background: #ffc51b;
  color: white;
  letter-spacing: 5px;
  font-size: 30px;
  font-family: 'Jockey One', sans-serif;
  width: 300px;
  height: 80px;
  margin: 10px;
  border-radius: 30px;
  border: 3px solid white;

  cursor: pointer;
}

<!DOCTYPE html>
<html lang="es">
  <head>
<!-- WARNING: link a la hoja de estilo, titulo, favicon y metas -->
    <link rel="stylesheet" href="estilo.css">
    <title>Ninjas del Futuro</title>
    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no"/>
    <link rel="icon" type="image/png" href="FAVICON.png">
<!-- WARNING: cambio de pantalla de carga a pantalla principal-->
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        setTimeout(function() {
            $(".fondo").fadeOut(300);
        },5000);

        setTimeout(function() {
            $(".pantalla-principal").fadeIn(300);
        },6000);
    });
    </script>
<!-- WARNING: finaliza el script para el cambio de pantalla de carga a pantalla principal-->

<!-- WARNING: botones del menu principal -->
    <script type="text/javascript">
      function botonMenuJugar() {
        $(document).ready(function() {
            setTimeout(function() {
                $(".pantalla-principal").fadeOut(100);
            },500);

            setTimeout(function() {
                $(".pantalla-juego").fadeIn(100);
            },1000);
        });
      }
    </script>
<!-- WARNING: finaliza el script para los botones de la pantalla principal -->
    <script type="text/javascript" src="javascript.js"></script>

  </head>
  <body>
<!-- WARNING: pantalla de juego -->
    <div style="display: none;" class="pantalla-juego">
      <div class="pantalla-juego-general">
        <p>Cubo o Gato</p>
        <img id="image" src="" alt="">
        <div class="pantalla-juego-botones">
          <button id="cubebutton" type="button" name="button">CUBO</button>
          <button id="catbutton" type="button" name="button">GATO</button>
        </div>
      </div>
    </div>
<!-- WARNING: pantalla de juego termina -->

<!-- WARNING: pantalla principal o menu-->
    <div style="display: none;" class="pantalla-principal">
      <div class="pantalla-principal-titulo">
        <p>Cubo o Gato</p>
      </div>
      <div class="pantalla-principal-botones">
        <button type="button" onclick="botonMenuJugar()" name="button">JUGAR</button>
        <button type="button" name="button">CRÉDITOS</button>
        <button type="button" name="button">SALIR</button>
      </div>
    </div>
<!-- WARNING: pantalla principal o menu termina-->

<!-- WARNING: pantalla de carga al entrar a la web-->
    <div class="fondo">
      <div class="pantalla-carga">
        <p>Ninjas</p>
        <p>Del</p>
        <p>Futuro</p>
      </div>
    </div>
<!-- WARNING: pantalla de carga al entrar a la web termina-->
  </body>
</html>

我只是在做 javascript 部分...请帮助，我正在学习 js，我现在不太了解。

【问题讨论】：

标签： javascript html random src

【解决方案1】：

您必须添加图像的路径而不是图像名称。

【讨论】：

我该怎么做？
喜欢路径 '../abc/def/pr1.jpg' 而不是 pr1.jpg。图片的路径应该是图片的相对路径与您正在处理的文件相当。
我刚试了下，还是一样的错误，还有一个是The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
我使用了我在 PC 上找到的 2 张随机图片
将事件添加为 load 而不是 DomLoadContent

【解决方案2】：

您在加载 DOM 之前设置 src。

document.addEventListener('DOMContentLoaded', function(event) {

const catbutton=document.getElementById('catbutton')
const cubebutton=document.getElementById('cubebutton')
const image=document.getElementById('image')
var arr= ["pr1.jpg", "pr2.jpg"]
const randomElement = arr[Math.floor(Math.random() * arr.length)];
alert(randomElement)
image.src=(randomElement)

})

See JS Fiddle here

【讨论】：

添加了一个新的 JS fiddle 链接。你可以检查一下。
它在哪里？我刚刚做了javascript?
我的回答中有一个“See Js Fiddle Here”墨水。您可以单击它并检查 js fiddle 页面的 html 部分。您的代码被添加到脚本标签中。
而不是实际图像，它会显示图像占位符（结果在右下角），因为我的机器上没有 pr1 和 pr2 图像。
我遇到了这个错误：The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. 我看不到图片