TypeError: can't access property "src", image is null

Question

我想用它做的是打开网络，一条消息说我想打开什么图像。当你点击按钮时 '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，但我现在不太了解。

Answer 1

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

Answer 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