• D
    User Attivo •

    Problema con un button che onclick cambia classname di un ul

    [HTML]
    <style type="text/css">
    .nascosto {
    visibility: hidden;
    }
    .visibile {
    visibility: visible;
    }
    </style>

    <input type="button" value="10" onclick="1decade.className='visibile';">
    <input type="button" value="20" onclick="2decade.className='visibile';">
    <input type="button" value="30" onclick="3decade.className='visibile';">
    <input type="button" value="40" onclick="4decade.className='visibile';">
    <ul name="1decade" class="nascosto">
    <li><p>1</p></li>
    <li><p>2</p></li>
    </ul>
    <ul name="2decade" class="nascosto">
    <li><p>1</p></li>
    <li><p>2</p></li>
    </ul>
    <ul name="3decade" class="nascosto">
    <li><p>1</p></li>
    <li><p>2</p></li>
    </ul>
    <ul name="4decade" class="nascosto">
    <li><p>1</p></li>
    <li><p>2</p></li>
    </ul>
    [/HTML]

    Perchè non funziona? schiacciando il primo pulsante il primo elenco dovrebbe essere visibile, schiacciando il secondo pure e cosi via. Dove stà l'errore?

    0
  • L
    User Attivo •

    Ti consiglio di usare id invece di name. Cmq devi ottenere l'elemento con il name quindi document.getElementsByName, che restituisce una collection, quindi devi includere un [0].className....

    0
  • D
    User Attivo •

    Scusa ma di JS sono ancora poco pratico in quanto lo sto ancora studiando. Potresti darmi due righe di codice di esempio per spiegarmi ciò che dici?

    0
  • L
    User Attivo •

    document.getElementsByName('1decade')[0].className='visibile';

    0
  • D
    User Attivo •

    Grazie mille! funziona 😉

    0
  • D
    User Attivo •

    [HTML]
    <div id="contenitore">
    <div id="domande_decanumero">
    <div class="domande">
    <input type="button" value="10" onclick="document.getElementsByName('1decade')[0].className='visibile'; document.getElementsByName('2decade')[0].className='nascosto'; document.getElementsByName('3decade')[0].className='nascosto'; document.getElementsByName('4decade')[0].className='nascosto';">
    </div>
    <div class="domande">
    <input type="button" value="20" onclick="document.getElementsByName('1decade')[0].className='nascosto'; document.getElementsByName('2decade')[0].className='visibile'; document.getElementsByName('3decade')[0].className='nascosto'; document.getElementsByName('4decade')[0].className='nascosto';">
    </div>
    <div class="domande">
    <input type="button" value="30" onclick="document.getElementsByName('1decade')[0].className='nascosto'; document.getElementsByName('2decade')[0].className='nascosto'; document.getElementsByName('3decade')[0].className='visibile'; document.getElementsByName('4decade')[0].className='nascosto';">
    </div>
    <div class="domande">
    <input type="button" value="40" onclick="document.getElementsByName('1decade')[0].className='nascosto'; document.getElementsByName('2decade')[0].className='nascosto'; document.getElementsByName('3decade')[0].className='nascosto'; document.getElementsByName('4decade')[0].className='visibile';">
    </div>
    </div>
    <div id="menu">
    <div id="domande_numero">
    <ul id="1decade" class="visibile">
    <div class="domanda"><li><p>1</p></li></div>
    <div class="domanda"><li><p>2</p></li></div>
    <div class="domanda"><li><p>3</p></li></div>
    <div class="domanda"><li><p>4</p></li></div>
    <div class="domanda"><li><p>5</p></li></div>
    <div class="domanda"><li><p>6</p></li></div>
    <div class="domanda"><li><p>7</p></li></div>
    <div class="domanda"><li><p>8</p></li></div>
    <div class="domanda"><li><p>9</p></li></div>
    <div class="domanda"><li><p>10</p></li></div>
    </ul>
    <ul id="2decade" class="nascosto">
    <div class="domanda"><li><p>11</p></li></div>
    <div class="domanda"><li><p>12</p></li></div>
    <div class="domanda"><li><p>13</p></li></div>
    <div class="domanda"><li><p>14</p></li></div>
    <div class="domanda"><li><p>15</p></li></div>
    <div class="domanda"><li><p>16</p></li></div>
    <div class="domanda"><li><p>17</p></li></div>
    <div class="domanda"><li><p>18</p></li></div>
    <div class="domanda"><li><p>19</p></li></div>
    <div class="domanda"><li><p>20</p></li></div>
    </ul>
    <ul id="3decade" class="nascosto">
    <div class="domanda"><li><p>21</p></li></div>
    <div class="domanda"><li><p>22</p></li></div>
    <div class="domanda"><li><p>23</p></li></div>
    <div class="domanda"><li><p>24</p></li></div>
    <div class="domanda"><li><p>25</p></li></div>
    <div class="domanda"><li><p>26</p></li></div>
    <div class="domanda"><li><p>27</p></li></div>
    <div class="domanda"><li><p>28</p></li></div>
    <div class="domanda"><li><p>29</p></li></div>
    <div class="domanda"><li><p>30</p></li></div>
    </ul>
    <ul id="4decade" class="nascosto">
    <div class="domanda"><li><p>31</p></li></div>
    <div class="domanda"><li><p>32</p></li></div>
    <div class="domanda"><li><p>33</p></li></div>
    <div class="domanda"><li><p>34</p></li></div>
    <div class="domanda"><li><p>35</p></li></div>
    <div class="domanda"><li><p>36</p></li></div>
    <div class="domanda"><li><p>37</p></li></div>
    <div class="domanda"><li><p>38</p></li></div>
    <div class="domanda"><li><p>39</p></li></div>
    <div class="domanda"><li><p>40</p></li></div>
    </ul>
    </div>
    </div>
    [/HTML]

    La soluzione è perfetta e funziona con explorer ma con Safari, nonostante sia abilitato il JavaScript, non va. Quancuno saperebbe dirmi come mai?

    0
Effettua l'accesso per rispondere