Радиокнопка Да или Нет вызова JavaScript Видимый или Скрытый список выбора - PullRequest
Новая
       28

Радиокнопка Да или Нет вызова JavaScript Видимый или Скрытый список выбора

0 голосов
/ 11 июля 2020

Когда нажата любая из радиокнопок, видимость тега select не меняется. Просто ничего не происходит, даже ошибок.

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

Используя вкладку Inspector "Inspect Element Q", при проверке rad ios ничего не меняется. Я просто подумал об этом. Я не знаю, как использовать отладчик.

Перед тем, как опубликовать это здесь, я поместил размещенный здесь код в JSfiddle. Он там работает: включение и выключение выпадающего списка. Итак, на моей странице PHP может быть что-то еще.

Вот мой код: 

 <head> 
 <script type="text/javascript">
    
        function hasClass(){
        
            var checked_yes = document.getElementById("hasClass_yes").checked;
            var checked_no =  document.getElementById("hasClass_no").checked;
        
            if(checked_yes) {
                document.getElementById("class_drop_list").style.visibility="visible";
            } else if(checked_no){
                document.getElementById("class_drop_list").style.visibility="hidden";
                }
        }     
     </script>
     </head>



   <tr>
    <td>Does the monster have a class?
        <label for="hasClass_yes">Yes
            <input type="radio" id="hasClass_yes" name="hasClass" onclick="hasClass();" />
        </label>
            
        <label for="hasClass_no">No
            <input type="radio" id="hasClass_no" name="hasClass" onclick="hasClass();" />
        </label>
            
                       
        <select style="visibility:" id="class_drop_list" name="monsters_class">
            <option value="Adept">Adept</option>
            <option value="Barbarian">Barbarian</option>
            <option value="Cavalier">Cavalier</option>
            <option value="Cleric">Cleric</option>
            <option value="Druid">Druid</option>
            <option value="Healer">Healer</option>
            <option value="Jumper">Jumper</option>
            <option value="Marshalist">Marshalist</option>
            <option value="Rogue">Rogue</option>
            <option value="Rook">Rook</option>
            <option value="Sorcerer">Sorcerer</option>
            <option value="Swashbuckler">Swashbuckler</option>
            <option value="Witch">Witch</option>
            <option value="Wizard">Wizard</option>
        </select>
    </td>
  </tr>

Я тоже пробовал этот скрипт 

 <script type="text/javascript">
    
        function hasClass(){
        
            var checked_yes = document.getElementById("hasClass_yes");
            var class_drop_list_on =  document.getElementById("class_drop_list");
        
            class_drop_list_on.style.visibility = checked_yes.checked ? "visibility" : "visible";
        }     
     </script>

Ответы [ 2 ]

0 голосов
/ 14 июля 2020

Итак, я сделал следующее, пытаясь решить эту проблему.

  1. Скопировал соответствующий код из файла php в отдельный файл html, чтобы проверить его за пределами файл большего размера php. Просто сценарий и поля ввода да / нет и выберите тег.

  2. Он все еще не работает.

  3. Установил другой браузер в моей системе - Хром. Тестовый файл там тоже не запускался.

  4. Скопировал тестовый файл и исходный php файл на usb и попробовал его на компьютере windows. По-прежнему не запускался.

  5. Изменен тестовый файл, чтобы он выглядел так, как показано ниже - и он работал во всех браузерах как на Windows, так и на компьютерах Ubuntu. 

     <html>
     <head>
        <style></style>

        <script type="text/javascript">

            function hasClassYes(){
         document.getElementById("class_drop_list").style.visibility="visible";
     }                
            function hasClassNo(){
         document.getElementById("class_drop_list").style.visibility="hidden";
     }

        </script>

     </head>
     <body>

         <form action="make_monster.php" method="post">
             <table>
                <tr style="background-color:#999999">
                   <td>Does the monster have a class?

                       <label for="hasClass_yes">Yes
                           <input type="radio" id="hasClass_yes" name="hasClass" onclick="hasClassYes();" />
                       </label>

                       <label for="hasClass_no">No
                           <input type="radio" id="hasClass_no" name="hasClass" onclick="hasClassNo();" />
                       </label>


                       <select style="visibility:" id="class_drop_list" name="monsters_class">
                         <option value="Adept">Adept</option>
                         <option value="Barbarian">Barbarian</option>
                         <option value="Wizard">Wizard</option>
                       </select>
                    </td>    
                  <tr>

          </table>
       </form>
    </body>
 </html>

Отличие в том, что вместо использования операторов IF или SWITCH внутри одной функции для определения состояния yes no и установки атрибута стиля в теге select у меня теперь есть две отдельные функции для yes или №

0 голосов
/ 11 июля 2020

похоже, это работает как сниппет. в чем проблема? 

<head> 
 <script type="text/javascript">
    
        function hasClass(){
        
            var checked_yes = document.getElementById("hasClass_yes").checked;
            var checked_no =  document.getElementById("hasClass_no").checked;
        
            if(checked_yes) {
                document.getElementById("class_drop_list").style.visibility="visible";
            } else if(checked_no){
                document.getElementById("class_drop_list").style.visibility="hidden";
                }
        }     
     </script>
     </head>



   <tr>
    <td>Does the monster have a class?
        <label for="hasClass_yes">Yes
            <input type="radio" id="hasClass_yes" name="hasClass" onclick="hasClass();" />
        </label>
            
        <label for="hasClass_no">No
            <input type="radio" id="hasClass_no" name="hasClass" onclick="hasClass();" />
        </label>
            
                       
        <select style="visibility:" id="class_drop_list" name="monsters_class">
            <option value="Adept">Adept</option>
            <option value="Barbarian">Barbarian</option>
            <option value="Cavalier">Cavalier</option>
            <option value="Cleric">Cleric</option>
            <option value="Druid">Druid</option>
            <option value="Healer">Healer</option>
            <option value="Jumper">Jumper</option>
            <option value="Marshalist">Marshalist</option>
            <option value="Rogue">Rogue</option>
            <option value="Rook">Rook</option>
            <option value="Sorcerer">Sorcerer</option>
            <option value="Swashbuckler">Swashbuckler</option>
            <option value="Witch">Witch</option>
            <option value="Wizard">Wizard</option>
        </select>
    </td>
  </tr>
...