Jump to content
Fórum Script Brasil
  • 0

lista de nomes randômicas e ocultas


fidelidade

Question

Ola sou novo aqui e espero não infringir as regras.

Tenho uma lista de nomes onde  eu consigo acrescentar um avariavel nova  onde ao final da fila ela toma seu lugar e alterando uma linha acima e eliminando a primeira, eu gostaria que continuasse assim, porem acrescentei quatros nomes de frutas, estas sem atrapalhar o cod de baixo eu gostaria que fosse randomica e que se atualizasse a cada vez que a pagina fosse aberta ou se atualizasse.

 

Porem  após ter esta lista randomica eu gostaria que pudesse ter uma forma ocultasse algumas informações, e que aparecesse conforme apertasse um botão como se estivesse mudando de pagina, mas na verdade estivesse ocultando uma e aparecendo outra informação.

 

Na primeira pagina eu gostaria que ficasse visivel apenas o ultimo nome da fruta e o primeiro nome de email. e quando não fosse mais nescessario o usuario pudesse ao clicar no botão que todos os nomes em geral sumisse e ficasse visivel apenas as caixas onde adiciona o nome e onde copia. estarei deixando o cod e um print para erem uma ideia na imagem o quadrado  pontilhado representa que a imagem esta oculta

<ul>
<li>manga</li>
<li>pera</li>
<li>abacate</li>
<li>laranja</li>
</ul>
<div class="exibir">
<ul id="lista"><!-- Os nomes precisam tá aqui porque a variável "nomes" vai pegar esses valores -->
<li>Jonas@email</li>
<li>Edna@email</li>
<li>Felipe@email</li>
<li>Pedro@email</li>
<li>Tomas@email</li>
<li>Claudio@email</li>
<li><a href="mailto:Brenda@email">Brenda@email</a></li>
</ul>
<p><input id="nome" type="text" value="   " /> <button onclick="adicionar()">Adicionar</button></p>
<p>&nbsp;</p>
</div>
<p><textarea id="copy-me" name=""></textarea> <button id="copy-btn">Copiar HTML</button> <br /> <br />
<script>// <![CDATA[
let nomes = []; // A variável começa com um array vazio.
        const lis = document.querySelectorAll('li'); // Cria uma lista de todos os elementos com tag <li>.
      	// Em cada elemento da lista "lis" vai adicionar o conteúdo da tag na variável "nomes".
        lis.forEach((li) => nomes.push(li.innerHTML));

        let updateList = [...nomes];
        const copyValue = document.getElementById("copy-me");
        const copyButton = document.getElementById("copy-btn");

        copyButton.addEventListener("click", () => {
            copyValue.select();
            document.execCommand("copy");
        });

        const onChangeCopyHtml = () => {
            const source = document.documentElement.outerHTML;
            copyValue.value = source;
        };

        const renderList = () => {
            lista.innerHTML = "";
            for (var i = 0; i < updateList.length; i++) {
                var lis = document.createElement("li");
                lis.innerHTML = updateList[i];
                lista.appendChild(lis);
            }

            onChangeCopyHtml();
        };

        const onAddName = (name) => {
            updateList.push(name);
            const newList = updateList.slice(1, updateList.length);
            return newList;
        };

        function adicionar() {
            var coleta = document.getElementById("nome").value;
            var nomeDig = document.createElement("li");
            updateList = onAddName(coleta);
            renderList();
        }
        renderList();
// ]]></script>
</p>

. grato. 

lista foto.JPG

Edited by fidelidade
faltou tags
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...