Почему не работает манипуляция цветом JavaScript DOM? - PullRequest
Новая
       5

Почему не работает манипуляция цветом JavaScript DOM?

0 голосов
/ 18 июня 2020

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

<html>
  <head>
    <script>
      var feeling = prompt("Enter an emotion.");
      if (feeling == "ANGRY") {
        document.body.style.backgroundColor = "blue";
      } else if (feeling == "HAPPY") {
        document.body.style.backgroundColor = "green";
      } else if (feeling == "SAD") {
        document.body.style.backgroundColor = "yellow";
      } else if (feeling == "DISGUSTED") {
        document.body.style.backgroundColor = "orange";
      } else if (feeling == "HUNGRY") {
        document.body.style.backgroundColor = "purple";
      } else if (feeling == "ENJOYING") {
        document.body.style.backgroundColor = "blue";
      } else if (feeling === "LAZY") {
        document.body.style.backgroundColor = "red";
      } else if (feeling == "STRESSFUL") {
        document.body.style.backgroundColor = "DarkBlue";
      } else {
        alert(
          "That feeling is not documented. Please try again with a documented feeling."
        );
      }
    </script>
  </head>
  <body>
    <p></p>
  </body>
</html>

Однако каждый раз, когда я запускаю его в Edge, он выдает эту ошибку: 

main.html:49 Uncaught TypeError: Cannot read property 'style' of null
at main.html:49

Все остальные ответы не давали мне контроля над backgroundColor. Что я должен делать? У кого-нибудь есть рабочие фрагменты кода, которые я мог бы использовать?

Ответы [ 2 ]

3 голосов
/ 18 июня 2020

Переместите код javascript ниже / внутрь тега body

Причина в том, что при попытке сделать запрос эмоции средство визуализации перестает ждать вашего ответа, затем он выполняется, но тег тела не был создан, и он не работает, потому что document.body имеет значение null

Попробуйте следующий пример 

<html>
  <head> </head>
  <body>
    <p></p>
    <script>
      var feeling = prompt("Enter an emotion.");
      if (feeling == "ANGRY") {
        document.body.style.backgroundColor = "blue";
      } else if (feeling == "HAPPY") {
        document.body.style.backgroundColor = "green";
      } else if (feeling == "SAD") {
        document.body.style.backgroundColor = "yellow";
      } else if (feeling == "DISGUSTED") {
        document.body.style.backgroundColor = "orange";
      } else if (feeling == "HUNGRY") {
        document.body.style.backgroundColor = "purple";
      } else if (feeling == "ENJOYING") {
        document.body.style.backgroundColor = "blue";
      } else if (feeling === "LAZY") {
        document.body.style.backgroundColor = "red";
      } else if (feeling == "STRESSFUL") {
        document.body.style.backgroundColor = "DarkBlue";
      } else {
        alert(
          "That feeling is not documented. Please try again with a documented feeling."
        );
      }
    </script>
  </body>
</html>
0 голосов
/ 18 июня 2020

Если вы поместите скрипт в тег <body>, он работает 

<html> 
<head> 

</head> 
<body> 
<p></p>
    <script> 
var feeling = prompt("Enter an emotion.");
    if(feeling == "ANGRY"){

    document.body.style.backgroundColor = "blue";
}else if(feeling == "HAPPY"){
    document.body.style.backgroundColor = "green";
}else if(feeling == "SAD"){
    document.body.style.backgroundColor = "yellow";
}else if(feeling == "DISGUSTED"){
    document.body.style.backgroundColor = "orange";
}else if(feeling == "HUNGRY"){
    document.body.style.backgroundColor = "purple";
}else if(feeling == "ENJOYING"){
    document.body.style.backgroundColor = "blue";

}else if(feeling === "LAZY"){
    document.body.style.backgroundColor = "red";
}else if(feeling == "STRESSFUL"){
    document.body.style.backgroundColor = "DarkBlue";
}else{
    alert("That feeling is not documented. Please try again with a documented feeling.");
}
</script> 
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...