1

function changedisplay()
{
    var x = document.getElementsByTagName('li');
    if (x.style.display == 'none')
    {
        x.style.display  = 'block';
    }
    else
    {
        x.style.display  = 'none';
    }
    
}
<!DOCTYPE html>
<html>
    <HEAD>
        <meta charset='utf-8'>
        <script type='text/javascript' src='script.js'></script>        
    
        <style>
            li
            {
                display: none;

            }
            

        </style>
    </HEAD>

    <body>

        <button onclick="changedisplay()">mudar</button>
        <ul>
            <li name='li'>ASDASD</li>
            <li name='li'>ASDASD</li>
            <li name='li'>ASDASD</li>
        </ul>
  
</body>
</html>

Estou tentando fazer um menu para mobile com uma <ul> por padrão está display: none, quero alterar o msm block quando o usuário clicar no Menu para dar o efeito e voltar para none quando o mesmo for pressionado.

1 Resposta 1

1

getElementsByTagName retorna uma lista de vários elementos (para ser mais preciso, retorna um HTMLCollection), então você precisa percorrer esta lista, e para cada elemento, mudar o style do mesmo:

for (let x of document.getElementsByTagName('li')) {
  if (!x.style.display || x.style.display == 'none')
    x.style.display  = 'block';
  else
    x.style.display  = 'none';
}

Ou:

let elementos = document.getElementsByTagName('li');
for (let i = 0; i < elementos.length; i++) {
  let x = elementos[i];
  if (!x.style.display || x.style.display == 'none')
    x.style.display  = 'block';
  else
    x.style.display  = 'none';
}

Também incluí uma condição a mais (!x.style.display), pois na primeira vez o display dos elementos pode não estar definido.

Exemplo completo:

function changedisplay()
{
    for (let x of document.getElementsByTagName('li')) {
      if (!x.style.display || x.style.display == 'none')
        x.style.display  = 'block';
      else
        x.style.display  = 'none';
    }
}
<!DOCTYPE html>
<html>
    <HEAD>
        <meta charset='utf-8'>
        <script type='text/javascript' src='script.js'></script>        
    
        <style>
            li
            {
                display: none;

            }
            

        </style>
    </HEAD>

    <body>

        <button onclick="changedisplay()">mudar</button>
        <ul>
            <li name='li'>ASDASD</li>
            <li name='li'>ASDASD</li>
            <li name='li'>ASDASD</li>
        </ul>
  
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .