Проблемы с доступом к атрибуту стиля элемента с помощью JavaScript

Question

Я пытаюсь получить доступ к атрибуту стиля элемента для отображения формы, однако я получаю эту ошибку: Uncaught TypeError: Невозможно прочитать свойство 'style' из неопределенного .Пример ниже является упрощенным примером.

cookies.php

echo "[a href='test.php?flavor=butter']Bake Butter Cookies[/a]";

echo "[a href='test.php?flavor=chocolate'] Bake Chocolate Cookies [/a]";

?>

test.php

switch($cookieType){
 case "chocolate":
  echo "<script type='text/javascript'>";
  echo "document.chocolate.style.display='block'; ";
  echo "</script>";
 break;
 case "oatmeal-raisin":
  echo "<script type='text/javascript'>";
  echo "document.oatmealraisin.style.display='block'; ";
  echo "</script>";
 break;
 case "butter":
  echo "<script type='text/javascript'>";
  echo "document.butter.style.display='block'; ";
  echo "</script>";
 break;
 }
?>

<div id="chocolate" style="display:none;">
 <form action="<?php echo $_SERVER['php_self']?>">
  <input type="hidden" name="type" value="chocolate"/>
  What is your name: <input type="text" name="your_name"/>
  How many chocolate chips on each cookie? <input type="text" name="chips"/>
  How many many cookies? <input type="text" name="cookies"/>
  <input type="submit" name="BAKE!"/>
  <input type="reset"/>
 </form>
</div>

 <div id="oatmealraisin" style="display:none;">
 <input type="hidden" name="type" value="oatmealraisin"/>
 <form action="<?php echo $_SERVER['php_self']?>">
  What is your name: <input type="text" name="your_name"/>
  How many raisins on each cookie? <input type="text" name="raisins"/>
  How many many cookies? <input type="text" name="cookies"/>
  <input type="submit" name="BAKE!"/>
  <input type="reset"/>
 </form>
</div>

<div id="butter" style="display:none;">

<form action="<?php echo $_SERVER['php_self']?>">
  <input type="hidden" name="type" value="butter"/>
  What is your name: <input type="text" name="your_name"/>
  How many many cookies? <input type="text" name="cookies"/>
  <input type="submit" name="BAKE!"/>
  <input type="reset"/>
 </form>

У меня никогда не было проблем с доступом к атрибуту style элементараньше, поэтому я не уверен, в чем проблема.Оператор switch работает, потому что консоль javascript показывает вывод правильного регистра.Мне нужна другая пара глаз.Есть предложения?

Answer 1

Проблема не в атрибуте стиля, вам не удалось получить доступ к самим элементам.

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

document.chocolate

с:

document.getElementById('chocolate')

и соответствует каждому элементу.